luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

84
blocksuite/affine/widget-slash-menu/src/config.ts
View File

@@ -1,12 +1,6 @@
import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment'; import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment';
import type { DataViewBlockComponent } from '@blocksuite/affine-block-data-view'; import type { DataViewBlockComponent } from '@blocksuite/affine-block-data-view';
import { insertDatabaseBlockCommand } from '@blocksuite/affine-block-database'; 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 { insertImagesCommand } from '@blocksuite/affine-block-image';
import { insertLatexBlockCommand } from '@blocksuite/affine-block-latex'; import { insertLatexBlockCommand } from '@blocksuite/affine-block-latex';
import { focusBlockEnd } from '@blocksuite/affine-block-note'; 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 { insertSurfaceRefBlockCommand } from '@blocksuite/affine-block-surface-ref';
import { insertTableBlockCommand } from '@blocksuite/affine-block-table'; import { insertTableBlockCommand } from '@blocksuite/affine-block-table';
import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-card-modal'; 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 { import {
getInlineEditorByModel, getInlineEditorByModel,
insertContent, insertContent,
@@ -60,14 +37,33 @@ import {
} from '@blocksuite/affine-shared/utils'; } from '@blocksuite/affine-shared/utils';
import { viewPresets } from '@blocksuite/data-view/view-presets'; import { viewPresets } from '@blocksuite/data-view/view-presets';
import { import {
ArrowDownBigIcon,
ArrowUpBigIcon,
CopyIcon,
DatabaseKanbanViewIcon,
DatabaseTableViewIcon,
DeleteIcon,
DualLinkIcon, DualLinkIcon,
ExportToPdfIcon, ExportToPdfIcon,
FigmaDuotoneIcon,
FileIcon,
FontIcon, FontIcon,
FrameIcon, FrameIcon,
GithubDuotoneIcon,
GroupingIcon, GroupingIcon,
HeadingsIcon,
ImageIcon, ImageIcon,
LinkedPageIcon,
LinkIcon,
LoomLogoDuotoneIcon,
NowIcon,
PlusIcon,
TableIcon, TableIcon,
TeXIcon, TeXIcon,
TodayIcon,
TomorrowIcon,
YesterdayIcon,
YoutubeDuotoneIcon,
} from '@blocksuite/icons/lit'; } from '@blocksuite/icons/lit';
import type { DeltaInsert } from '@blocksuite/inline'; import type { DeltaInsert } from '@blocksuite/inline';
import { Slice, Text } from '@blocksuite/store'; import { Slice, Text } from '@blocksuite/store';
@@ -103,7 +99,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
.map(config => createConversionItem(config, `0_Basic@${index++}`)), .map(config => createConversionItem(config, `0_Basic@${index++}`)),
{ {
name: 'Other Headings', name: 'Other Headings',
icon: HeadingIcon, icon: HeadingsIcon(),
group: `0_Basic@${index++}`, group: `0_Basic@${index++}`,
subMenu: textConversionConfigs subMenu: textConversionConfigs
.filter(i => i.type && ['h4', 'h5', 'h6'].includes(i.type)) .filter(i => i.type && ['h4', 'h5', 'h6'].includes(i.type))
@@ -193,7 +189,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{ {
name: 'New Doc', name: 'New Doc',
description: 'Start a new document.', description: 'Start a new document.',
icon: NewDocIcon, icon: PlusIcon(),
tooltip: slashMenuToolTips['New Doc'], tooltip: slashMenuToolTips['New Doc'],
group: `3_Page@${index++}`, group: `3_Page@${index++}`,
when: ({ model }) => when: ({ model }) =>
@@ -211,7 +207,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{ {
name: 'Linked Doc', name: 'Linked Doc',
description: 'Link to another document.', description: 'Link to another document.',
icon: LinkedDocIcon, icon: LinkedPageIcon(),
tooltip: slashMenuToolTips['Linked Doc'], tooltip: slashMenuToolTips['Linked Doc'],
searchAlias: ['dual link'], searchAlias: ['dual link'],
group: `3_Page@${index++}`, group: `3_Page@${index++}`,
@@ -299,7 +295,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{ {
name: 'Link', name: 'Link',
description: 'Add a bookmark for reference.', description: 'Add a bookmark for reference.',
icon: LinkIcon, icon: LinkIcon(),
tooltip: slashMenuToolTips['Link'], tooltip: slashMenuToolTips['Link'],
group: `4_Content & Media@${index++}`, group: `4_Content & Media@${index++}`,
when: ({ model }) => when: ({ model }) =>
@@ -326,7 +322,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{ {
name: 'Attachment', name: 'Attachment',
description: 'Attach a file to document.', description: 'Attach a file to document.',
icon: FileIcon, icon: FileIcon(),
tooltip: slashMenuToolTips['Attachment'], tooltip: slashMenuToolTips['Attachment'],
searchAlias: ['file'], searchAlias: ['file'],
group: `4_Content & Media@${index++}`, group: `4_Content & Media@${index++}`,
@@ -350,7 +346,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{ {
name: 'PDF', name: 'PDF',
description: 'Upload a PDF to document.', description: 'Upload a PDF to document.',
icon: ExportToPdfIcon({ width: '20', height: '20' }), icon: ExportToPdfIcon(),
tooltip: slashMenuToolTips['PDF'], tooltip: slashMenuToolTips['PDF'],
group: `4_Content & Media@${index++}`, group: `4_Content & Media@${index++}`,
when: ({ model }) => when: ({ model }) =>
@@ -377,7 +373,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{ {
name: 'YouTube', name: 'YouTube',
description: 'Embed a YouTube video.', description: 'Embed a YouTube video.',
icon: YoutubeIcon, icon: YoutubeDuotoneIcon(),
tooltip: slashMenuToolTips['YouTube'], tooltip: slashMenuToolTips['YouTube'],
group: `4_Content & Media@${index++}`, group: `4_Content & Media@${index++}`,
when: ({ model }) => when: ({ model }) =>
@@ -403,7 +399,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{ {
name: 'GitHub', name: 'GitHub',
description: 'Link to a GitHub repository.', description: 'Link to a GitHub repository.',
icon: GithubIcon, icon: GithubDuotoneIcon(),
tooltip: slashMenuToolTips['Github'], tooltip: slashMenuToolTips['Github'],
group: `4_Content & Media@${index++}`, group: `4_Content & Media@${index++}`,
when: ({ model }) => when: ({ model }) =>
@@ -431,7 +427,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{ {
name: 'Figma', name: 'Figma',
description: 'Embed a Figma document.', description: 'Embed a Figma document.',
icon: FigmaIcon, icon: FigmaDuotoneIcon(),
tooltip: slashMenuToolTips['Figma'], tooltip: slashMenuToolTips['Figma'],
group: `4_Content & Media@${index++}`, group: `4_Content & Media@${index++}`,
when: ({ model }) => when: ({ model }) =>
@@ -457,7 +453,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{ {
name: 'Loom', name: 'Loom',
icon: LoomIcon, icon: LoomLogoDuotoneIcon(),
group: `4_Content & Media@${index++}`, group: `4_Content & Media@${index++}`,
when: ({ model }) => when: ({ model }) =>
model.doc.schema.flavourSchemaMap.has('affine:embed-loom'), model.doc.schema.flavourSchemaMap.has('affine:embed-loom'),
@@ -564,7 +560,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
return [ return [
{ {
name: 'Today', name: 'Today',
icon: TodayIcon, icon: TodayIcon(),
tooltip: slashMenuToolTips['Today'], tooltip: slashMenuToolTips['Today'],
description: formatDate(now), description: formatDate(now),
group: `6_Date@${index++}`, group: `6_Date@${index++}`,
@@ -574,7 +570,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
}, },
{ {
name: 'Tomorrow', name: 'Tomorrow',
icon: TomorrowIcon, icon: TomorrowIcon(),
tooltip: slashMenuToolTips['Tomorrow'], tooltip: slashMenuToolTips['Tomorrow'],
description: formatDate(tomorrow), description: formatDate(tomorrow),
group: `6_Date@${index++}`, group: `6_Date@${index++}`,
@@ -586,7 +582,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
}, },
{ {
name: 'Yesterday', name: 'Yesterday',
icon: YesterdayIcon, icon: YesterdayIcon(),
tooltip: slashMenuToolTips['Yesterday'], tooltip: slashMenuToolTips['Yesterday'],
description: formatDate(yesterday), description: formatDate(yesterday),
group: `6_Date@${index++}`, group: `6_Date@${index++}`,
@@ -598,7 +594,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
}, },
{ {
name: 'Now', name: 'Now',
icon: NowIcon, icon: NowIcon(),
tooltip: slashMenuToolTips['Now'], tooltip: slashMenuToolTips['Now'],
description: formatTime(now), description: formatTime(now),
group: `6_Date@${index++}`, group: `6_Date@${index++}`,
@@ -615,7 +611,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
name: 'Table View', name: 'Table View',
description: 'Display items in a table format.', description: 'Display items in a table format.',
searchAlias: ['database'], searchAlias: ['database'],
icon: DatabaseTableViewIcon20, icon: DatabaseTableViewIcon(),
tooltip: slashMenuToolTips['Table View'], tooltip: slashMenuToolTips['Table View'],
group: `7_Database@${index++}`, group: `7_Database@${index++}`,
when: ({ model }) => when: ({ model }) =>
@@ -644,7 +640,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{ {
name: 'Todo', name: 'Todo',
searchAlias: ['todo view'], searchAlias: ['todo view'],
icon: DatabaseTableViewIcon20, icon: DatabaseTableViewIcon(),
tooltip: slashMenuToolTips['Todo'], tooltip: slashMenuToolTips['Todo'],
group: `7_Database@${index++}`, group: `7_Database@${index++}`,
when: ({ model }) => when: ({ model }) =>
@@ -680,7 +676,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
name: 'Kanban View', name: 'Kanban View',
description: 'Visualize data in a dashboard.', description: 'Visualize data in a dashboard.',
searchAlias: ['database'], searchAlias: ['database'],
icon: DatabaseKanbanViewIcon20, icon: DatabaseKanbanViewIcon(),
tooltip: slashMenuToolTips['Kanban View'], tooltip: slashMenuToolTips['Kanban View'],
group: `7_Database@${index++}`, group: `7_Database@${index++}`,
when: ({ model }) => when: ({ model }) =>
@@ -712,7 +708,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{ {
name: 'Move Up', name: 'Move Up',
description: 'Shift this line up.', description: 'Shift this line up.',
icon: ArrowUpBigIcon, icon: ArrowUpBigIcon(),
tooltip: slashMenuToolTips['Move Up'], tooltip: slashMenuToolTips['Move Up'],
group: `8_Actions@${index++}`, group: `8_Actions@${index++}`,
action: ({ std, model }) => { action: ({ std, model }) => {
@@ -729,7 +725,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{ {
name: 'Move Down', name: 'Move Down',
description: 'Shift this line down.', description: 'Shift this line down.',
icon: ArrowDownBigIcon, icon: ArrowDownBigIcon(),
tooltip: slashMenuToolTips['Move Down'], tooltip: slashMenuToolTips['Move Down'],
group: `8_Actions@${index++}`, group: `8_Actions@${index++}`,
action: ({ std, model }) => { action: ({ std, model }) => {
@@ -746,7 +742,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
{ {
name: 'Copy', name: 'Copy',
description: 'Copy this line to clipboard.', description: 'Copy this line to clipboard.',
icon: CopyIcon, icon: CopyIcon(),
tooltip: slashMenuToolTips['Copy'], tooltip: slashMenuToolTips['Copy'],
group: `8_Actions@${index++}`, group: `8_Actions@${index++}`,
action: ({ std, model }) => { action: ({ std, model }) => {
@@ -804,7 +800,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
name: 'Delete', name: 'Delete',
description: 'Remove this line permanently.', description: 'Remove this line permanently.',
searchAlias: ['remove'], searchAlias: ['remove'],
icon: DeleteIcon, icon: DeleteIcon(),
tooltip: slashMenuToolTips['Delete'], tooltip: slashMenuToolTips['Delete'],
group: `8_Actions@${index++}`, group: `8_Actions@${index++}`,
action: ({ std, model }) => { action: ({ std, model }) => {

4
blocksuite/affine/widget-slash-menu/src/slash-menu-popover.ts
View File

@@ -1,4 +1,3 @@
import { ArrowDownIcon } from '@blocksuite/affine-components/icons';
import { createLitPortal } from '@blocksuite/affine-components/portal'; import { createLitPortal } from '@blocksuite/affine-components/portal';
import type { AffineInlineEditor } from '@blocksuite/affine-components/rich-text'; import type { AffineInlineEditor } from '@blocksuite/affine-components/rich-text';
import { import {
@@ -15,6 +14,7 @@ import {
substringMatchScore, substringMatchScore,
} from '@blocksuite/affine-shared/utils'; } from '@blocksuite/affine-shared/utils';
import { WithDisposable } from '@blocksuite/global/lit'; import { WithDisposable } from '@blocksuite/global/lit';
import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
import { autoPlacement, offset } from '@floating-ui/dom'; import { autoPlacement, offset } from '@floating-ui/dom';
import { html, LitElement, nothing, type PropertyValues } from 'lit'; import { html, LitElement, nothing, type PropertyValues } from 'lit';
import { property, state } from 'lit/decorators.js'; 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>`} ${icon && html`<div class="slash-menu-item-icon">${icon}</div>`}
<div slot="suffix" style="transform: rotate(-90deg);"> <div slot="suffix" style="transform: rotate(-90deg);">
${ArrowDownIcon} ${ArrowDownSmallIcon()}
</div> </div>
</icon-button>`; </icon-button>`;
}; };