L-Sun
2025-03-10 12:38:59 +00:00
parent 6244bbbd11
commit c13d4c575f
7 changed files with 110 additions and 0 deletions

View File

@@ -30,6 +30,7 @@
{ "path": "../fragments/fragment-doc-title" }, { "path": "../fragments/fragment-doc-title" },
{ "path": "../fragments/fragment-frame-panel" }, { "path": "../fragments/fragment-frame-panel" },
{ "path": "../fragments/fragment-outline" }, { "path": "../fragments/fragment-outline" },
{ "path": "../gfx/text" },
{ "path": "../model" }, { "path": "../model" },
{ "path": "../rich-text" }, { "path": "../rich-text" },
{ "path": "../shared" }, { "path": "../shared" },

View File

@@ -9,6 +9,8 @@ import {
import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu'; import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
import { FontIcon } from '@blocksuite/icons/lit'; import { FontIcon } from '@blocksuite/icons/lit';
import { calloutTooltip } from './tooltips';
export const calloutSlashMenuConfig: SlashMenuConfig = { export const calloutSlashMenuConfig: SlashMenuConfig = {
disableWhen: ({ model }) => { disableWhen: ({ model }) => {
return ( return (
@@ -22,6 +24,10 @@ export const calloutSlashMenuConfig: SlashMenuConfig = {
name: 'Callout', name: 'Callout',
description: 'Let your words stand out.', description: 'Let your words stand out.',
icon: FontIcon(), icon: FontIcon(),
tooltip: {
figure: calloutTooltip,
caption: 'Callout',
},
searchAlias: ['callout'], searchAlias: ['callout'],
group: '0_Basic@9', group: '0_Basic@9',
when: ({ std, model }) => { when: ({ std, model }) => {

View File

@@ -0,0 +1,28 @@
import { html } from 'lit';
// prettier-ignore
export const calloutTooltip = html`<svg width="170" height="106" viewBox="0 0 170 106" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3479_144688)">
<rect width="170" height="106" fill="white"/>
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="16.6364">Highlight important notes.</tspan></text>
<path d="M8 32.1816C8 29.3199 10.3199 27 13.1816 27H489.892C492.754 27 495.073 29.3199 495.073 32.1816V90.8403C495.073 93.702 492.754 96.0219 489.892 96.0219H13.1816C10.3199 96.0219 8 93.702 8 90.8403V32.1816Z" fill="#EEFFFD"/>
<g clip-path="url(#clip1_3479_144688)">
<g clip-path="url(#clip2_3479_144688)">
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="15" font-weight="500" letter-spacing="0em"><tspan x="14.7494" y="50.1658">&#x1f44b;</tspan></text>
</g>
</g>
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="44.9541" y="49.4196">A storyboard is a visual representation of a story, typically presented in the form of sequential </tspan><tspan x="44.9541" y="64.9645">panels. Each panel features illustrations or images accompanied by notes describing key </tspan><tspan x="44.9541" y="80.5094">scenes or shots, including details of action and dialogue. </tspan></text>
</g>
<defs>
<clipPath id="clip0_3479_144688">
<rect width="170" height="106" fill="white"/>
</clipPath>
<clipPath id="clip1_3479_144688">
<rect width="24" height="30.477" fill="white" transform="translate(14.477 30.2388)"/>
</clipPath>
<clipPath id="clip2_3479_144688">
<rect x="14.477" y="36.7158" width="24" height="24" rx="1.94311" fill="white"/>
</clipPath>
</defs>
</svg>
`

View File

@@ -7,6 +7,7 @@ export const embedLoomSlashMenuConfig: SlashMenuConfig = {
{ {
name: 'Loom', name: 'Loom',
icon: LoomLogoDuotoneIcon(), icon: LoomLogoDuotoneIcon(),
description: 'Embed a Loom video.',
group: '4_Content & Media@8', group: '4_Content & Media@8',
when: ({ model }) => when: ({ model }) =>
model.doc.schema.flavourSchemaMap.has('affine:embed-loom'), model.doc.schema.flavourSchemaMap.has('affine:embed-loom'),

View File

@@ -5,6 +5,7 @@ import type { SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
import { TableIcon } from '@blocksuite/icons/lit'; import { TableIcon } from '@blocksuite/icons/lit';
import { insertTableBlockCommand } from '../commands'; import { insertTableBlockCommand } from '../commands';
import { tableTooltip } from './tooltips';
export const tableSlashMenuConfig: SlashMenuConfig = { export const tableSlashMenuConfig: SlashMenuConfig = {
disableWhen: ({ model }) => model.flavour === 'affine:table', disableWhen: ({ model }) => model.flavour === 'affine:table',
@@ -13,6 +14,10 @@ export const tableSlashMenuConfig: SlashMenuConfig = {
name: 'Table', name: 'Table',
description: 'Create a simple table.', description: 'Create a simple table.',
icon: TableIcon(), icon: TableIcon(),
tooltip: {
figure: tableTooltip,
caption: 'Table',
},
group: '4_Content & Media@0', group: '4_Content & Media@0',
when: ({ model }) => when: ({ model }) =>
!isInsideBlockByFlavour(model.doc, model, 'affine:edgeless-text'), !isInsideBlockByFlavour(model.doc, model, 'affine:edgeless-text'),

View File

@@ -0,0 +1,68 @@
import { html } from 'lit';
// prettier-ignore
export const tableTooltip = html`<svg width="170" height="106" viewBox="0 0 170 106" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="170" height="106" fill="white"/>
<mask id="path-1-inside-1_3479_144620" fill="white">
<path d="M8 26H50V43.25H8V26Z"/>
</mask>
<path d="M8 26V25H7V26H8ZM50 26H51V25H50V26ZM50 43.25V44.25H51V43.25H50ZM8 43.25H7V44.25H8V43.25ZM8 27H50V25H8V27ZM49 26V43.25H51V26H49ZM50 42.25H8V44.25H50V42.25ZM9 43.25V26H7V43.25H9Z" fill="black" fill-opacity="0.1" mask="url(#path-1-inside-1_3479_144620)"/>
<text fill="#7A7A7A" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="16" y="36.8068">Ranking</tspan></text>
<mask id="path-4-inside-2_3479_144620" fill="white">
<path d="M8 43.25H50V60.5H8V43.25Z"/>
</mask>
<path d="M50 60.5V61.5H51V60.5H50ZM8 60.5H7V61.5H8V60.5ZM49 43.25V60.5H51V43.25H49ZM50 59.5H8V61.5H50V59.5ZM9 60.5V43.25H7V60.5H9Z" fill="black" fill-opacity="0.1" mask="url(#path-4-inside-2_3479_144620)"/>
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="14" y="54.0568">&#x1f947; First</tspan></text>
<mask id="path-7-inside-3_3479_144620" fill="white">
<path d="M8 60.5H50V77.75H8V60.5Z"/>
</mask>
<path d="M50 77.75V78.75H51V77.75H50ZM8 77.75H7V78.75H8V77.75ZM49 60.5V77.75H51V60.5H49ZM50 76.75H8V78.75H50V76.75ZM9 77.75V60.5H7V77.75H9Z" fill="black" fill-opacity="0.1" mask="url(#path-7-inside-3_3479_144620)"/>
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="14" y="71.3068">&#x1f948; Second</tspan></text>
<mask id="path-10-inside-4_3479_144620" fill="white">
<path d="M8 77.75H50V95H8V77.75Z"/>
</mask>
<path d="M50 95V96H51V95H50ZM8 95H7V96H8V95ZM49 77.75V95H51V77.75H49ZM50 94H8V96H50V94ZM9 95V77.75H7V95H9Z" fill="black" fill-opacity="0.1" mask="url(#path-10-inside-4_3479_144620)"/>
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="14" y="88.5568">&#x1f949; Third</tspan></text>
<mask id="path-13-inside-5_3479_144620" fill="white">
<path d="M50 26H88V43.25H50V26Z"/>
</mask>
<path d="M88 26H89V25H88V26ZM88 43.25V44.25H89V43.25H88ZM50 27H88V25H50V27ZM87 26V43.25H89V26H87ZM88 42.25H50V44.25H88V42.25Z" fill="black" fill-opacity="0.1" mask="url(#path-13-inside-5_3479_144620)"/>
<text fill="#7A7A7A" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="56" y="36.8068">Country</tspan></text>
<mask id="path-16-inside-6_3479_144620" fill="white">
<path d="M50 43.25H88V60.5H50V43.25Z"/>
</mask>
<path d="M88 60.5V61.5H89V60.5H88ZM87 43.25V60.5H89V43.25H87ZM88 59.5H50V61.5H88V59.5Z" fill="black" fill-opacity="0.1" mask="url(#path-16-inside-6_3479_144620)"/>
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="56" y="54.0568">China</tspan></text>
<mask id="path-19-inside-7_3479_144620" fill="white">
<path d="M50 60.5H88V77.75H50V60.5Z"/>
</mask>
<path d="M88 77.75V78.75H89V77.75H88ZM87 60.5V77.75H89V60.5H87ZM88 76.75H50V78.75H88V76.75Z" fill="black" fill-opacity="0.1" mask="url(#path-19-inside-7_3479_144620)"/>
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="56" y="71.3068">Japan</tspan></text>
<mask id="path-22-inside-8_3479_144620" fill="white">
<path d="M50 77.75H88V95H50V77.75Z"/>
</mask>
<path d="M88 95V96H89V95H88ZM87 77.75V95H89V77.75H87ZM88 94H50V96H88V94Z" fill="black" fill-opacity="0.1" mask="url(#path-22-inside-8_3479_144620)"/>
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="56" y="88.5568">USA</tspan></text>
<mask id="path-25-inside-9_3479_144620" fill="white">
<path d="M88 26H164V43.25H88V26Z"/>
</mask>
<path d="M164 26H165V25H164V26ZM164 43.25V44.25H165V43.25H164ZM88 27H164V25H88V27ZM163 26V43.25H165V26H163ZM164 42.25H88V44.25H164V42.25Z" fill="black" fill-opacity="0.1" mask="url(#path-25-inside-9_3479_144620)"/>
<text fill="#7A7A7A" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="94" y="36.8068">Weekly Overtime (Hrs)</tspan></text>
<mask id="path-28-inside-10_3479_144620" fill="white">
<path d="M88 43.25H164V60.5H88V43.25Z"/>
</mask>
<path d="M164 60.5V61.5H165V60.5H164ZM163 43.25V60.5H165V43.25H163ZM164 59.5H88V61.5H164V59.5Z" fill="black" fill-opacity="0.1" mask="url(#path-28-inside-10_3479_144620)"/>
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="94" y="54.0568">10+</tspan></text>
<mask id="path-31-inside-11_3479_144620" fill="white">
<path d="M88 60.5H164V77.75H88V60.5Z"/>
</mask>
<path d="M164 77.75V78.75H165V77.75H164ZM163 60.5V77.75H165V60.5H163ZM164 76.75H88V78.75H164V76.75Z" fill="black" fill-opacity="0.1" mask="url(#path-31-inside-11_3479_144620)"/>
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="94" y="71.3068">8</tspan></text>
<mask id="path-34-inside-12_3479_144620" fill="white">
<path d="M88 77.75H164V95H88V77.75Z"/>
</mask>
<path d="M164 95V96H165V95H164ZM163 77.75V95H165V77.75H163ZM164 94H88V96H164V94Z" fill="black" fill-opacity="0.1" mask="url(#path-34-inside-12_3479_144620)"/>
<text fill="#141414" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="6" letter-spacing="0px"><tspan x="94" y="88.5568">3</tspan></text>
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="16.6364">Insert editable tabular data.</tspan></text>
</svg>
`;

View File

@@ -28,6 +28,7 @@ export const PackageList = [
'blocksuite/affine/fragments/fragment-doc-title', 'blocksuite/affine/fragments/fragment-doc-title',
'blocksuite/affine/fragments/fragment-frame-panel', 'blocksuite/affine/fragments/fragment-frame-panel',
'blocksuite/affine/fragments/fragment-outline', 'blocksuite/affine/fragments/fragment-outline',
'blocksuite/affine/gfx/text',
'blocksuite/affine/model', 'blocksuite/affine/model',
'blocksuite/affine/rich-text', 'blocksuite/affine/rich-text',
'blocksuite/affine/shared', 'blocksuite/affine/shared',