diff --git a/blocksuite/affine/block-note/package.json b/blocksuite/affine/block-note/package.json index 29999d9cc8..13c3bf967c 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 0000000000..4e8d5ec7f5 --- /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 0000000000..1cf9b6788c --- /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 51a6054b19..04c316b821 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 69ae878454..845a74421d 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 54203787bd..f443679d7e 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 68a50981ac..446dc97083 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 0f4a430613..0000000000 --- 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 f1e7921c56..0000000000 --- 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 9ebff92cbd..0000000000 --- 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 2df75f9f1e..0000000000 --- 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 ad432d2a84..0000000000 --- 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 8ba032f02c..0000000000 --- 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 a9036a4944..0000000000 --- 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 1d54f9b2fb..0000000000 --- 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 b83c82daed..0000000000 --- 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 e8acc16f23..0000000000 --- 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 b107500dd6..174fed1b69 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 caa6586f2c..0000000000 --- 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 f29bba2a77..0000000000 --- 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 2bdd7e8933..0000000000 --- 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 cb34d9dd4d..0000000000 --- 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 787d06d521..0000000000 --- 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 63bedbbcfd..0000000000 --- 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 610cacf191..d718f1256c 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 618156a638..4a4c03c78c 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 36ef45aabd..5526a00932 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 1d4a69a9a5..b089284f17 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:*"