From 6bdb7b48762f3f700bf3f330ffb93b9473143834 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Fri, 5 Aug 2022 18:55:30 +0800 Subject: [PATCH 01/10] chore: disable selection group plugin --- libs/components/editor-plugins/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/components/editor-plugins/src/index.ts b/libs/components/editor-plugins/src/index.ts index be7bb9bd97..ab657a9904 100644 --- a/libs/components/editor-plugins/src/index.ts +++ b/libs/components/editor-plugins/src/index.ts @@ -21,7 +21,7 @@ export const plugins: PluginCreator[] = [ CommandMenuPlugin, ReferenceMenuPlugin, TemplatePlugin, - SelectionGroupPlugin, + // SelectionGroupPlugin, AddCommentPlugin, GroupMenuPlugin, ]; From 407ee4d8f0ca544580e407e76007410f1ea82725 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Fri, 5 Aug 2022 18:56:25 +0800 Subject: [PATCH 02/10] feat: add kanban card mask --- .../blocks/group/scene-kanban/CardItem.tsx | 63 ++++++++++++++++--- 1 file changed, 53 insertions(+), 10 deletions(-) diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx index 76220d7ff0..eba13f0db6 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx @@ -4,8 +4,14 @@ import { useKanban, useRefPage, } from '@toeverything/components/editor-core'; -import { styled } from '@toeverything/components/ui'; +import { PenIcon } from '@toeverything/components/icons'; +import { + IconButton, + MuiClickAwayListener, + styled, +} from '@toeverything/components/ui'; import { useFlag } from '@toeverything/datasource/feature-flags'; +import { useState } from 'react'; const CardContent = styled('div')({ margin: '20px', @@ -23,6 +29,7 @@ const CardActions = styled('div')({ fontWeight: '300', color: '#98ACBD', transition: 'all ease-in 0.2s', + zIndex: 1, ':hover': { background: '#F5F7F8', @@ -39,11 +46,13 @@ const PlusIcon = styled('div')({ }); const CardContainer = styled('div')({ + position: 'relative', display: 'flex', flexDirection: 'column', backgroundColor: '#fff', border: '1px solid #E2E7ED', borderRadius: '5px', + overflow: 'hidden', [CardActions.toString()]: { opacity: '0', @@ -55,6 +64,23 @@ const CardContainer = styled('div')({ }, }); +const Overlay = styled('div')({ + position: 'absolute', + width: '100%', + height: '100%', + background: 'transparent', + + '& > *': { + visibility: 'hidden', + position: 'absolute', + right: '24px', + top: '16px', + }, + '&:hover > *': { + visibility: 'visible', + }, +}); + export const CardItem = ({ id, block, @@ -64,8 +90,11 @@ export const CardItem = ({ }) => { const { addSubItem } = useKanban(); const { openSubPage } = useRefPage(); + const [editable, setEditable] = useState(false); const showKanbanRefPageFlag = useFlag('ShowKanbanRefPage', false); + const onAddItem = async () => { + setEditable(true); await addSubItem(block); }; @@ -74,14 +103,28 @@ export const CardItem = ({ }; return ( - - - - - - - Add a sub-block - - + setEditable(false)}> + + + + + {!editable && ( + + { + e.stopPropagation(); + setEditable(true); + }} + > + + + + )} + + + Add a sub-block + + + ); }; From dcdc7f8862e3b5435c1ebfd0d9c6688b0de1efa7 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Wed, 10 Aug 2022 17:41:13 +0800 Subject: [PATCH 03/10] refactor: ref page use AffineEditor --- .../src/blocks/group/scene-kanban/CardItem.tsx | 7 ++----- .../src/blocks/group/scene-kanban/RefPage.tsx} | 16 +++++++++++++--- libs/components/editor-core/src/index.ts | 2 +- .../editor-core/src/recast-block/Context.tsx | 3 +-- .../components/editor-core/src/ref-page/index.ts | 1 - 5 files changed, 17 insertions(+), 12 deletions(-) rename libs/components/{editor-core/src/ref-page/ModalPage.tsx => editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx} (82%) delete mode 100644 libs/components/editor-core/src/ref-page/index.ts diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx index eba13f0db6..c1cc9f9a1c 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx @@ -1,9 +1,5 @@ import type { KanbanCard } from '@toeverything/components/editor-core'; -import { - RenderBlock, - useKanban, - useRefPage, -} from '@toeverything/components/editor-core'; +import { RenderBlock, useKanban } from '@toeverything/components/editor-core'; import { PenIcon } from '@toeverything/components/icons'; import { IconButton, @@ -12,6 +8,7 @@ import { } from '@toeverything/components/ui'; import { useFlag } from '@toeverything/datasource/feature-flags'; import { useState } from 'react'; +import { useRefPage } from './RefPage'; const CardContent = styled('div')({ margin: '20px', diff --git a/libs/components/editor-core/src/ref-page/ModalPage.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx similarity index 82% rename from libs/components/editor-core/src/ref-page/ModalPage.tsx rename to libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx index 52e1d6554f..cd3588162e 100644 --- a/libs/components/editor-core/src/ref-page/ModalPage.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx @@ -1,7 +1,8 @@ +import { AffineEditor } from '@toeverything/components/affine-editor'; +import { useEditor } from '@toeverything/components/editor-core'; import { MuiBackdrop, styled, useTheme } from '@toeverything/components/ui'; import { createContext, ReactNode, useContext, useState } from 'react'; import { createPortal } from 'react-dom'; -import { RenderBlock } from '../render-block'; const Dialog = styled('div')({ flex: 1, @@ -30,7 +31,7 @@ const Modal = ({ open, children }: { open: boolean; children?: ReactNode }) => { onClick={closeSubPage} > { + onClick={(e: { stopPropagation: () => void }) => { e.stopPropagation(); }} > @@ -43,9 +44,18 @@ const Modal = ({ open, children }: { open: boolean; children?: ReactNode }) => { }; const ModalPage = ({ blockId }: { blockId: string | null }) => { + const { editor } = useEditor(); + return ( - {blockId && } + {blockId && ( + + )} ); }; diff --git a/libs/components/editor-core/src/index.ts b/libs/components/editor-core/src/index.ts index bea2fed3a0..d28d8e96b3 100644 --- a/libs/components/editor-core/src/index.ts +++ b/libs/components/editor-core/src/index.ts @@ -16,4 +16,4 @@ export * from './utils'; export * from './editor'; -export { RefPageProvider, useRefPage } from './ref-page'; +export { useEditor } from './Contexts'; diff --git a/libs/components/editor-core/src/recast-block/Context.tsx b/libs/components/editor-core/src/recast-block/Context.tsx index 47ec6cfcdb..4236ede55a 100644 --- a/libs/components/editor-core/src/recast-block/Context.tsx +++ b/libs/components/editor-core/src/recast-block/Context.tsx @@ -2,7 +2,6 @@ import { Protocol } from '@toeverything/datasource/db-service'; import { AsyncBlock } from '../editor'; import { ComponentType, createContext, ReactNode, useContext } from 'react'; import { RecastBlock } from './types'; -import { RefPageProvider } from '../ref-page'; /** * Determine whether the block supports RecastBlock @@ -48,7 +47,7 @@ export const RecastBlockProvider = ({ return ( - {children} + {children} ); }; diff --git a/libs/components/editor-core/src/ref-page/index.ts b/libs/components/editor-core/src/ref-page/index.ts deleted file mode 100644 index 4b06310a5c..0000000000 --- a/libs/components/editor-core/src/ref-page/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { useRefPage, RefPageProvider } from './ModalPage'; From 4a99080860d15515345060483e59593b94632162 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Fri, 12 Aug 2022 13:52:54 +0800 Subject: [PATCH 04/10] chore: set kanban RefPageProvider --- .../blocks/group/scene-kanban/SceneKanban.tsx | 39 ++++++++++--------- 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/SceneKanban.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/SceneKanban.tsx index 27d5543177..73424708a7 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/SceneKanban.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/SceneKanban.tsx @@ -4,30 +4,33 @@ import { SceneKanbanContext } from './context'; import { CardContainerWrapper } from './dndable/wrapper/CardContainerWrapper'; import type { ComponentType } from 'react'; import type { CreateView } from '@toeverything/framework/virgo'; +import { RefPageProvider } from './RefPage'; export const SceneKanban: ComponentType = withKanban( ({ editor, block }) => { const { kanban } = useKanban(); return ( - - ( - - )} - /> - + + + ( + + )} + /> + + ); } ); From d300b039ad0f3e1fc7c5c227e44fb73ff4d88949 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Wed, 17 Aug 2022 19:07:55 +0800 Subject: [PATCH 05/10] fix: renaming to edgeless --- .../editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx index cd3588162e..b3353001b0 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx @@ -53,7 +53,7 @@ const ModalPage = ({ blockId }: { blockId: string | null }) => { workspace={editor.workspace} rootBlockId={blockId} scrollBlank={false} - isWhiteboard + isEdgeless /> )} From 05361e75a405745e4a3f5c5328e9917ee47c6345 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Wed, 17 Aug 2022 19:08:16 +0800 Subject: [PATCH 06/10] fix: add pen background --- .../src/blocks/group/scene-kanban/CardItem.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx index c1cc9f9a1c..c98efdf0f5 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx @@ -1,5 +1,9 @@ -import type { KanbanCard } from '@toeverything/components/editor-core'; -import { RenderBlock, useKanban } from '@toeverything/components/editor-core'; +import { + KanbanCard, + RenderBlock, + useEditor, + useKanban, +} from '@toeverything/components/editor-core'; import { PenIcon } from '@toeverything/components/icons'; import { IconButton, @@ -89,6 +93,7 @@ export const CardItem = ({ const { openSubPage } = useRefPage(); const [editable, setEditable] = useState(false); const showKanbanRefPageFlag = useFlag('ShowKanbanRefPage', false); + const { editor } = useEditor(); const onAddItem = async () => { setEditable(true); @@ -108,9 +113,13 @@ export const CardItem = ({ {!editable && ( { e.stopPropagation(); setEditable(true); + editor.selectionManager.activeNodeByNodeId( + block.id + ); }} > From 06d442a8c18a773920ef10f4dfb8aa487d45f2a0 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Thu, 18 Aug 2022 17:09:28 +0800 Subject: [PATCH 07/10] refactor: clean anti pattern editor element --- .../src/blocks/embed-link/EmbedLinkView.tsx | 7 +++---- .../src/components/source-view/BlockView.tsx | 8 ++++---- .../src/components/source-view/SourceView.tsx | 17 ++++------------- .../editor-core/src/editor/views/base-view.ts | 1 - .../src/render-block/RenderBlock.tsx | 3 +-- 5 files changed, 12 insertions(+), 24 deletions(-) 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 86881478ff..86b43908d1 100644 --- a/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx +++ b/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx @@ -1,12 +1,12 @@ -import { useState } from 'react'; -import { CreateView } from '@toeverything/framework/virgo'; import { BlockPendantProvider, useOnSelect, } from '@toeverything/components/editor-core'; -import { Upload } from '../../components/upload/upload'; +import { CreateView } from '@toeverything/framework/virgo'; +import { useState } from 'react'; import { SourceView } from '../../components/source-view'; import { LinkContainer } from '../../components/style-container'; +import { Upload } from '../../components/upload/upload'; const MESSAGES = { ADD_EMBED_LINK: 'Add embed link', @@ -38,7 +38,6 @@ export const EmbedLinkView = (props: EmbedLinkView) => { {embedLinkUrl ? ( { type BlockPreviewProps = { block: AsyncBlock; blockId: string; - editorElement?: () => JSX.Element; }; const InternalBlockPreview = (props: BlockPreviewProps) => { const container = useRef(); const [preview, setPreview] = useState(true); const title = useBlockTitle(props.block, props.blockId); + const { editorElement } = useEditor(); - const AffineEditor = props.editorElement as any; + const AffineEditor = editorElement as any; useEffect(() => { if (container?.current) { diff --git a/libs/components/editor-blocks/src/components/source-view/SourceView.tsx b/libs/components/editor-blocks/src/components/source-view/SourceView.tsx index b03189d7d4..27d19433bf 100644 --- a/libs/components/editor-blocks/src/components/source-view/SourceView.tsx +++ b/libs/components/editor-blocks/src/components/source-view/SourceView.tsx @@ -1,17 +1,15 @@ import { AsyncBlock, useCurrentView, - useLazyIframe, } from '@toeverything/components/editor-core'; import { styled } from '@toeverything/components/ui'; -import { ReactElement, ReactNode, useEffect, useRef, useState } from 'react'; +import { ReactNode, useEffect, useRef, useState } from 'react'; import { SCENE_CONFIG } from '../../blocks/group/config'; import { BlockPreview } from './BlockView'; import { formatUrl } from './format-url'; export interface Props { block: AsyncBlock; - editorElement?: () => JSX.Element; viewType?: string; link: string; // onResizeEnd: (data: any) => void; @@ -150,7 +148,7 @@ const LoadingContiner = () => { }; export const SourceView = (props: Props) => { - const { link, isSelected, block, editorElement } = props; + const { link, isSelected, block } = props; const src = formatUrl(link); // let iframeShow = useLazyIframe(src, 3000, iframeContainer); const [currentView] = useCurrentView(); @@ -161,10 +159,7 @@ export const SourceView = (props: Props) => { - + ); @@ -175,11 +170,7 @@ export const SourceView = (props: Props) => { style={{ padding: '0' }} scene={type} > - + ); } diff --git a/libs/components/editor-core/src/editor/views/base-view.ts b/libs/components/editor-core/src/editor/views/base-view.ts index b69cdd848a..eb5c293243 100644 --- a/libs/components/editor-core/src/editor/views/base-view.ts +++ b/libs/components/editor-core/src/editor/views/base-view.ts @@ -18,7 +18,6 @@ import { SelectBlock } from '../selection'; export interface CreateView { block: AsyncBlock; editor: Editor; - editorElement: () => JSX.Element; /** * @deprecated Use recast table instead */ diff --git a/libs/components/editor-core/src/render-block/RenderBlock.tsx b/libs/components/editor-core/src/render-block/RenderBlock.tsx index 0627aba95b..0a1531a709 100644 --- a/libs/components/editor-core/src/render-block/RenderBlock.tsx +++ b/libs/components/editor-core/src/render-block/RenderBlock.tsx @@ -13,7 +13,7 @@ export function RenderBlock({ blockId, hasContainer = true, }: RenderBlockProps) { - const { editor, editorElement } = useEditor(); + const { editor } = useEditor(); const { block } = useBlock(blockId); const setRef = useCallback( @@ -50,7 +50,6 @@ export function RenderBlock({ block={block} columns={columns.columns} columnsFromId={columns.fromId} - editorElement={editorElement} /> ); From 0d89fa10261aaeb55160f320e71b7a8821c8d95b Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Thu, 18 Aug 2022 17:11:39 +0800 Subject: [PATCH 08/10] fix: workaround circular dependency editor element --- .../editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx index b3353001b0..3d223d121d 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx @@ -1,4 +1,3 @@ -import { AffineEditor } from '@toeverything/components/affine-editor'; import { useEditor } from '@toeverything/components/editor-core'; import { MuiBackdrop, styled, useTheme } from '@toeverything/components/ui'; import { createContext, ReactNode, useContext, useState } from 'react'; @@ -44,7 +43,9 @@ const Modal = ({ open, children }: { open: boolean; children?: ReactNode }) => { }; const ModalPage = ({ blockId }: { blockId: string | null }) => { - const { editor } = useEditor(); + const { editor, editorElement } = useEditor(); + + const AffineEditor = editorElement as any; return ( @@ -53,6 +54,7 @@ const ModalPage = ({ blockId }: { blockId: string | null }) => { workspace={editor.workspace} rootBlockId={blockId} scrollBlank={false} + // use edgeless mode prevent padding and blank bottom isEdgeless /> )} From 42cc6e90420f89d5f2868accc539b0150b63eb75 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Thu, 18 Aug 2022 17:59:21 +0800 Subject: [PATCH 09/10] chore: clean card item --- .../blocks/group/scene-kanban/CardItem.tsx | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx index c98efdf0f5..837772bed2 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx @@ -11,7 +11,7 @@ import { styled, } from '@toeverything/components/ui'; import { useFlag } from '@toeverything/datasource/feature-flags'; -import { useState } from 'react'; +import { useState, type MouseEvent } from 'react'; import { useRefPage } from './RefPage'; const CardContent = styled('div')({ @@ -101,7 +101,13 @@ export const CardItem = ({ }; const onClickCard = async () => { - showKanbanRefPageFlag && openSubPage(id); + openSubPage(id); + }; + + const onClickPen = (e: MouseEvent) => { + e.stopPropagation(); + setEditable(true); + editor.selectionManager.activeNodeByNodeId(block.id); }; return ( @@ -110,18 +116,9 @@ export const CardItem = ({ - {!editable && ( + {showKanbanRefPageFlag && !editable && ( - { - e.stopPropagation(); - setEditable(true); - editor.selectionManager.activeNodeByNodeId( - block.id - ); - }} - > + From 60059ea00a1d6f6323d7514da4fab72d07962dc0 Mon Sep 17 00:00:00 2001 From: Wang Yu Date: Fri, 19 Aug 2022 14:17:46 +0800 Subject: [PATCH 10/10] fix: remove unused executor svgOptimize (#296) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 王昱 --- tools/executors/svgOptimize/executor.json | 9 -- tools/executors/svgOptimize/package.json | 3 - tools/executors/svgOptimize/schema.json | 11 -- tools/executors/svgOptimize/svgo.js | 133 ---------------------- 4 files changed, 156 deletions(-) delete mode 100644 tools/executors/svgOptimize/executor.json delete mode 100644 tools/executors/svgOptimize/package.json delete mode 100644 tools/executors/svgOptimize/schema.json delete mode 100644 tools/executors/svgOptimize/svgo.js diff --git a/tools/executors/svgOptimize/executor.json b/tools/executors/svgOptimize/executor.json deleted file mode 100644 index 1c19a2f9c5..0000000000 --- a/tools/executors/svgOptimize/executor.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "executors": { - "svgOptimize": { - "implementation": "./svgo.js", - "schema": "./schema.json", - "description": "Run `svgo` (to optimize svg)." - } - } -} diff --git a/tools/executors/svgOptimize/package.json b/tools/executors/svgOptimize/package.json deleted file mode 100644 index 721ff1df5d..0000000000 --- a/tools/executors/svgOptimize/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "executors": "./executor.json" -} diff --git a/tools/executors/svgOptimize/schema.json b/tools/executors/svgOptimize/schema.json deleted file mode 100644 index dc2fdc029b..0000000000 --- a/tools/executors/svgOptimize/schema.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "$schema": "http://json-schema.org/schema", - "type": "object", - "cli": "nx", - "properties": { - "svgOptimize": { - "type": "string", - "description": "optimize svg" - } - } -} diff --git a/tools/executors/svgOptimize/svgo.js b/tools/executors/svgOptimize/svgo.js deleted file mode 100644 index a0f6c21539..0000000000 --- a/tools/executors/svgOptimize/svgo.js +++ /dev/null @@ -1,133 +0,0 @@ -const path = require('path'); -const svgo = require('svgo'); -const { readdir, readFile, writeFile, exists } = require('fs/promises'); -const { pascalCase, paramCase } = require('change-case'); -const svgr = require('@svgr/core'); - -async function optimizeSvg(folder) { - try { - const icons = await readdir(folder); - const generateIcons = icons - .filter(n => n.endsWith('.svg')) - .map(async icon => { - let originSvg; - try { - originSvg = await readFile(path.resolve(folder, icon)); - } catch (err) { - console.error(err); - } - let optimizedSvg; - try { - const data = optimize(originSvg); - optimizedSvg = data.data; - } catch (err) { - console.error(err); - } - - const JSXContent = await getJSXContent( - pascalCase(icon), - optimizedSvg - ); - - const iconName = path.basename(icon, '.svg'); - await writeFile( - path.resolve(folder, `${iconName}.tsx`), - JSXContent, - { encoding: 'utf8', flag: '' } - ); - - console.log('Generated:', iconName); - }); - - await Promise.allSettled([ - ...generateIcons, - generateImportEntry(icons, folder), - ]); - } catch (err) { - console.error(err); - } -} - -function optimize(input) { - return svgo.optimize(input, { - plugins: [ - 'preset-default', - 'prefixIds', - { - name: 'sortAttrs', - params: { - xmlnsOrder: 'alphabetical', - }, - }, - ], - }); -} - -/** - * get icon component template - * - * @param {string} name - */ -async function getJSXContent(name, svgCode) { - let svgrContent = ''; - try { - svgrContent = await svgr.transform( - svgCode, - { - icon: true, - typescript: true, - }, - { componentName: `${name}Icon1` } - ); - } catch (err) { - console.error(err); - } - let matcher = svgrContent.match(/]+)>([\s\S]*?)<\/svg>/); - return ` -import { SvgIcon, SvgIconProps } from '@mui/material'; -export const ${name}Icon = (props: SvgIconProps) => ( - - ${matcher[2]} - -); -`; -} - -async function generateImportEntry(iconNodes, folder) { - const fileWithImportsPath = path.resolve(folder, 'index.ts'); - - const importsContent = iconNodes - .map(iconNode => { - const iconName = paramCase(iconNode.name); - if (!iconName) { - return `// Error: ${iconNode.name}`; - } - - return `export * from './${iconName}/${iconName}';`; - }) - .join('\n'); - - await fs.writeFile( - fileWithImportsPath, - `export const timestamp = ${Date.now()};\n${importsContent}`, - { encoding: 'utf8' } - ); -} - -/** - * @param {*} options - * @param {array} options.assets - * @param {string} options.assets.folder - * @param {*} context - * @returns - */ -exports['default'] = async function svgo(options, context) { - const libRoot = context.workspace.projects[context.projectName].root; - await Promise.allSettled( - (options.assets || []).map(async (asset, index) => { - await optimizeSvg(path.resolve(libRoot, asset.folder)); - }) - ); - - return { success: true }; -};