diff --git a/blocksuite/affine/block-note/package.json b/blocksuite/affine/block-note/package.json index 29999d9cc..13c3bf967 100644 --- a/blocksuite/affine/block-note/package.json +++ b/blocksuite/affine/block-note/package.json @@ -20,6 +20,7 @@ "@blocksuite/affine-model": "workspace:*", "@blocksuite/affine-rich-text": "workspace:*", "@blocksuite/affine-shared": "workspace:*", + "@blocksuite/affine-widget-slash-menu": "workspace:*", "@blocksuite/block-std": "workspace:*", "@blocksuite/global": "workspace:*", "@blocksuite/icons": "^2.2.1", diff --git a/blocksuite/affine/block-note/src/configs/slash-menu.ts b/blocksuite/affine/block-note/src/configs/slash-menu.ts new file mode 100644 index 000000000..4e8d5ec7f --- /dev/null +++ b/blocksuite/affine/block-note/src/configs/slash-menu.ts @@ -0,0 +1,119 @@ +import { + formatBlockCommand, + type TextConversionConfig, + textConversionConfigs, + type TextFormatConfig, + textFormatConfigs, +} from '@blocksuite/affine-rich-text'; +import { isInsideBlockByFlavour } from '@blocksuite/affine-shared/utils'; +import { + type SlashMenuActionItem, + type SlashMenuConfig, + SlashMenuConfigExtension, + type SlashMenuItem, +} from '@blocksuite/affine-widget-slash-menu'; +import { BlockSelection } from '@blocksuite/block-std'; +import { HeadingsIcon } from '@blocksuite/icons/lit'; + +import { updateBlockType } from '../commands'; +import { tooltips } from './tooltips'; + +let basicIndex = 0; +const noteSlashMenuConfig: SlashMenuConfig = { + items: [ + ...textConversionConfigs + .filter(i => i.type && ['h1', 'h2', 'h3', 'text'].includes(i.type)) + .map(config => createConversionItem(config, `0_Basic@${basicIndex++}`)), + { + name: 'Other Headings', + icon: HeadingsIcon(), + group: `0_Basic@${basicIndex++}`, + subMenu: textConversionConfigs + .filter(i => i.type && ['h4', 'h5', 'h6'].includes(i.type)) + .map(config => createConversionItem(config)), + }, + ...textConversionConfigs + .filter(i => i.flavour === 'affine:code') + .map(config => createConversionItem(config, `0_Basic@${basicIndex++}`)), + + ...textConversionConfigs + .filter(i => i.type && ['divider', 'quote'].includes(i.type)) + .map( + config => + ({ + ...createConversionItem(config, `0_Basic@${basicIndex++}`), + when: ({ model }) => + model.doc.schema.flavourSchemaMap.has(config.flavour) && + !isInsideBlockByFlavour(model.doc, model, 'affine:edgeless-text'), + }) satisfies SlashMenuActionItem + ), + + ...textConversionConfigs + .filter(i => i.flavour === 'affine:list') + .map((config, index) => + createConversionItem(config, `1_List@${index++}`) + ), + + ...textFormatConfigs + .filter(i => !['Code', 'Link'].includes(i.name)) + .map((config, index) => + createTextFormatItem(config, `2_Style@${index++}`) + ), + ], +}; + +function createConversionItem( + config: TextConversionConfig, + group?: SlashMenuItem['group'] +): SlashMenuActionItem { + const { name, description, icon, flavour, type } = config; + return { + name, + group, + description, + icon, + tooltip: tooltips[name], + when: ({ model }) => model.doc.schema.flavourSchemaMap.has(flavour), + action: ({ std }) => { + std.command.exec(updateBlockType, { + flavour, + props: { type }, + }); + }, + }; +} + +function createTextFormatItem( + config: TextFormatConfig, + group?: SlashMenuItem['group'] +): SlashMenuActionItem { + const { name, icon, id, action } = config; + return { + name, + icon, + group, + tooltip: tooltips[name], + action: ({ std, model }) => { + const { host } = std; + + if (model.text?.length !== 0) { + std.command.exec(formatBlockCommand, { + blockSelections: [ + std.selection.create(BlockSelection, { + blockId: model.id, + }), + ], + styles: { [id]: true }, + }); + } else { + // like format bar when the line is empty + action(host); + } + }, + }; +} + +export const NoteSlashMenuConfigExtension = SlashMenuConfigExtension( + 'affine:note', + noteSlashMenuConfig +); diff --git a/blocksuite/affine/block-note/src/configs/tooltips.ts b/blocksuite/affine/block-note/src/configs/tooltips.ts new file mode 100644 index 000000000..1cf9b6788 --- /dev/null +++ b/blocksuite/affine/block-note/src/configs/tooltips.ts @@ -0,0 +1,310 @@ +import type { SlashMenuTooltip } from '@blocksuite/affine-widget-slash-menu'; +import { html } from 'lit'; +// prettier-ignore +const TextTooltip = html` + + + + + +In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. + + +`; + +// prettier-ignore +const Heading1Tooltip = html` + + + + + +Heading 1 +In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. + + +`; + +// prettier-ignore +const Heading2Tooltip = html` + + + + + +Heading 2 +In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. + + +`; + +// prettier-ignore +const Heading3Tooltip = html` + + + + + +Heading 3 +In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. + + +`; + +// prettier-ignore +const Heading4Tooltip = html` + + + + + +Heading 4 +In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. + + +`; + +// prettier-ignore +const Heading5Tooltip = html` + + + + + +Heading 5 +In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. + + +`; + +// prettier-ignore +const Heading6Tooltip = html` + + + + + +Heading 6 +In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. + + +`; + +// prettier-ignore +const CodeBlockTooltip = html` + + + + + + : { helloTo "World" body: { () } } +struct var=varsome\( +ContentView +View@StateView +Text +"Hello helloTo)!" + + +`; + +// prettier-ignore +const QuoteTooltip = html` + + + + + + +In a decentralized system, we can have a kaleidoscopic complexity to our data. … + + +`; + +// prettier-ignore +const DividerTooltip = html` + + + + + +In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. + + + +`; + +// prettier-ignore +const BulletedListTooltip = html` + + + + + + +Here's an example of a bulleted list. + +You can list your plans such as this + + +`; + +// prettier-ignore +const NumberedListTooltip = html` + + + + + + +1. + +Here's an example of a numbered list. + +2. + +You can list your plans such as this + + + + + + + + + + +`; + +// prettier-ignore +export const BoldTextTooltip = html` + + + + + +Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. +In a decentralized system, we can have a kaleidoscopic complexity to our data. + + +`; + +// prettier-ignore +export const ItalicTooltip = html` + + + + + +Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. +In a decentralized system, we can have a kaleidoscopic complexity to our data. + + +`; + +// prettier-ignore +export const StrikethroughTooltip = html` + + + + + +Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. +In a decentralized system, we can have a kaleidoscopic complexity to our data. + + +`; + +// prettier-ignore +export const UnderlineTooltip = html` + + + + + +Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. +In a decentralized system, we can have a kaleidoscopic complexity to our data. + + +`; + +export const tooltips: Record = { + Text: { + figure: TextTooltip, + caption: 'Text', + }, + + 'Heading 1': { + figure: Heading1Tooltip, + caption: 'Heading #1', + }, + + 'Heading 2': { + figure: Heading2Tooltip, + caption: 'Heading #2', + }, + + 'Heading 3': { + figure: Heading3Tooltip, + caption: 'Heading #3', + }, + + 'Heading 4': { + figure: Heading4Tooltip, + caption: 'Heading #4', + }, + + 'Heading 5': { + figure: Heading5Tooltip, + caption: 'Heading #5', + }, + + 'Heading 6': { + figure: Heading6Tooltip, + caption: 'Heading #6', + }, + + 'Code Block': { + figure: CodeBlockTooltip, + caption: 'Code Block', + }, + + Quote: { + figure: QuoteTooltip, + caption: 'Quote', + }, + + Divider: { + figure: DividerTooltip, + caption: 'Divider', + }, + + 'Bulleted List': { + figure: BulletedListTooltip, + caption: 'Bulleted List', + }, + + 'Numbered List': { + figure: NumberedListTooltip, + caption: 'Numbered List', + }, + + Bold: { + figure: BoldTextTooltip, + caption: 'Bold Text', + }, + + Italic: { + figure: ItalicTooltip, + caption: 'Italic', + }, + + Underline: { + figure: UnderlineTooltip, + caption: 'Underline', + }, + + Strikethrough: { + figure: StrikethroughTooltip, + caption: 'Strikethrough', + }, +}; diff --git a/blocksuite/affine/block-note/src/note-spec.ts b/blocksuite/affine/block-note/src/note-spec.ts index 51a6054b1..04c316b82 100644 --- a/blocksuite/affine/block-note/src/note-spec.ts +++ b/blocksuite/affine/block-note/src/note-spec.ts @@ -7,6 +7,7 @@ import { DocNoteBlockAdapterExtensions, EdgelessNoteBlockAdapterExtensions, } from './adapters/index.js'; +import { NoteSlashMenuConfigExtension } from './configs/slash-menu.js'; import { NoteBlockService } from './note-service.js'; const flavour = NoteBlockSchema.model.flavour; @@ -16,6 +17,7 @@ export const NoteBlockSpec: ExtensionType[] = [ NoteBlockService, BlockViewExtension(flavour, literal`affine-note`), DocNoteBlockAdapterExtensions, + NoteSlashMenuConfigExtension, ].flat(); export const EdgelessNoteBlockSpec: ExtensionType[] = [ @@ -23,4 +25,5 @@ export const EdgelessNoteBlockSpec: ExtensionType[] = [ NoteBlockService, BlockViewExtension(flavour, literal`affine-edgeless-note`), EdgelessNoteBlockAdapterExtensions, + NoteSlashMenuConfigExtension, ].flat(); diff --git a/blocksuite/affine/block-note/tsconfig.json b/blocksuite/affine/block-note/tsconfig.json index 69ae87845..845a74421 100644 --- a/blocksuite/affine/block-note/tsconfig.json +++ b/blocksuite/affine/block-note/tsconfig.json @@ -14,6 +14,7 @@ { "path": "../model" }, { "path": "../rich-text" }, { "path": "../shared" }, + { "path": "../widget-slash-menu" }, { "path": "../../framework/block-std" }, { "path": "../../framework/global" }, { "path": "../../framework/inline" }, diff --git a/blocksuite/affine/widget-slash-menu/package.json b/blocksuite/affine/widget-slash-menu/package.json index 54203787b..f443679d7 100644 --- a/blocksuite/affine/widget-slash-menu/package.json +++ b/blocksuite/affine/widget-slash-menu/package.json @@ -14,7 +14,6 @@ "license": "MIT", "dependencies": { "@blocksuite/affine-block-embed": "workspace:*", - "@blocksuite/affine-block-note": "workspace:*", "@blocksuite/affine-block-surface": "workspace:*", "@blocksuite/affine-block-surface-ref": "workspace:*", "@blocksuite/affine-components": "workspace:*", diff --git a/blocksuite/affine/widget-slash-menu/src/config.ts b/blocksuite/affine/widget-slash-menu/src/config.ts index 68a50981a..446dc9708 100644 --- a/blocksuite/affine/widget-slash-menu/src/config.ts +++ b/blocksuite/affine/widget-slash-menu/src/config.ts @@ -9,8 +9,6 @@ import type { import { getInlineEditorByModel, insertContent, - textConversionConfigs, - textFormatConfigs, } from '@blocksuite/affine-rich-text'; import { getSelectedModelsCommand } from '@blocksuite/affine-shared/commands'; import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts'; @@ -25,7 +23,6 @@ import { FrameIcon, GithubDuotoneIcon, GroupingIcon, - HeadingsIcon, LinkedPageIcon, LoomLogoDuotoneIcon, NowIcon, @@ -40,14 +37,7 @@ import { Slice, Text } from '@blocksuite/store'; import { slashMenuToolTips } from './tooltips'; import type { SlashMenuActionItem, SlashMenuConfig } from './types'; -import { - createConversionItem, - createTextFormatItem, - formatDate, - formatTime, - insideEdgelessText, - tryRemoveEmptyLine, -} from './utils'; +import { formatDate, formatTime, tryRemoveEmptyLine } from './utils'; // TODO(@L-Sun): This counter temporarily added variables for refactoring. let index = 0; @@ -57,46 +47,6 @@ export const defaultSlashMenuConfig: SlashMenuConfig = { return model.flavour === 'affine:code'; }, items: [ - // TODO(@L-Sun): move this to rich-text when it has been remove from blocksuite/affine-components - ...textConversionConfigs - .filter(i => i.type && ['h1', 'h2', 'h3', 'text'].includes(i.type)) - .map(config => createConversionItem(config, `0_Basic@${index++}`)), - { - name: 'Other Headings', - icon: HeadingsIcon(), - group: `0_Basic@${index++}`, - subMenu: textConversionConfigs - .filter(i => i.type && ['h4', 'h5', 'h6'].includes(i.type)) - .map(config => createConversionItem(config)), - }, - ...textConversionConfigs - .filter(i => i.flavour === 'affine:code') - .map(config => createConversionItem(config, `0_Basic@${index++}`)), - - ...textConversionConfigs - .filter(i => i.type && ['divider', 'quote'].includes(i.type)) - .map( - config => - ({ - ...createConversionItem(config, `0_Basic@${index++}`), - when: ({ model }) => - model.doc.schema.flavourSchemaMap.has(config.flavour) && - !insideEdgelessText(model), - }) satisfies SlashMenuActionItem - ), - - // --------------------------------------------------------- - // { groupName: 'List' }, - ...textConversionConfigs - .filter(i => i.flavour === 'affine:list') - .map(config => createConversionItem(config, `1_List@${index++}`)), - - // --------------------------------------------------------- - // { groupName: 'Style' }, - ...textFormatConfigs - .filter(i => !['Code', 'Link'].includes(i.name)) - .map(config => createTextFormatItem(config, `2_Style@${index++}`)), - { name: 'New Doc', description: 'Start a new document.', diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/bold-text.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/bold-text.ts deleted file mode 100644 index 0f4a43061..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/bold-text.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const BoldTextTooltip = html` - - - - - -Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. -In a decentralized system, we can have a kaleidoscopic complexity to our data. - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/bulleted-list.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/bulleted-list.ts deleted file mode 100644 index f1e7921c5..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/bulleted-list.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const BulletedListTooltip = html` - - - - - - -Here's an example of a bulleted list. - -You can list your plans such as this - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/code-block.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/code-block.ts deleted file mode 100644 index 9ebff92cb..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/code-block.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const CodeBlockTooltip = html` - - - - - - : { helloTo "World" body: { () } } -struct var=varsome\( -ContentView -View@StateView -Text -"Hello helloTo)!" - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/divider.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/divider.ts deleted file mode 100644 index 2df75f9f1..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/divider.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const DividerTooltip = html` - - - - - -In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. - - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/heading-1.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/heading-1.ts deleted file mode 100644 index ad432d2a8..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/heading-1.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const Heading1Tooltip = html` - - - - - -Heading 1 -In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/heading-2.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/heading-2.ts deleted file mode 100644 index 8ba032f02..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/heading-2.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const Heading2Tooltip = html` - - - - - -Heading 2 -In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/heading-3.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/heading-3.ts deleted file mode 100644 index a9036a494..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/heading-3.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const Heading3Tooltip = html` - - - - - -Heading 3 -In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/heading-4.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/heading-4.ts deleted file mode 100644 index 1d54f9b2f..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/heading-4.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const Heading4Tooltip = html` - - - - - -Heading 4 -In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/heading-5.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/heading-5.ts deleted file mode 100644 index b83c82dae..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/heading-5.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const Heading5Tooltip = html` - - - - - -Heading 5 -In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/heading-6.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/heading-6.ts deleted file mode 100644 index e8acc16f2..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/heading-6.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const Heading6Tooltip = html` - - - - - -Heading 6 -In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/index.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/index.ts index b107500dd..174fed1b6 100644 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/index.ts +++ b/blocksuite/affine/widget-slash-menu/src/tooltips/index.ts @@ -1,118 +1,22 @@ import type { SlashMenuTooltip } from '../types'; -import { BoldTextTooltip } from './bold-text'; -import { BulletedListTooltip } from './bulleted-list'; -import { CodeBlockTooltip } from './code-block'; import { CopyTooltip } from './copy'; import { DeleteTooltip } from './delete'; -import { DividerTooltip } from './divider'; import { EdgelessTooltip } from './edgeless'; import { FigmaTooltip } from './figma'; import { GithubRepoTooltip } from './github-repo'; -import { Heading1Tooltip } from './heading-1'; -import { Heading2Tooltip } from './heading-2'; -import { Heading3Tooltip } from './heading-3'; -import { Heading4Tooltip } from './heading-4'; -import { Heading5Tooltip } from './heading-5'; -import { Heading6Tooltip } from './heading-6'; -import { ItalicTooltip } from './italic'; import { LinearTooltip } from './linear'; import { LinkDocTooltip } from './link-doc'; import { MoveDownTooltip } from './move-down'; import { MoveUpTooltip } from './move-up'; import { NewDocTooltip } from './new-doc'; import { NowTooltip } from './now'; -import { NumberedListTooltip } from './numbered-list'; -import { QuoteTooltip } from './quote'; -import { StrikethroughTooltip } from './strikethrough'; -import { TextTooltip } from './text'; import { TodayTooltip } from './today'; import { TomorrowTooltip } from './tomorrow'; import { TweetTooltip } from './tweet'; -import { UnderlineTooltip } from './underline'; import { YesterdayTooltip } from './yesterday'; import { YoutubeVideoTooltip } from './youtube-video'; export const slashMenuToolTips: Record = { - Text: { - figure: TextTooltip, - caption: 'Text', - }, - - 'Heading 1': { - figure: Heading1Tooltip, - caption: 'Heading #1', - }, - - 'Heading 2': { - figure: Heading2Tooltip, - caption: 'Heading #2', - }, - - 'Heading 3': { - figure: Heading3Tooltip, - caption: 'Heading #3', - }, - - 'Heading 4': { - figure: Heading4Tooltip, - caption: 'Heading #4', - }, - - 'Heading 5': { - figure: Heading5Tooltip, - caption: 'Heading #5', - }, - - 'Heading 6': { - figure: Heading6Tooltip, - caption: 'Heading #6', - }, - - 'Code Block': { - figure: CodeBlockTooltip, - caption: 'Code Block', - }, - - Quote: { - figure: QuoteTooltip, - caption: 'Quote', - }, - - Divider: { - figure: DividerTooltip, - caption: 'Divider', - }, - - 'Bulleted List': { - figure: BulletedListTooltip, - caption: 'Bulleted List', - }, - - 'Numbered List': { - figure: NumberedListTooltip, - caption: 'Numbered List', - }, - - Bold: { - figure: BoldTextTooltip, - caption: 'Bold Text', - }, - - Italic: { - figure: ItalicTooltip, - caption: 'Italic', - }, - - Underline: { - figure: UnderlineTooltip, - caption: 'Underline', - }, - - Strikethrough: { - figure: StrikethroughTooltip, - caption: 'Strikethrough', - }, - 'New Doc': { figure: NewDocTooltip, caption: 'New Doc', diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/italic.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/italic.ts deleted file mode 100644 index caa6586f2..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/italic.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const ItalicTooltip = html` - - - - - -Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. -In a decentralized system, we can have a kaleidoscopic complexity to our data. - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/numbered-list.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/numbered-list.ts deleted file mode 100644 index f29bba2a7..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/numbered-list.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const NumberedListTooltip = html` - - - - - - -1. - -Here's an example of a numbered list. - -2. - -You can list your plans such as this - - - - - - - - - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/quote.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/quote.ts deleted file mode 100644 index 2bdd7e893..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/quote.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const QuoteTooltip = html` - - - - - - -In a decentralized system, we can have a kaleidoscopic complexity to our data. … - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/strikethrough.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/strikethrough.ts deleted file mode 100644 index cb34d9dd4..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/strikethrough.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const StrikethroughTooltip = html` - - - - - -Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. -In a decentralized system, we can have a kaleidoscopic complexity to our data. - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/text.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/text.ts deleted file mode 100644 index 787d06d52..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/text.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const TextTooltip = html` - - - - - -In a decentralized system, we can have a kaleidoscopic complexity to our data. Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/underline.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/underline.ts deleted file mode 100644 index 63bedbbcf..000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/underline.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const UnderlineTooltip = html` - - - - - -Any user may have a different perspective on what data they either have, choose to share, or accept. For example, one user’s edits to a document might be on their laptop on an airplane; when the plane lands and the computer reconnects, those changes are distributed to other users. Other users might choose to accept all, some, or none of those changes to their version of the document. -In a decentralized system, we can have a kaleidoscopic complexity to our data. - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/utils.ts b/blocksuite/affine/widget-slash-menu/src/utils.ts index 610cacf19..d718f1256 100644 --- a/blocksuite/affine/widget-slash-menu/src/utils.ts +++ b/blocksuite/affine/widget-slash-menu/src/utils.ts @@ -1,14 +1,5 @@ -import { updateBlockType } from '@blocksuite/affine-block-note'; -import { - formatBlockCommand, - type TextConversionConfig, - type TextFormatConfig, -} from '@blocksuite/affine-rich-text'; -import { isInsideBlockByFlavour } from '@blocksuite/affine-shared/utils'; -import { BlockSelection } from '@blocksuite/block-std'; import type { BlockModel } from '@blocksuite/store'; -import { slashMenuToolTips } from './tooltips/index.js'; import type { SlashMenuActionItem, SlashMenuConfig, @@ -93,68 +84,12 @@ export function mergeSlashMenuConfigs( }; } -// TODO(@L-Sun): remove edgeless text check -export function insideEdgelessText(model: BlockModel) { - return isInsideBlockByFlavour(model.doc, model, 'affine:edgeless-text'); -} - export function tryRemoveEmptyLine(model: BlockModel) { if (model.text?.length === 0) { model.doc.deleteBlock(model); } } -export function createConversionItem( - config: TextConversionConfig, - group?: SlashMenuItem['group'] -): SlashMenuActionItem { - const { name, description, icon, flavour, type } = config; - return { - name, - group, - description, - icon, - tooltip: slashMenuToolTips[name], - when: ({ model }) => model.doc.schema.flavourSchemaMap.has(flavour), - action: ({ std }) => { - std.command.exec(updateBlockType, { - flavour, - props: { type }, - }); - }, - }; -} - -export function createTextFormatItem( - config: TextFormatConfig, - group?: SlashMenuItem['group'] -): SlashMenuActionItem { - const { name, icon, id, action } = config; - return { - name, - icon, - group, - tooltip: slashMenuToolTips[name], - action: ({ std, model }) => { - const { host } = std; - - if (model.text?.length !== 0) { - std.command.exec(formatBlockCommand, { - blockSelections: [ - std.selection.create(BlockSelection, { - blockId: model.id, - }), - ], - styles: { [id]: true }, - }); - } else { - // like format bar when the line is empty - action(host); - } - }, - }; -} - export function formatDate(date: Date) { // yyyy-mm-dd const year = date.getFullYear(); diff --git a/blocksuite/affine/widget-slash-menu/tsconfig.json b/blocksuite/affine/widget-slash-menu/tsconfig.json index 618156a63..4a4c03c78 100644 --- a/blocksuite/affine/widget-slash-menu/tsconfig.json +++ b/blocksuite/affine/widget-slash-menu/tsconfig.json @@ -8,7 +8,6 @@ "include": ["./src"], "references": [ { "path": "../block-embed" }, - { "path": "../block-note" }, { "path": "../block-surface" }, { "path": "../block-surface-ref" }, { "path": "../components" }, diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts index 36ef45aab..5526a0093 100644 --- a/tools/utils/src/workspace.gen.ts +++ b/tools/utils/src/workspace.gen.ts @@ -219,6 +219,7 @@ export const PackageList = [ 'blocksuite/affine/model', 'blocksuite/affine/rich-text', 'blocksuite/affine/shared', + 'blocksuite/affine/widget-slash-menu', 'blocksuite/framework/block-std', 'blocksuite/framework/global', 'blocksuite/framework/inline', @@ -494,7 +495,6 @@ export const PackageList = [ name: '@blocksuite/affine-widget-slash-menu', workspaceDependencies: [ 'blocksuite/affine/block-embed', - 'blocksuite/affine/block-note', 'blocksuite/affine/block-surface', 'blocksuite/affine/block-surface-ref', 'blocksuite/affine/components', diff --git a/yarn.lock b/yarn.lock index 1d4a69a9a..b089284f1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2560,6 +2560,7 @@ __metadata: "@blocksuite/affine-model": "workspace:*" "@blocksuite/affine-rich-text": "workspace:*" "@blocksuite/affine-shared": "workspace:*" + "@blocksuite/affine-widget-slash-menu": "workspace:*" "@blocksuite/block-std": "workspace:*" "@blocksuite/global": "workspace:*" "@blocksuite/icons": "npm:^2.2.1" @@ -3039,7 +3040,6 @@ __metadata: resolution: "@blocksuite/affine-widget-slash-menu@workspace:blocksuite/affine/widget-slash-menu" dependencies: "@blocksuite/affine-block-embed": "workspace:*" - "@blocksuite/affine-block-note": "workspace:*" "@blocksuite/affine-block-surface": "workspace:*" "@blocksuite/affine-block-surface-ref": "workspace:*" "@blocksuite/affine-components": "workspace:*"