refactor(editor): replace icons with blocksuite/icons (#10655)

This commit is contained in:
L-Sun
2025-03-07 02:50:26 +00:00
parent 750c8a44dc
commit 490a191a11
2 changed files with 42 additions and 46 deletions
@@ -1,12 +1,6 @@
import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment';
import type { DataViewBlockComponent } from '@blocksuite/affine-block-data-view';
import { insertDatabaseBlockCommand } from '@blocksuite/affine-block-database';
import {
FigmaIcon,
GithubIcon,
LoomIcon,
YoutubeIcon,
} from '@blocksuite/affine-block-embed';
import { insertImagesCommand } from '@blocksuite/affine-block-image';
import { insertLatexBlockCommand } from '@blocksuite/affine-block-latex';
import { focusBlockEnd } from '@blocksuite/affine-block-note';
@@ -14,23 +8,6 @@ import { getSurfaceBlock } from '@blocksuite/affine-block-surface';
import { insertSurfaceRefBlockCommand } from '@blocksuite/affine-block-surface-ref';
import { insertTableBlockCommand } from '@blocksuite/affine-block-table';
import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-card-modal';
import {
ArrowDownBigIcon,
ArrowUpBigIcon,
CopyIcon,
DatabaseKanbanViewIcon20,
DatabaseTableViewIcon20,
DeleteIcon,
FileIcon,
HeadingIcon,
LinkedDocIcon,
LinkIcon,
NewDocIcon,
NowIcon,
TodayIcon,
TomorrowIcon,
YesterdayIcon,
} from '@blocksuite/affine-components/icons';
import {
getInlineEditorByModel,
insertContent,
@@ -60,14 +37,33 @@ import {
} from '@blocksuite/affine-shared/utils';
import { viewPresets } from '@blocksuite/data-view/view-presets';
import {
ArrowDownBigIcon,
ArrowUpBigIcon,
CopyIcon,
DatabaseKanbanViewIcon,
DatabaseTableViewIcon,
DeleteIcon,
DualLinkIcon,
ExportToPdfIcon,
FigmaDuotoneIcon,
FileIcon,
FontIcon,
FrameIcon,
GithubDuotoneIcon,
GroupingIcon,
HeadingsIcon,
ImageIcon,
LinkedPageIcon,
LinkIcon,
LoomLogoDuotoneIcon,
NowIcon,
PlusIcon,
TableIcon,
TeXIcon,
TodayIcon,
TomorrowIcon,
YesterdayIcon,
YoutubeDuotoneIcon,
} from '@blocksuite/icons/lit';
import type { DeltaInsert } from '@blocksuite/inline';
import { Slice, Text } from '@blocksuite/store';
@@ -103,7 +99,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
.map(config => createConversionItem(config, `0_Basic@${index++}`)),
{
name: 'Other Headings',
icon: HeadingIcon,
icon: HeadingsIcon(),
group: `0_Basic@${index++}`,
subMenu: textConversionConfigs
.filter(i => i.type && ['h4', 'h5', 'h6'].includes(i.type))
@@ -193,7 +189,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{
name: 'New Doc',
description: 'Start a new document.',
icon: NewDocIcon,
icon: PlusIcon(),
tooltip: slashMenuToolTips['New Doc'],
group: `3_Page@${index++}`,
when: ({ model }) =>
@@ -211,7 +207,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{
name: 'Linked Doc',
description: 'Link to another document.',
icon: LinkedDocIcon,
icon: LinkedPageIcon(),
tooltip: slashMenuToolTips['Linked Doc'],
searchAlias: ['dual link'],
group: `3_Page@${index++}`,
@@ -299,7 +295,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{
name: 'Link',
description: 'Add a bookmark for reference.',
icon: LinkIcon,
icon: LinkIcon(),
tooltip: slashMenuToolTips['Link'],
group: `4_Content & Media@${index++}`,
when: ({ model }) =>
@@ -326,7 +322,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{
name: 'Attachment',
description: 'Attach a file to document.',
icon: FileIcon,
icon: FileIcon(),
tooltip: slashMenuToolTips['Attachment'],
searchAlias: ['file'],
group: `4_Content & Media@${index++}`,
@@ -350,7 +346,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{
name: 'PDF',
description: 'Upload a PDF to document.',
icon: ExportToPdfIcon({ width: '20', height: '20' }),
icon: ExportToPdfIcon(),
tooltip: slashMenuToolTips['PDF'],
group: `4_Content & Media@${index++}`,
when: ({ model }) =>
@@ -377,7 +373,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{
name: 'YouTube',
description: 'Embed a YouTube video.',
icon: YoutubeIcon,
icon: YoutubeDuotoneIcon(),
tooltip: slashMenuToolTips['YouTube'],
group: `4_Content & Media@${index++}`,
when: ({ model }) =>
@@ -403,7 +399,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{
name: 'GitHub',
description: 'Link to a GitHub repository.',
icon: GithubIcon,
icon: GithubDuotoneIcon(),
tooltip: slashMenuToolTips['Github'],
group: `4_Content & Media@${index++}`,
when: ({ model }) =>
@@ -431,7 +427,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{
name: 'Figma',
description: 'Embed a Figma document.',
icon: FigmaIcon,
icon: FigmaDuotoneIcon(),
tooltip: slashMenuToolTips['Figma'],
group: `4_Content & Media@${index++}`,
when: ({ model }) =>
@@ -457,7 +453,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{
name: 'Loom',
icon: LoomIcon,
icon: LoomLogoDuotoneIcon(),
group: `4_Content & Media@${index++}`,
when: ({ model }) =>
model.doc.schema.flavourSchemaMap.has('affine:embed-loom'),
@@ -564,7 +560,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
return [
{
name: 'Today',
icon: TodayIcon,
icon: TodayIcon(),
tooltip: slashMenuToolTips['Today'],
description: formatDate(now),
group: `6_Date@${index++}`,
@@ -574,7 +570,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
},
{
name: 'Tomorrow',
icon: TomorrowIcon,
icon: TomorrowIcon(),
tooltip: slashMenuToolTips['Tomorrow'],
description: formatDate(tomorrow),
group: `6_Date@${index++}`,
@@ -586,7 +582,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
},
{
name: 'Yesterday',
icon: YesterdayIcon,
icon: YesterdayIcon(),
tooltip: slashMenuToolTips['Yesterday'],
description: formatDate(yesterday),
group: `6_Date@${index++}`,
@@ -598,7 +594,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
},
{
name: 'Now',
icon: NowIcon,
icon: NowIcon(),
tooltip: slashMenuToolTips['Now'],
description: formatTime(now),
group: `6_Date@${index++}`,
@@ -615,7 +611,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
name: 'Table View',
description: 'Display items in a table format.',
searchAlias: ['database'],
icon: DatabaseTableViewIcon20,
icon: DatabaseTableViewIcon(),
tooltip: slashMenuToolTips['Table View'],
group: `7_Database@${index++}`,
when: ({ model }) =>
@@ -644,7 +640,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{
name: 'Todo',
searchAlias: ['todo view'],
icon: DatabaseTableViewIcon20,
icon: DatabaseTableViewIcon(),
tooltip: slashMenuToolTips['Todo'],
group: `7_Database@${index++}`,
when: ({ model }) =>
@@ -680,7 +676,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
name: 'Kanban View',
description: 'Visualize data in a dashboard.',
searchAlias: ['database'],
icon: DatabaseKanbanViewIcon20,
icon: DatabaseKanbanViewIcon(),
tooltip: slashMenuToolTips['Kanban View'],
group: `7_Database@${index++}`,
when: ({ model }) =>
@@ -712,7 +708,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{
name: 'Move Up',
description: 'Shift this line up.',
icon: ArrowUpBigIcon,
icon: ArrowUpBigIcon(),
tooltip: slashMenuToolTips['Move Up'],
group: `8_Actions@${index++}`,
action: ({ std, model }) => {
@@ -729,7 +725,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{
name: 'Move Down',
description: 'Shift this line down.',
icon: ArrowDownBigIcon,
icon: ArrowDownBigIcon(),
tooltip: slashMenuToolTips['Move Down'],
group: `8_Actions@${index++}`,
action: ({ std, model }) => {
@@ -746,7 +742,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{
name: 'Copy',
description: 'Copy this line to clipboard.',
icon: CopyIcon,
icon: CopyIcon(),
tooltip: slashMenuToolTips['Copy'],
group: `8_Actions@${index++}`,
action: ({ std, model }) => {
@@ -804,7 +800,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
name: 'Delete',
description: 'Remove this line permanently.',
searchAlias: ['remove'],
icon: DeleteIcon,
icon: DeleteIcon(),
tooltip: slashMenuToolTips['Delete'],
group: `8_Actions@${index++}`,
action: ({ std, model }) => {
@@ -1,4 +1,3 @@
import { ArrowDownIcon } from '@blocksuite/affine-components/icons';
import { createLitPortal } from '@blocksuite/affine-components/portal';
import type { AffineInlineEditor } from '@blocksuite/affine-components/rich-text';
import {
@@ -15,6 +14,7 @@ import {
substringMatchScore,
} from '@blocksuite/affine-shared/utils';
import { WithDisposable } from '@blocksuite/global/lit';
import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
import { autoPlacement, offset } from '@floating-ui/dom';
import { html, LitElement, nothing, type PropertyValues } from 'lit';
import { property, state } from 'lit/decorators.js';
@@ -445,7 +445,7 @@ export class InnerSlashMenu extends WithDisposable(LitElement) {
>
${icon && html`<div class="slash-menu-item-icon">${icon}</div>`}
<div slot="suffix" style="transform: rotate(-90deg);">
${ArrowDownIcon}
${ArrowDownSmallIcon()}
</div>
</icon-button>`;
};