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 eefca42b0e..b3dab25ca3 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 a4a59bd2ba..43b72ed6e7 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 b3dab25ca3..6c6d4ad031 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 666d76fabc..7f93b10a0b 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 7f93b10a0b..5018d0ba4d 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 b66d1b5fd6..ad52fdd2d8 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 ad52fdd2d8..882d637b16 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 54f9e5d2fe..5972e9d41d 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 eccdfb081e..be64c07b97 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 b6d174e513..d99d53d9bc 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 91402bbd95..5281c21b04 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 882d637b16..4b2da05cb6 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 0000000000..5c291f228a --- /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 f23e377f4a..1d211d9a31 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 1ce5bcb55a..639afef92b 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 e4534b813d..caa840cb39 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 e2dc34ed3e..98ad9ccb1f 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 b09f23ed35..5a483adb53 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 40ef97631a..796ef39e00 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 079cb26277..55016cc214 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 4b2da05cb6..99f648a930 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 2e146c7701..cc55e9b7b5 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 ab9492aabb..05a7e8007e 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 66cf4001a0..48de13f4b2 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 0f610301df..ade7ced37d 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 913f4024c9..d379105835 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 6311497161..67a36e1cee 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 978b7f8dfe..85e715733b 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 a532d9bd02..50c552c0ad 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 0000000000..4a86326d4c --- /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 0000000000..5ee35a6978 --- /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 57d7643bba..40991b930c 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 d40442ce0e..b2ea531e53 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 1a084d7b3e..e2c0c7def6 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 e05415ce81..0040e5bef7 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 0000000000..6c6d4ad031 --- /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 6c6d4ad031..64eecbc5ca 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 0000000000..022b3de214 --- /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 0000000000..7b4d420a3a --- /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 48550054e8..e8d10e1f7d 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 48de13f4b2..031aa5e3a3 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 5a483adb53..6135d2b3c6 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 796ef39e00..2ff5515bab 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 d1f3141e69..607c3bfa62 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 99f1252db7..07d6465ba7 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 9b0f0f9101..b990d1aa5a 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 f03cd9ffe4..dbe12277b6 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 66cf4001a0..71b28ead6e 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 4f10f16fbe..750490650c 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 21044ad51d..1e95506ab0 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 05a7e8007e..b062cc8b8c 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 c579c8e7e5..180b936442 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 fbf3e5c308..6f80a965bc 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 5281c21b04..4eda43b55c 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 3286d1be28..9f85871a65 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 8076877f0b..9e2ebc85ff 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 52d5bfc14d..4c2f788a60 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 6135d2b3c6..42e36e063f 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 0000000000..6a11bf20d1 --- /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 2ff5515bab..5b968d33b8 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 b66d1b5fd6..1c45060cd6 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 55453782bd..0c295010e7 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 07d6465ba7..104e13ed6c 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 ba7a589c87..e29b84f12e 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 16017e43f9..61f2d3a246 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 3f5fb57697..1783d79cab 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 1c1ab37dbe..7bd0284ffc 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 022b3de214..6633b618e4 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 7b4d420a3a..cb5d10241e 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 99f648a930..40c069b941 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 3c350c2379..d373850446 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 85e715733b..604b6caa6d 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 6633b618e4..0c48eee56b 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 6c6d4ad031..0000000000 --- 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 e29b84f12e..82f460c786 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 badd4f6a60..59d0d20fb8 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 a496a58676..9a3ba16830 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 9810dcaf37..8b13982b83 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 1e73889fb2..6c45bfc4e6 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 c93d022546..050c1e23d7 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 1c8ce36601..57c6a68d13 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 86d23a4331..dfb6252290 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 e8cbe07279..7e325a06f3 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 8a9b3f3ac5..6e6a0fcc93 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 aeb59b2cf8..c03ec01e1b 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 ee54446d01..e68df6c280 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 5a47534d53..fb9bea617c 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 82f1c37ce6..6d8bb5c007 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 34021444a4..f89decdd2b 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 3959e36296..ea54a20145 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 c042d860f5..32f8a5ba9a 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 e8d10e1f7d..f650f8dd8c 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 94d83774f5..bcfc0b3bdf 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 9a1693031d..ba05686c80 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 f3ad758434..0b950fe026 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 e64cf18f72..9edb3eda65 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 de923a6afd..7cd830f16d 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 dee9042e7a..a2ef05300c 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 9ce542acf2..2d421296ee 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 7611f78f32..293fd2c4cc 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 da33c2be4a..e939f3951b 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 2d12315235..ad2bf5720a 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 819bb5a5dc..32dfe08432 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 4273e7c5d1..770d3792a4 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 ee7146879f..0d945b88ef 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 687cc28735..f87e1c8995 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 ec06c1049f..79ab22d0ad 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 b990d1aa5a..9ab7dec7ca 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 2ff26ba55d..ba73bcd6b7 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 6b7a56cb54..f7a3422bcf 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 c14d4bbf01..bb5d1f3c9c 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 369dceac87..3a7eb0fbc7 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 2f8f29b706..80fd350776 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 17ad6cae9c..64ea3c9536 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 80e035775e..07d66175f8 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 2f26e17c38..5f55e6d649 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 6e16889b21..bc1b5397b4 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 59d0d20fb8..67641c8bb5 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 e5588d46f4..cf16857099 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 d761e8e108..d5b385fbdf 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 dbe12277b6..603846a5a6 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 f342d28ba6..b8ff537d96 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 5354b08699..fbf80482f8 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 61373017ac..875e560514 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 37361f78f1..423f0cc29c 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 e5175533e1..ed20999507 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 1c65c63b52..73dd421081 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 02066bd2b8..279a74f2c9 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 caa840cb39..8930160084 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 70c56af04c..d9dcdd57cc 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 9ec79d03e0..d92a2ab8b4 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 74f6c659cf..426b270533 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 23391057f2..96dc07676a 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 750490650c..f07380e0b9 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 839c429daa..c4c0503ddf 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 712fe2a599..ab2a976624 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 3bac52c47d..e7e937a90f 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 361ad8475c..0acd0b3e6a 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 77e1f08a6e..ab66b36cfc 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 b9cb98bb89..2e22114e77 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 7ef614e815..70ffc2aa7c 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 17d4395708..268eaf8e63 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 59e6fc0721..016f9fb9b6 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 1a87ccc297..71bcaac6e2 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 50a97b9f31..86dfcc43e8 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 d00f9c9eec..d697280cac 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 b4674bf939..759688c4ec 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 2ab1222fd8..439eca1b3c 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 94d8e9b845..27c7dd003e 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 284a7fec9c..bbe7057e0a 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 0446fee915..f8519c54a5 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 2eef208e8d..212686d726 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 4ba3cc7c97..fbfd454bce 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 58d8daa112..4d099e4279 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 f175a64e6a..e454b05b27 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 372feee005..98753e90e7 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 fb97c5379e..4c79d4e65c 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 105b3754ee..9602fed80b 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 716b9e74b3..8164d8edcb 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 126e1321eb..a07f6e2841 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 59dddc056e..1acb76f304 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 f5a8be5de1..f4d1e2a23f 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 44d6862559..161c14fae9 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 9c54e61181..ab1b42a459 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 469a5baf7f..228025affb 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 8c72501655..2f67f5e960 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 b2cc8fb7be..ca724e4c3e 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 56fae78198..f44864cb5d 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 f2807ea6b5..6a6ae7d6c7 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 f20f5a7090..4fbf675194 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 99413bff22..6e76a68fb7 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 e8186e6e1e..e85904b02f 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 c9a63d7ded..f494ee9779 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 d04fb4bd30..3aa9ccb3c0 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 c2b492e527..61607a68b9 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 18f11e3aab..6b498795b9 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 71b889c453..13b226010a 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 02e74a09fc..a39ebcf27d 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 8ae563568e..f2611bf76e 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 7260c5db46..ac3a393270 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 08009a3e79..e3711fcea8 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 a75e9f2f5c..aecd5a446d 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 1550405f82..a873678882 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 8421aa6ca9..1a97e5b5a7 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 25a1238e17..b744f552cb 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 e77a909250..24265258d8 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 8d70689434..f5da3eb785 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 6b81186291..d3a4e0d649 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 a6b4a504e1..7337f52610 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 ebd0c50d74..4651659fa7 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 7c8d5a5649..26c44ffa7a 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 72bd22d751..a95c552424 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 6baf1ba3cd..1c3a24d1c3 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 849681b6fe..b6b35cb75d 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 a4da1e465e..e85483e690 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 aa68b248f2..1ce7a0d7eb 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 ba3a82b166..1ed8ff0fbb 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 1868a9a165..72057b538c 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 52e5893e47..98dbdca1e5 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 295410dd75..9e64227b60 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 614d4a5988..90a6f7d480 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 36a029891a..7289a982b2 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 abf8a00805..4c913180bc 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 33566d7950..8a71600ea2 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 94b45e7bd7..46e42ee9fd 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 0703b8b71b..545b5fcde8 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 357c943f20..7b4025c208 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 1e10e1f1ad..60bb5b9ba6 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 f41b618e45..b6de565ea1 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 73e836d13c..a6e412892f 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 506f45454e..d2f6f44c54 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 2e80468f9c..9159e957dd 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 23f79a4d0f..569df1b590 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 4ea171d7b5..f59db7967f 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 73bd081092..22484790d0 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 b3b351ee04..a0f07a8fe0 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 b7d924edb5..483ef807f3 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 9a03e4d6e1..6285edba47 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 862879f120..14ef03c1cb 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 9828e59427..9fa4d328c6 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 7988b3c383..6a22f62e03 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 c2637b240f..4b7b67c672 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 a7844fe2c0..b48528fe19 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 cbf840ee7e..716bc0d1c1 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 c631600a86..73c5ee52f6 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 643779bb84..31a3bcbb7b 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 a1a5f9b444..3a95826f81 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 a56de13a02..b8f325e3f8 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 b636516b87..48d708b634 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 da28fe455f..cfe410eccf 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 9d404fb4ed..d11ae048ef 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 f62e5c1425..48c0bc81b6 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 ad0751641a..827078d228 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 bd18d7caca..63a193490d 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 691aaa6df0..f915615fe3 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 60f1db57f2..327de5a24a 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 e2818689f5..c4c32ad443 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 29e820aca1..9544d79d76 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 403fec355c..bdbd9a4417 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 e50612e3fd..a36c87639e 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 beb3b61b55..5a327a1c83 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 cdd56157b2..39bca5eb4a 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 e19e5b6306..c352b447b2 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 e2207f52aa..b2bc838f3c 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 6d4f5838b7..58e5a44b13 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 eaa55cf47f..cc3d8a88de 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 d75d48e7e3..94d4e7f4b2 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 cb44911c6c..fd15d8ab47 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 18340931c1..4c278955fb 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 3e6a38d5af..8e811d30a3 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 dcca9989ea..5967965a5e 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 ecd466c8c2..8f69dcf714 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 3f7bdc99d3..3b355bca38 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 331fde47c9..883a2ddc48 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 8b7f1f3273..a42f0e8b2b 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 d8d613db14..b2e12d4c10 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 ec6a69d853..8ce6881927 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 ef3e355bd1..104b6a2144 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 c2a5d672ad..3c9a70ad9c 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 277e26eb89..be39640e9f 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 4ac41c5320..b4f381cedd 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 0534eadd60..08f5a66011 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 045115b9e3..2948399592 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 4d79fa6ed2..b2f4ab7e43 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 84188037f0..5900812435 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 3500e23560..38ebf85471 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 4db46b78bc..03253fa6e7 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 c34489080c..164fbd0005 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 4eea5fc3c4..dd27616522 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 bc1e24cde2..a9773ac4ad 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 1b5ecb9b27..d1c3c3be15 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 05fde07d9b..55219afb13 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 ee1bcba6eb..ccb93a04d4 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 0f81383299..cd22e2bc2f 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 dfc481f646..48dfe88a04 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 6235fadb64..0f8902ed86 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 73ab1fde1c..c6e5d6a9d4 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 f07380e0b9..f9d9e947d6 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 79ab22d0ad..822270f495 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 b66d1b5fd6..30e7f4efdd 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 604b6caa6d..beade0de0d 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 40991b930c..6db19e3e86 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 0040e5bef7..442715229c 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 98ad9ccb1f..6317c9ac0c 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 f2b2b3652d..f26690cbd4 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 077a795142..74471647d2 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 63a3344a91..bebdef1925 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 8970f6a008..3c9ca6fe5c 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 a2ef05300c..2835a284cf 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 2d421296ee..680bbea84d 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 28ca5d6aea..b0dfd8dd2f 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 bbb61be631..015f8a4120 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 d92a2ab8b4..36d785a181 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 36d785a181..09ad317777 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 9e2ebc85ff..7f0c70e371 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 60193e38a0..5c1425460d 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 64ea3c9536..4d5de824cf 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 5c1425460d..619239c64d 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 58dcbe3db5..a7cedac934 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 beade0de0d..bc33736157 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 f7068288fd..e4cebd1f01 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 ecad7aebf9..38bc11396e 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 fefb689f0a..d32fef2c56 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 dacfe065aa..a632fb99bd 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 38d7f86b0f..406f9adecb 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 4d5de824cf..64ea3c9536 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 99179220a9..f433c1fba9 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 a424a2052d..0077fa69be 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 0000000000..1b58d6c2b3 --- /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 0000000000..96c967a08e --- /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 88a8d08bbe..10af0eebb9 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 e3b4a76c90..6939299dfd 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 bc33736157..f933348407 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 bdccdd47ee..2482e5187c 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 a29ad9ea94..83c638c5b3 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 651bf215f2..86404fe6c3 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 6939299dfd..40250c0c6b 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 d03a65f322..c165b45197 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 f74cf89980..12a6211015 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 9f52cf551f..4930de15f1 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 2c896e5c0d..ff0b47262c 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 015f8a4120..ce5dc6cdc9 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 a7ed9e0198..5afbb29ad5 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 42e36e063f..88fd5b039f 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 40250c0c6b..b40f3deee8 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 f933348407..5118233907 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 f26690cbd4..f4fdd29240 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 12a6211015..4cf9f6a78b 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 4930de15f1..d60fac29f7 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 7f0c70e371..0046a3d3d1 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 0046a3d3d1..b9fdf16e0b 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 0c48eee56b..b24d06b23a 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 b9fdf16e0b..f7c168ad7f 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 f7c168ad7f..50c429c533 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 67a36e1cee..6769ed2889 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 887bb1ec2a..277c3473c7 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 4388128e92..28adc6c4d8 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