mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-18 18:41:52 +08:00
refactor(editor): adjust folder structure for slash menu extension (#10588)
Close [BS-2743](https://linear.app/affine-design/issue/BS-2743/slash-menu插件化：调整文件夹结构) This PR move slash menu from `affine-root-block` to `widget-affine-slash-menu`, and make it as a `WidgetViewExtension`
This commit is contained in:
L-Sun
@@ -21,15 +21,6 @@ export {
|
||||
export { AffineLinkedDocWidget } from './linked-doc/index.js';
|
||||
export { AffineModalWidget } from './modal/modal.js';
|
||||
export { AffinePageDraggingAreaWidget } from './page-dragging-area/page-dragging-area.js';
|
||||
export {
|
||||
type AffineSlashMenuActionItem,
|
||||
type AffineSlashMenuContext,
|
||||
type AffineSlashMenuGroupDivider,
|
||||
type AffineSlashMenuItem,
|
||||
type AffineSlashMenuItemGenerator,
|
||||
AffineSlashMenuWidget,
|
||||
type AffineSlashSubMenu,
|
||||
} from './slash-menu/index.js';
|
||||
export { AffineSurfaceRefToolbar } from './surface-ref-toolbar/surface-ref-toolbar.js';
|
||||
export * from './viewport-overlay/viewport-overlay.js';
|
||||
export { AffineFrameTitleWidget } from '@blocksuite/affine-widget-frame-title';
|
||||
|
||||
@@ -8,6 +8,7 @@ import { unsafeCSSVar } from '@blocksuite/affine-shared/theme';
|
||||
import {
|
||||
createKeydownObserver,
|
||||
getCurrentNativeRange,
|
||||
getPopperPosition,
|
||||
getViewportElement,
|
||||
} from '@blocksuite/affine-shared/utils';
|
||||
import { PropTypes, requiredProperties } from '@blocksuite/block-std';
|
||||
@@ -20,7 +21,6 @@ import { property, query, queryAll, state } from 'lit/decorators.js';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
import throttle from 'lodash-es/throttle';
|
||||
|
||||
import { getPopperPosition } from '../../utils/position.js';
|
||||
import type { LinkedDocContext, LinkedMenuGroup } from './config.js';
|
||||
import { linkedDocPopoverStyles } from './styles.js';
|
||||
import { resolveSignal } from './utils.js';
|
||||
|
||||
@@ -1,830 +0,0 @@
|
||||
import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment';
|
||||
import type { DataViewBlockComponent } from '@blocksuite/affine-block-data-view';
|
||||
import { insertDatabaseBlockCommand } from '@blocksuite/affine-block-database';
|
||||
import {
|
||||
FigmaIcon,
|
||||
GithubIcon,
|
||||
LoomIcon,
|
||||
YoutubeIcon,
|
||||
} from '@blocksuite/affine-block-embed';
|
||||
import { insertImagesCommand } from '@blocksuite/affine-block-image';
|
||||
import { insertLatexBlockCommand } from '@blocksuite/affine-block-latex';
|
||||
import { focusBlockEnd } from '@blocksuite/affine-block-note';
|
||||
import { getSurfaceBlock } from '@blocksuite/affine-block-surface';
|
||||
import { insertSurfaceRefBlockCommand } from '@blocksuite/affine-block-surface-ref';
|
||||
import { insertTableBlockCommand } from '@blocksuite/affine-block-table';
|
||||
import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-card-modal';
|
||||
import {
|
||||
ArrowDownBigIcon,
|
||||
ArrowUpBigIcon,
|
||||
CopyIcon,
|
||||
DatabaseKanbanViewIcon20,
|
||||
DatabaseTableViewIcon20,
|
||||
DeleteIcon,
|
||||
FileIcon,
|
||||
HeadingIcon,
|
||||
LinkedDocIcon,
|
||||
LinkIcon,
|
||||
NewDocIcon,
|
||||
NowIcon,
|
||||
TodayIcon,
|
||||
TomorrowIcon,
|
||||
YesterdayIcon,
|
||||
} from '@blocksuite/affine-components/icons';
|
||||
import {
|
||||
getInlineEditorByModel,
|
||||
insertContent,
|
||||
insertInlineLatex,
|
||||
textConversionConfigs,
|
||||
textFormatConfigs,
|
||||
} from '@blocksuite/affine-components/rich-text';
|
||||
import { toast } from '@blocksuite/affine-components/toast';
|
||||
import type {
|
||||
FrameBlockModel,
|
||||
ParagraphBlockModel,
|
||||
} from '@blocksuite/affine-model';
|
||||
import {
|
||||
getSelectedModelsCommand,
|
||||
getTextSelectionCommand,
|
||||
} from '@blocksuite/affine-shared/commands';
|
||||
import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
|
||||
import {
|
||||
FeatureFlagService,
|
||||
FileSizeLimitService,
|
||||
TelemetryProvider,
|
||||
} from '@blocksuite/affine-shared/services';
|
||||
import {
|
||||
createDefaultDoc,
|
||||
openFileOrFiles,
|
||||
} from '@blocksuite/affine-shared/utils';
|
||||
import { viewPresets } from '@blocksuite/data-view/view-presets';
|
||||
import { assertType } from '@blocksuite/global/utils';
|
||||
import {
|
||||
DualLinkIcon,
|
||||
ExportToPdfIcon,
|
||||
FontIcon,
|
||||
FrameIcon,
|
||||
GroupingIcon,
|
||||
ImageIcon,
|
||||
TableIcon,
|
||||
TeXIcon,
|
||||
} from '@blocksuite/icons/lit';
|
||||
import type { DeltaInsert } from '@blocksuite/inline';
|
||||
import type { BlockModel } from '@blocksuite/store';
|
||||
import { Slice, Text } from '@blocksuite/store';
|
||||
import type { TemplateResult } from 'lit';
|
||||
|
||||
import type { RootBlockComponent } from '../../types.js';
|
||||
import { formatDate, formatTime } from '../../utils/misc.js';
|
||||
import type { AffineLinkedDocWidget } from '../linked-doc/index.js';
|
||||
import { type SlashMenuTooltip, slashMenuToolTips } from './tooltips/index.js';
|
||||
import {
|
||||
createConversionItem,
|
||||
createTextFormatItem,
|
||||
insideEdgelessText,
|
||||
tryRemoveEmptyLine,
|
||||
} from './utils.js';
|
||||
|
||||
export type SlashMenuConfig = {
|
||||
triggerKeys: string[];
|
||||
ignoreBlockTypes: string[];
|
||||
ignoreSelector: string;
|
||||
items: SlashMenuItem[];
|
||||
maxHeight: number;
|
||||
tooltipTimeout: number;
|
||||
};
|
||||
|
||||
export type SlashMenuStaticConfig = Omit<SlashMenuConfig, 'items'> & {
|
||||
items: SlashMenuStaticItem[];
|
||||
};
|
||||
|
||||
export type SlashMenuItem = SlashMenuStaticItem | SlashMenuItemGenerator;
|
||||
|
||||
export type SlashMenuStaticItem =
|
||||
| SlashMenuGroupDivider
|
||||
| SlashMenuActionItem
|
||||
| SlashSubMenu;
|
||||
|
||||
export type SlashMenuGroupDivider = {
|
||||
groupName: string;
|
||||
showWhen?: (ctx: SlashMenuContext) => boolean;
|
||||
};
|
||||
|
||||
export type SlashMenuActionItem = {
|
||||
name: string;
|
||||
description?: string;
|
||||
icon?: TemplateResult;
|
||||
tooltip?: SlashMenuTooltip;
|
||||
alias?: string[];
|
||||
showWhen?: (ctx: SlashMenuContext) => boolean;
|
||||
action: (ctx: SlashMenuContext) => void | Promise<void>;
|
||||
|
||||
customTemplate?: TemplateResult<1>;
|
||||
};
|
||||
|
||||
export type SlashSubMenu = {
|
||||
name: string;
|
||||
description?: string;
|
||||
icon?: TemplateResult;
|
||||
alias?: string[];
|
||||
showWhen?: (ctx: SlashMenuContext) => boolean;
|
||||
subMenu: SlashMenuStaticItem[];
|
||||
};
|
||||
|
||||
export type SlashMenuItemGenerator = (
|
||||
ctx: SlashMenuContext
|
||||
) => (SlashMenuGroupDivider | SlashMenuActionItem | SlashSubMenu)[];
|
||||
|
||||
export type SlashMenuContext = {
|
||||
rootComponent: RootBlockComponent;
|
||||
model: BlockModel;
|
||||
};
|
||||
|
||||
export const defaultSlashMenuConfig: SlashMenuConfig = {
|
||||
triggerKeys: ['/'],
|
||||
ignoreBlockTypes: ['affine:code'],
|
||||
ignoreSelector: 'affine-callout',
|
||||
maxHeight: 344,
|
||||
tooltipTimeout: 800,
|
||||
items: [
|
||||
// ---------------------------------------------------------
|
||||
{ groupName: 'Basic' },
|
||||
...textConversionConfigs
|
||||
.filter(i => i.type && ['h1', 'h2', 'h3', 'text'].includes(i.type))
|
||||
.map(createConversionItem),
|
||||
{
|
||||
name: 'Other Headings',
|
||||
icon: HeadingIcon,
|
||||
subMenu: [
|
||||
{ groupName: 'Headings' },
|
||||
...textConversionConfigs
|
||||
.filter(i => i.type && ['h4', 'h5', 'h6'].includes(i.type))
|
||||
.map<SlashMenuActionItem>(createConversionItem),
|
||||
],
|
||||
},
|
||||
...textConversionConfigs
|
||||
.filter(i => i.flavour === 'affine:code')
|
||||
.map<SlashMenuActionItem>(createConversionItem),
|
||||
|
||||
...textConversionConfigs
|
||||
.filter(i => i.type && ['divider', 'quote'].includes(i.type))
|
||||
.map<SlashMenuActionItem>(config => ({
|
||||
...createConversionItem(config),
|
||||
showWhen: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has(config.flavour) &&
|
||||
!insideEdgelessText(model),
|
||||
})),
|
||||
|
||||
{
|
||||
name: 'Callout',
|
||||
description: 'Let your words stand out.',
|
||||
icon: FontIcon(),
|
||||
alias: ['callout'],
|
||||
showWhen: ({ model }) => {
|
||||
return model.doc.get(FeatureFlagService).getFlag('enable_callout');
|
||||
},
|
||||
action: ({ model, rootComponent }) => {
|
||||
const { doc } = model;
|
||||
const parent = doc.getParent(model);
|
||||
if (!parent) return;
|
||||
|
||||
const index = parent.children.indexOf(model);
|
||||
if (index === -1) return;
|
||||
const calloutId = doc.addBlock('affine:callout', {}, parent, index + 1);
|
||||
if (!calloutId) return;
|
||||
const paragraphId = doc.addBlock('affine:paragraph', {}, calloutId);
|
||||
if (!paragraphId) return;
|
||||
rootComponent.updateComplete
|
||||
.then(() => {
|
||||
const paragraph = rootComponent.std.view.getBlock(paragraphId);
|
||||
if (!paragraph) return;
|
||||
rootComponent.std.command.exec(focusBlockEnd, {
|
||||
focusBlock: paragraph,
|
||||
});
|
||||
})
|
||||
.catch(console.error);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Inline equation',
|
||||
description: 'Create a equation block.',
|
||||
icon: TeXIcon(),
|
||||
alias: ['inlineMath, inlineEquation', 'inlineLatex'],
|
||||
action: ({ rootComponent }) => {
|
||||
rootComponent.std.command
|
||||
.chain()
|
||||
.pipe(getTextSelectionCommand)
|
||||
.pipe(insertInlineLatex)
|
||||
.run();
|
||||
},
|
||||
},
|
||||
|
||||
// ---------------------------------------------------------
|
||||
{ groupName: 'List' },
|
||||
...textConversionConfigs
|
||||
.filter(i => i.flavour === 'affine:list')
|
||||
.map(createConversionItem),
|
||||
|
||||
// ---------------------------------------------------------
|
||||
{ groupName: 'Style' },
|
||||
...textFormatConfigs
|
||||
.filter(i => !['Code', 'Link'].includes(i.name))
|
||||
.map<SlashMenuActionItem>(createTextFormatItem),
|
||||
|
||||
// ---------------------------------------------------------
|
||||
{
|
||||
groupName: 'Page',
|
||||
showWhen: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:embed-linked-doc'),
|
||||
},
|
||||
{
|
||||
name: 'New Doc',
|
||||
description: 'Start a new document.',
|
||||
icon: NewDocIcon,
|
||||
tooltip: slashMenuToolTips['New Doc'],
|
||||
showWhen: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:embed-linked-doc'),
|
||||
action: ({ rootComponent, model }) => {
|
||||
const newDoc = createDefaultDoc(rootComponent.doc.workspace);
|
||||
insertContent(rootComponent.host, model, REFERENCE_NODE, {
|
||||
reference: {
|
||||
type: 'LinkedPage',
|
||||
pageId: newDoc.id,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Linked Doc',
|
||||
description: 'Link to another document.',
|
||||
icon: LinkedDocIcon,
|
||||
tooltip: slashMenuToolTips['Linked Doc'],
|
||||
alias: ['dual link'],
|
||||
showWhen: ({ rootComponent, model }) => {
|
||||
const { std } = rootComponent;
|
||||
const linkedDocWidget = std.view.getWidget(
|
||||
'affine-linked-doc-widget',
|
||||
rootComponent.model.id
|
||||
);
|
||||
if (!linkedDocWidget) return false;
|
||||
|
||||
return model.doc.schema.flavourSchemaMap.has('affine:embed-linked-doc');
|
||||
},
|
||||
action: ({ model, rootComponent }) => {
|
||||
const { std } = rootComponent;
|
||||
|
||||
const linkedDocWidget = std.view.getWidget(
|
||||
'affine-linked-doc-widget',
|
||||
rootComponent.model.id
|
||||
);
|
||||
if (!linkedDocWidget) return;
|
||||
assertType<AffineLinkedDocWidget>(linkedDocWidget);
|
||||
|
||||
const triggerKey = linkedDocWidget.config.triggerKeys[0];
|
||||
|
||||
insertContent(rootComponent.host, model, triggerKey);
|
||||
|
||||
const inlineEditor = getInlineEditorByModel(rootComponent.host, model);
|
||||
// Wait for range to be updated
|
||||
inlineEditor?.slots.inlineRangeSync.once(() => {
|
||||
linkedDocWidget.show({ addTriggerKey: true });
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
// ---------------------------------------------------------
|
||||
{ groupName: 'Content & Media' },
|
||||
{
|
||||
name: 'Table',
|
||||
description: 'Create a simple table.',
|
||||
icon: TableIcon(),
|
||||
tooltip: slashMenuToolTips['Table View'],
|
||||
showWhen: ({ model }) => !insideEdgelessText(model),
|
||||
action: ({ rootComponent }) => {
|
||||
rootComponent.std.command
|
||||
.chain()
|
||||
.pipe(getSelectedModelsCommand)
|
||||
.pipe(insertTableBlockCommand, {
|
||||
place: 'after',
|
||||
removeEmptyLine: true,
|
||||
})
|
||||
.pipe(({ insertedTableBlockId }) => {
|
||||
if (insertedTableBlockId) {
|
||||
const telemetry =
|
||||
rootComponent.std.getOptional(TelemetryProvider);
|
||||
telemetry?.track('BlockCreated', {
|
||||
blockType: 'affine:table',
|
||||
});
|
||||
}
|
||||
})
|
||||
.run();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Image',
|
||||
description: 'Insert an image.',
|
||||
icon: ImageIcon(),
|
||||
tooltip: slashMenuToolTips['Image'],
|
||||
showWhen: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:image'),
|
||||
action: async ({ rootComponent }) => {
|
||||
const [success, ctx] = rootComponent.std.command
|
||||
.chain()
|
||||
.pipe(getSelectedModelsCommand)
|
||||
.pipe(insertImagesCommand, { removeEmptyLine: true })
|
||||
.run();
|
||||
|
||||
if (success) await ctx.insertedImageIds;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Link',
|
||||
description: 'Add a bookmark for reference.',
|
||||
icon: LinkIcon,
|
||||
tooltip: slashMenuToolTips['Link'],
|
||||
showWhen: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:bookmark'),
|
||||
action: async ({ rootComponent, model }) => {
|
||||
const parentModel = rootComponent.doc.getParent(model);
|
||||
if (!parentModel) {
|
||||
return;
|
||||
}
|
||||
const index = parentModel.children.indexOf(model) + 1;
|
||||
await toggleEmbedCardCreateModal(
|
||||
rootComponent.host,
|
||||
'Links',
|
||||
'The added link will be displayed as a card view.',
|
||||
{ mode: 'page', parentModel, index }
|
||||
);
|
||||
tryRemoveEmptyLine(model);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Attachment',
|
||||
description: 'Attach a file to document.',
|
||||
icon: FileIcon,
|
||||
tooltip: slashMenuToolTips['Attachment'],
|
||||
alias: ['file'],
|
||||
showWhen: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:attachment'),
|
||||
action: async ({ rootComponent, model }) => {
|
||||
const file = await openFileOrFiles();
|
||||
if (!file) return;
|
||||
|
||||
const maxFileSize =
|
||||
rootComponent.std.store.get(FileSizeLimitService).maxFileSize;
|
||||
|
||||
await addSiblingAttachmentBlocks(
|
||||
rootComponent.host,
|
||||
[file],
|
||||
maxFileSize,
|
||||
model
|
||||
);
|
||||
tryRemoveEmptyLine(model);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'PDF',
|
||||
description: 'Upload a PDF to document.',
|
||||
icon: ExportToPdfIcon({ width: '20', height: '20' }),
|
||||
tooltip: slashMenuToolTips['PDF'],
|
||||
showWhen: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:attachment'),
|
||||
action: async ({ rootComponent, model }) => {
|
||||
const file = await openFileOrFiles();
|
||||
if (!file) return;
|
||||
|
||||
const maxFileSize =
|
||||
rootComponent.std.store.get(FileSizeLimitService).maxFileSize;
|
||||
|
||||
await addSiblingAttachmentBlocks(
|
||||
rootComponent.host,
|
||||
[file],
|
||||
maxFileSize,
|
||||
model,
|
||||
'after',
|
||||
true
|
||||
);
|
||||
tryRemoveEmptyLine(model);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'YouTube',
|
||||
description: 'Embed a YouTube video.',
|
||||
icon: YoutubeIcon,
|
||||
tooltip: slashMenuToolTips['YouTube'],
|
||||
showWhen: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:embed-youtube'),
|
||||
action: async ({ rootComponent, model }) => {
|
||||
const parentModel = rootComponent.doc.getParent(model);
|
||||
if (!parentModel) {
|
||||
return;
|
||||
}
|
||||
const index = parentModel.children.indexOf(model) + 1;
|
||||
await toggleEmbedCardCreateModal(
|
||||
rootComponent.host,
|
||||
'YouTube',
|
||||
'The added YouTube video link will be displayed as an embed view.',
|
||||
{ mode: 'page', parentModel, index }
|
||||
);
|
||||
tryRemoveEmptyLine(model);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'GitHub',
|
||||
description: 'Link to a GitHub repository.',
|
||||
icon: GithubIcon,
|
||||
tooltip: slashMenuToolTips['Github'],
|
||||
showWhen: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:embed-github'),
|
||||
action: async ({ rootComponent, model }) => {
|
||||
const parentModel = rootComponent.doc.getParent(model);
|
||||
if (!parentModel) {
|
||||
return;
|
||||
}
|
||||
const index = parentModel.children.indexOf(model) + 1;
|
||||
await toggleEmbedCardCreateModal(
|
||||
rootComponent.host,
|
||||
'GitHub',
|
||||
'The added GitHub issue or pull request link will be displayed as a card view.',
|
||||
{ mode: 'page', parentModel, index }
|
||||
);
|
||||
tryRemoveEmptyLine(model);
|
||||
},
|
||||
},
|
||||
// TODO: X Twitter
|
||||
|
||||
{
|
||||
name: 'Figma',
|
||||
description: 'Embed a Figma document.',
|
||||
icon: FigmaIcon,
|
||||
tooltip: slashMenuToolTips['Figma'],
|
||||
showWhen: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:embed-figma'),
|
||||
action: async ({ rootComponent, model }) => {
|
||||
const parentModel = rootComponent.doc.getParent(model);
|
||||
if (!parentModel) {
|
||||
return;
|
||||
}
|
||||
const index = parentModel.children.indexOf(model) + 1;
|
||||
await toggleEmbedCardCreateModal(
|
||||
rootComponent.host,
|
||||
'Figma',
|
||||
'The added Figma link will be displayed as an embed view.',
|
||||
{ mode: 'page', parentModel, index }
|
||||
);
|
||||
tryRemoveEmptyLine(model);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Loom',
|
||||
icon: LoomIcon,
|
||||
showWhen: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:embed-loom'),
|
||||
action: async ({ rootComponent, model }) => {
|
||||
const parentModel = rootComponent.doc.getParent(model);
|
||||
if (!parentModel) {
|
||||
return;
|
||||
}
|
||||
const index = parentModel.children.indexOf(model) + 1;
|
||||
await toggleEmbedCardCreateModal(
|
||||
rootComponent.host,
|
||||
'Loom',
|
||||
'The added Loom video link will be displayed as an embed view.',
|
||||
{ mode: 'page', parentModel, index }
|
||||
);
|
||||
tryRemoveEmptyLine(model);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Equation',
|
||||
description: 'Create a equation block.',
|
||||
icon: TeXIcon(),
|
||||
alias: ['mathBlock, equationBlock', 'latexBlock'],
|
||||
action: ({ rootComponent }) => {
|
||||
rootComponent.std.command
|
||||
.chain()
|
||||
.pipe(getSelectedModelsCommand)
|
||||
.pipe(insertLatexBlockCommand, {
|
||||
place: 'after',
|
||||
removeEmptyLine: true,
|
||||
})
|
||||
.run();
|
||||
},
|
||||
},
|
||||
|
||||
// TODO(@L-Sun): Linear
|
||||
|
||||
// ---------------------------------------------------------
|
||||
({ model, rootComponent }) => {
|
||||
const { doc } = rootComponent;
|
||||
|
||||
const surfaceModel = getSurfaceBlock(doc);
|
||||
if (!surfaceModel) return [];
|
||||
|
||||
const parent = doc.getParent(model);
|
||||
if (!parent) return [];
|
||||
|
||||
const frameModels = doc
|
||||
.getBlocksByFlavour('affine:frame')
|
||||
.map(block => block.model as FrameBlockModel);
|
||||
|
||||
const frameItems = frameModels.map<SlashMenuActionItem>(frameModel => ({
|
||||
name: 'Frame: ' + frameModel.title,
|
||||
icon: FrameIcon(),
|
||||
action: ({ rootComponent }) => {
|
||||
rootComponent.std.command
|
||||
.chain()
|
||||
.pipe(getSelectedModelsCommand)
|
||||
.pipe(insertSurfaceRefBlockCommand, {
|
||||
reference: frameModel.id,
|
||||
place: 'after',
|
||||
removeEmptyLine: true,
|
||||
})
|
||||
.run();
|
||||
},
|
||||
}));
|
||||
|
||||
const groupElements = surfaceModel.getElementsByType('group');
|
||||
const groupItems = groupElements.map(group => ({
|
||||
name: 'Group: ' + group.title.toString(),
|
||||
icon: GroupingIcon(),
|
||||
action: () => {
|
||||
rootComponent.std.command
|
||||
.chain()
|
||||
.pipe(getSelectedModelsCommand)
|
||||
.pipe(insertSurfaceRefBlockCommand, {
|
||||
reference: group.id,
|
||||
place: 'after',
|
||||
removeEmptyLine: true,
|
||||
})
|
||||
.run();
|
||||
},
|
||||
}));
|
||||
|
||||
const items = [...frameItems, ...groupItems];
|
||||
if (items.length !== 0) {
|
||||
return [
|
||||
{
|
||||
groupName: 'Document Group & Frame',
|
||||
},
|
||||
...items,
|
||||
];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
// ---------------------------------------------------------
|
||||
{ groupName: 'Date' },
|
||||
() => {
|
||||
const now = new Date();
|
||||
const tomorrow = new Date();
|
||||
const yesterday = new Date();
|
||||
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
|
||||
return [
|
||||
{
|
||||
name: 'Today',
|
||||
icon: TodayIcon,
|
||||
tooltip: slashMenuToolTips['Today'],
|
||||
description: formatDate(now),
|
||||
action: ({ rootComponent, model }) => {
|
||||
insertContent(rootComponent.host, model, formatDate(now));
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Tomorrow',
|
||||
icon: TomorrowIcon,
|
||||
tooltip: slashMenuToolTips['Tomorrow'],
|
||||
description: formatDate(tomorrow),
|
||||
action: ({ rootComponent, model }) => {
|
||||
const tomorrow = new Date();
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
insertContent(rootComponent.host, model, formatDate(tomorrow));
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Yesterday',
|
||||
icon: YesterdayIcon,
|
||||
tooltip: slashMenuToolTips['Yesterday'],
|
||||
description: formatDate(yesterday),
|
||||
action: ({ rootComponent, model }) => {
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
insertContent(rootComponent.host, model, formatDate(yesterday));
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Now',
|
||||
icon: NowIcon,
|
||||
tooltip: slashMenuToolTips['Now'],
|
||||
description: formatTime(now),
|
||||
action: ({ rootComponent, model }) => {
|
||||
insertContent(rootComponent.host, model, formatTime(now));
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
// ---------------------------------------------------------
|
||||
{ groupName: 'Database' },
|
||||
{
|
||||
name: 'Table View',
|
||||
description: 'Display items in a table format.',
|
||||
alias: ['database'],
|
||||
icon: DatabaseTableViewIcon20,
|
||||
tooltip: slashMenuToolTips['Table View'],
|
||||
showWhen: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:database') &&
|
||||
!insideEdgelessText(model),
|
||||
action: ({ rootComponent }) => {
|
||||
rootComponent.std.command
|
||||
.chain()
|
||||
.pipe(getSelectedModelsCommand)
|
||||
.pipe(insertDatabaseBlockCommand, {
|
||||
viewType: viewPresets.tableViewMeta.type,
|
||||
place: 'after',
|
||||
removeEmptyLine: true,
|
||||
})
|
||||
.pipe(({ insertedDatabaseBlockId }) => {
|
||||
if (insertedDatabaseBlockId) {
|
||||
const telemetry =
|
||||
rootComponent.std.getOptional(TelemetryProvider);
|
||||
telemetry?.track('BlockCreated', {
|
||||
blockType: 'affine:database',
|
||||
});
|
||||
}
|
||||
})
|
||||
.run();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Todo',
|
||||
alias: ['todo view'],
|
||||
icon: DatabaseTableViewIcon20,
|
||||
tooltip: slashMenuToolTips['Todo'],
|
||||
showWhen: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:database') &&
|
||||
!insideEdgelessText(model) &&
|
||||
!!model.doc.get(FeatureFlagService).getFlag('enable_block_query'),
|
||||
|
||||
action: ({ model, rootComponent }) => {
|
||||
const parent = rootComponent.doc.getParent(model);
|
||||
if (!parent) return;
|
||||
const index = parent.children.indexOf(model);
|
||||
const id = rootComponent.doc.addBlock(
|
||||
'affine:data-view',
|
||||
{},
|
||||
rootComponent.doc.getParent(model),
|
||||
index + 1
|
||||
);
|
||||
const dataViewModel = rootComponent.doc.getBlock(id)!;
|
||||
|
||||
Promise.resolve()
|
||||
.then(() => {
|
||||
const dataView = rootComponent.std.view.getBlock(
|
||||
dataViewModel.id
|
||||
) as DataViewBlockComponent | null;
|
||||
dataView?.dataSource.viewManager.viewAdd('table');
|
||||
})
|
||||
.catch(console.error);
|
||||
tryRemoveEmptyLine(model);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Kanban View',
|
||||
description: 'Visualize data in a dashboard.',
|
||||
alias: ['database'],
|
||||
icon: DatabaseKanbanViewIcon20,
|
||||
tooltip: slashMenuToolTips['Kanban View'],
|
||||
showWhen: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:database') &&
|
||||
!insideEdgelessText(model),
|
||||
action: ({ rootComponent }) => {
|
||||
rootComponent.std.command
|
||||
.chain()
|
||||
.pipe(getSelectedModelsCommand)
|
||||
.pipe(insertDatabaseBlockCommand, {
|
||||
viewType: viewPresets.kanbanViewMeta.type,
|
||||
place: 'after',
|
||||
removeEmptyLine: true,
|
||||
})
|
||||
.pipe(({ insertedDatabaseBlockId }) => {
|
||||
if (insertedDatabaseBlockId) {
|
||||
const telemetry =
|
||||
rootComponent.std.getOptional(TelemetryProvider);
|
||||
telemetry?.track('BlockCreated', {
|
||||
blockType: 'affine:database',
|
||||
});
|
||||
}
|
||||
})
|
||||
.run();
|
||||
},
|
||||
},
|
||||
|
||||
// ---------------------------------------------------------
|
||||
{ groupName: 'Actions' },
|
||||
{
|
||||
name: 'Move Up',
|
||||
description: 'Shift this line up.',
|
||||
icon: ArrowUpBigIcon,
|
||||
tooltip: slashMenuToolTips['Move Up'],
|
||||
action: ({ rootComponent, model }) => {
|
||||
const doc = rootComponent.doc;
|
||||
const previousSiblingModel = doc.getPrev(model);
|
||||
if (!previousSiblingModel) return;
|
||||
|
||||
const parentModel = doc.getParent(previousSiblingModel);
|
||||
if (!parentModel) return;
|
||||
|
||||
doc.moveBlocks([model], parentModel, previousSiblingModel, true);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Move Down',
|
||||
description: 'Shift this line down.',
|
||||
icon: ArrowDownBigIcon,
|
||||
tooltip: slashMenuToolTips['Move Down'],
|
||||
action: ({ rootComponent, model }) => {
|
||||
const doc = rootComponent.doc;
|
||||
const nextSiblingModel = doc.getNext(model);
|
||||
if (!nextSiblingModel) return;
|
||||
|
||||
const parentModel = doc.getParent(nextSiblingModel);
|
||||
if (!parentModel) return;
|
||||
|
||||
doc.moveBlocks([model], parentModel, nextSiblingModel, false);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Copy',
|
||||
description: 'Copy this line to clipboard.',
|
||||
icon: CopyIcon,
|
||||
tooltip: slashMenuToolTips['Copy'],
|
||||
action: ({ rootComponent, model }) => {
|
||||
const slice = Slice.fromModels(rootComponent.std.store, [model]);
|
||||
|
||||
rootComponent.std.clipboard
|
||||
.copy(slice)
|
||||
.then(() => {
|
||||
toast(rootComponent.host, 'Copied to clipboard');
|
||||
})
|
||||
.catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Duplicate',
|
||||
description: 'Create a duplicate of this line.',
|
||||
icon: DualLinkIcon(),
|
||||
tooltip: slashMenuToolTips['Copy'],
|
||||
action: ({ rootComponent, model }) => {
|
||||
if (!model.text || !(model.text instanceof Text)) {
|
||||
console.error("Can't duplicate a block without text");
|
||||
return;
|
||||
}
|
||||
const parent = rootComponent.doc.getParent(model);
|
||||
if (!parent) {
|
||||
console.error(
|
||||
'Failed to duplicate block! Parent not found: ' +
|
||||
model.id +
|
||||
'|' +
|
||||
model.flavour
|
||||
);
|
||||
return;
|
||||
}
|
||||
const index = parent.children.indexOf(model);
|
||||
|
||||
// TODO add clone model util
|
||||
rootComponent.doc.addBlock(
|
||||
model.flavour as never,
|
||||
{
|
||||
type: (model as ParagraphBlockModel).type,
|
||||
text: new Text(model.text.toDelta() as DeltaInsert[]),
|
||||
// @ts-expect-error FIXME: ts error
|
||||
checked: model.checked,
|
||||
},
|
||||
rootComponent.doc.getParent(model),
|
||||
index
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Delete',
|
||||
description: 'Remove this line permanently.',
|
||||
alias: ['remove'],
|
||||
icon: DeleteIcon,
|
||||
tooltip: slashMenuToolTips['Delete'],
|
||||
action: ({ rootComponent, model }) => {
|
||||
rootComponent.doc.deleteBlock(model);
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -1,232 +0,0 @@
|
||||
import {
|
||||
type AffineInlineEditor,
|
||||
getInlineEditorByModel,
|
||||
} from '@blocksuite/affine-components/rich-text';
|
||||
import type { UIEventStateContext } from '@blocksuite/block-std';
|
||||
import { TextSelection, WidgetComponent } from '@blocksuite/block-std';
|
||||
import { DisposableGroup } from '@blocksuite/global/slot';
|
||||
import { assertType } from '@blocksuite/global/utils';
|
||||
import { InlineEditor } from '@blocksuite/inline';
|
||||
import debounce from 'lodash-es/debounce';
|
||||
|
||||
import type { RootBlockComponent } from '../../types.js';
|
||||
import {
|
||||
defaultSlashMenuConfig,
|
||||
type SlashMenuActionItem,
|
||||
type SlashMenuContext,
|
||||
type SlashMenuGroupDivider,
|
||||
type SlashMenuItem,
|
||||
type SlashMenuItemGenerator,
|
||||
type SlashMenuStaticConfig,
|
||||
type SlashSubMenu,
|
||||
} from './config.js';
|
||||
import { SlashMenu } from './slash-menu-popover.js';
|
||||
import { filterEnabledSlashMenuItems } from './utils.js';
|
||||
|
||||
export type AffineSlashMenuContext = SlashMenuContext;
|
||||
export type AffineSlashMenuItem = SlashMenuItem;
|
||||
export type AffineSlashMenuActionItem = SlashMenuActionItem;
|
||||
export type AffineSlashMenuItemGenerator = SlashMenuItemGenerator;
|
||||
export type AffineSlashSubMenu = SlashSubMenu;
|
||||
export type AffineSlashMenuGroupDivider = SlashMenuGroupDivider;
|
||||
|
||||
let globalAbortController = new AbortController();
|
||||
|
||||
function closeSlashMenu() {
|
||||
globalAbortController.abort();
|
||||
}
|
||||
|
||||
const showSlashMenu = debounce(
|
||||
({
|
||||
context,
|
||||
container = document.body,
|
||||
abortController = new AbortController(),
|
||||
config,
|
||||
triggerKey,
|
||||
}: {
|
||||
context: SlashMenuContext;
|
||||
container?: HTMLElement;
|
||||
abortController?: AbortController;
|
||||
config: SlashMenuStaticConfig;
|
||||
triggerKey: string;
|
||||
}) => {
|
||||
globalAbortController = abortController;
|
||||
const disposables = new DisposableGroup();
|
||||
abortController.signal.addEventListener('abort', () =>
|
||||
disposables.dispose()
|
||||
);
|
||||
|
||||
const inlineEditor = getInlineEditorByModel(
|
||||
context.rootComponent.host,
|
||||
context.model
|
||||
);
|
||||
if (!inlineEditor) return;
|
||||
const slashMenu = new SlashMenu(inlineEditor, abortController);
|
||||
disposables.add(() => slashMenu.remove());
|
||||
slashMenu.context = context;
|
||||
slashMenu.config = config;
|
||||
slashMenu.triggerKey = triggerKey;
|
||||
|
||||
// FIXME(Flrande): It is not a best practice,
|
||||
// but merely a temporary measure for reusing previous components.
|
||||
// Mount
|
||||
container.append(slashMenu);
|
||||
return slashMenu;
|
||||
},
|
||||
100,
|
||||
{ leading: true }
|
||||
);
|
||||
|
||||
export const AFFINE_SLASH_MENU_WIDGET = 'affine-slash-menu-widget';
|
||||
|
||||
export class AffineSlashMenuWidget extends WidgetComponent {
|
||||
static DEFAULT_CONFIG = defaultSlashMenuConfig;
|
||||
|
||||
private readonly _getInlineEditor = (
|
||||
evt: KeyboardEvent | CompositionEvent
|
||||
) => {
|
||||
if (evt.target instanceof HTMLElement) {
|
||||
const editor = (
|
||||
evt.target.closest('.inline-editor') as {
|
||||
inlineEditor?: AffineInlineEditor;
|
||||
}
|
||||
)?.inlineEditor;
|
||||
if (editor instanceof InlineEditor) {
|
||||
return editor;
|
||||
}
|
||||
}
|
||||
|
||||
const textSelection = this.host.selection.find(TextSelection);
|
||||
if (!textSelection) return;
|
||||
|
||||
const model = this.host.doc.getBlock(textSelection.blockId)?.model;
|
||||
if (!model) return;
|
||||
|
||||
return getInlineEditorByModel(this.host, model);
|
||||
};
|
||||
|
||||
private readonly _handleInput = (
|
||||
inlineEditor: InlineEditor,
|
||||
isCompositionEnd: boolean
|
||||
) => {
|
||||
const inlineRangeApplyCallback = (callback: () => void) => {
|
||||
// the inline ranged updated in compositionEnd event before this event callback
|
||||
if (isCompositionEnd) callback();
|
||||
else inlineEditor.slots.inlineRangeSync.once(callback);
|
||||
};
|
||||
|
||||
const rootComponent = this.block;
|
||||
if (rootComponent.model.flavour !== 'affine:page') {
|
||||
console.error('SlashMenuWidget should be used in RootBlock');
|
||||
return;
|
||||
}
|
||||
assertType<RootBlockComponent>(rootComponent);
|
||||
|
||||
inlineRangeApplyCallback(() => {
|
||||
const textSelection = this.host.selection.find(TextSelection);
|
||||
if (!textSelection) return;
|
||||
|
||||
const block = this.host.view.getBlock(textSelection.blockId);
|
||||
if (!block) return;
|
||||
const model = block.model;
|
||||
|
||||
if (block.closest(this.config.ignoreSelector)) return;
|
||||
|
||||
if (this.config.ignoreBlockTypes.includes(block.flavour)) return;
|
||||
|
||||
const inlineRange = inlineEditor.getInlineRange();
|
||||
if (!inlineRange) return;
|
||||
|
||||
const textPoint = inlineEditor.getTextPoint(inlineRange.index);
|
||||
if (!textPoint) return;
|
||||
|
||||
const [leafStart, offsetStart] = textPoint;
|
||||
|
||||
const text = leafStart.textContent
|
||||
? leafStart.textContent.slice(0, offsetStart)
|
||||
: '';
|
||||
|
||||
const matchedKey = this.config.triggerKeys.find(triggerKey =>
|
||||
text.endsWith(triggerKey)
|
||||
);
|
||||
if (!matchedKey) return;
|
||||
|
||||
const config: SlashMenuStaticConfig = {
|
||||
...this.config,
|
||||
items: filterEnabledSlashMenuItems(this.config.items, {
|
||||
model,
|
||||
rootComponent,
|
||||
}),
|
||||
};
|
||||
|
||||
closeSlashMenu();
|
||||
showSlashMenu({
|
||||
context: {
|
||||
model,
|
||||
rootComponent,
|
||||
},
|
||||
triggerKey: matchedKey,
|
||||
config,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
private readonly _onCompositionEnd = (ctx: UIEventStateContext) => {
|
||||
const event = ctx.get('defaultState').event as CompositionEvent;
|
||||
|
||||
if (
|
||||
!this.config.triggerKeys.some(triggerKey =>
|
||||
triggerKey.includes(event.data)
|
||||
)
|
||||
)
|
||||
return;
|
||||
|
||||
const inlineEditor = this._getInlineEditor(event);
|
||||
if (!inlineEditor) return;
|
||||
|
||||
this._handleInput(inlineEditor, true);
|
||||
};
|
||||
|
||||
private readonly _onKeyDown = (ctx: UIEventStateContext) => {
|
||||
const eventState = ctx.get('keyboardState');
|
||||
const event = eventState.raw;
|
||||
|
||||
const key = event.key;
|
||||
|
||||
// check event is not composing
|
||||
if (
|
||||
key === undefined || // in mac os, the key may be undefined
|
||||
key === 'Process' ||
|
||||
event.isComposing
|
||||
)
|
||||
return;
|
||||
|
||||
if (!this.config.triggerKeys.some(triggerKey => triggerKey.includes(key)))
|
||||
return;
|
||||
|
||||
const inlineEditor = this._getInlineEditor(event);
|
||||
if (!inlineEditor) return;
|
||||
|
||||
this._handleInput(inlineEditor, false);
|
||||
};
|
||||
|
||||
config = AffineSlashMenuWidget.DEFAULT_CONFIG;
|
||||
|
||||
override connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
if (this.config.triggerKeys.some(key => key.length === 0)) {
|
||||
console.error('Trigger key of slash menu should not be empty string');
|
||||
return;
|
||||
}
|
||||
|
||||
this.handleEvent('keyDown', this._onKeyDown);
|
||||
this.handleEvent('compositionEnd', this._onCompositionEnd);
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
[AFFINE_SLASH_MENU_WIDGET]: AffineSlashMenuWidget;
|
||||
}
|
||||
}
|
||||
@@ -1,621 +0,0 @@
|
||||
import { ArrowDownIcon } from '@blocksuite/affine-components/icons';
|
||||
import { createLitPortal } from '@blocksuite/affine-components/portal';
|
||||
import type { AffineInlineEditor } from '@blocksuite/affine-components/rich-text';
|
||||
import {
|
||||
cleanSpecifiedTail,
|
||||
getInlineEditorByModel,
|
||||
getTextContentFromInlineRange,
|
||||
} from '@blocksuite/affine-components/rich-text';
|
||||
import {
|
||||
createKeydownObserver,
|
||||
getCurrentNativeRange,
|
||||
isControlledKeyboardEvent,
|
||||
isFuzzyMatch,
|
||||
substringMatchScore,
|
||||
} from '@blocksuite/affine-shared/utils';
|
||||
import { WithDisposable } from '@blocksuite/global/lit';
|
||||
import { autoPlacement, offset } from '@floating-ui/dom';
|
||||
import { html, LitElement, nothing, type PropertyValues } from 'lit';
|
||||
import { property, state } from 'lit/decorators.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
import throttle from 'lodash-es/throttle';
|
||||
|
||||
import { getPopperPosition } from '../../utils/position.js';
|
||||
import type {
|
||||
SlashMenuActionItem,
|
||||
SlashMenuContext,
|
||||
SlashMenuGroupDivider,
|
||||
SlashMenuItem,
|
||||
SlashMenuStaticConfig,
|
||||
SlashMenuStaticItem,
|
||||
SlashSubMenu,
|
||||
} from './config.js';
|
||||
import { slashItemToolTipStyle, styles } from './styles.js';
|
||||
import {
|
||||
getFirstNotDividerItem,
|
||||
isActionItem,
|
||||
isGroupDivider,
|
||||
isSubMenuItem,
|
||||
notGroupDivider,
|
||||
slashItemClassName,
|
||||
} from './utils.js';
|
||||
|
||||
type InnerSlashMenuContext = SlashMenuContext & {
|
||||
tooltipTimeout: number;
|
||||
onClickItem: (item: SlashMenuActionItem) => void;
|
||||
};
|
||||
|
||||
export class SlashMenu extends WithDisposable(LitElement) {
|
||||
static override styles = styles;
|
||||
|
||||
private readonly _handleClickItem = (item: SlashMenuActionItem) => {
|
||||
// Need to remove the search string
|
||||
// We must to do clean the slash string before we do the action
|
||||
// Otherwise, the action may change the model and cause the slash string to be changed
|
||||
cleanSpecifiedTail(
|
||||
this.host,
|
||||
this.context.model,
|
||||
this.triggerKey + (this._query || '')
|
||||
);
|
||||
this.inlineEditor
|
||||
.waitForUpdate()
|
||||
.then(() => {
|
||||
item.action(this.context)?.catch(console.error);
|
||||
this.abortController.abort();
|
||||
})
|
||||
.catch(console.error);
|
||||
};
|
||||
|
||||
private readonly _initItemPathMap = () => {
|
||||
const traverse = (item: SlashMenuStaticItem, path: number[]) => {
|
||||
this._itemPathMap.set(item, [...path]);
|
||||
if (isSubMenuItem(item)) {
|
||||
item.subMenu.forEach((subItem, index) =>
|
||||
traverse(subItem, [...path, index])
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
this.config.items.forEach((item, index) => traverse(item, [index]));
|
||||
};
|
||||
|
||||
private _innerSlashMenuContext!: InnerSlashMenuContext;
|
||||
|
||||
private readonly _itemPathMap = new Map<SlashMenuItem, number[]>();
|
||||
|
||||
private _queryState: 'off' | 'on' | 'no_result' = 'off';
|
||||
|
||||
private readonly _startRange = this.inlineEditor.getInlineRange();
|
||||
|
||||
private readonly _updateFilteredItems = () => {
|
||||
const query = this._query;
|
||||
if (query === null) {
|
||||
this.abortController.abort();
|
||||
return;
|
||||
}
|
||||
this._filteredItems = [];
|
||||
const searchStr = query.toLowerCase();
|
||||
if (searchStr === '' || searchStr.endsWith(' ')) {
|
||||
this._queryState = searchStr === '' ? 'off' : 'no_result';
|
||||
return;
|
||||
}
|
||||
|
||||
// Layer order traversal
|
||||
let depth = 0;
|
||||
let queue = this.config.items.filter(notGroupDivider);
|
||||
while (queue.length !== 0) {
|
||||
// remove the sub menu item from the previous layer result
|
||||
this._filteredItems = this._filteredItems.filter(
|
||||
item => !isSubMenuItem(item)
|
||||
);
|
||||
|
||||
this._filteredItems = this._filteredItems.concat(
|
||||
queue.filter(({ name, alias = [] }) =>
|
||||
[name, ...alias].some(str => isFuzzyMatch(str, searchStr))
|
||||
)
|
||||
);
|
||||
|
||||
// We search first and second layer
|
||||
if (this._filteredItems.length !== 0 && depth >= 1) break;
|
||||
|
||||
queue = queue
|
||||
.map<typeof queue>(item => {
|
||||
if (isSubMenuItem(item)) {
|
||||
return item.subMenu.filter(notGroupDivider);
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
})
|
||||
.flat();
|
||||
|
||||
depth++;
|
||||
}
|
||||
|
||||
this._filteredItems = this._filteredItems.sort((a, b) => {
|
||||
return -(
|
||||
substringMatchScore(a.name, searchStr) -
|
||||
substringMatchScore(b.name, searchStr)
|
||||
);
|
||||
});
|
||||
|
||||
this._queryState = this._filteredItems.length === 0 ? 'no_result' : 'on';
|
||||
};
|
||||
|
||||
private get _query() {
|
||||
return getTextContentFromInlineRange(this.inlineEditor, this._startRange);
|
||||
}
|
||||
|
||||
get host() {
|
||||
return this.context.rootComponent.host;
|
||||
}
|
||||
|
||||
constructor(
|
||||
private readonly inlineEditor: AffineInlineEditor,
|
||||
private readonly abortController = new AbortController()
|
||||
) {
|
||||
super();
|
||||
}
|
||||
|
||||
override connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
this._innerSlashMenuContext = {
|
||||
...this.context,
|
||||
onClickItem: this._handleClickItem,
|
||||
tooltipTimeout: this.config.tooltipTimeout,
|
||||
};
|
||||
|
||||
this._initItemPathMap();
|
||||
|
||||
this._disposables.addFromEvent(this, 'mousedown', e => {
|
||||
// Prevent input from losing focus
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
const inlineEditor = this.inlineEditor;
|
||||
if (!inlineEditor || !inlineEditor.eventSource) {
|
||||
console.error('inlineEditor or eventSource is not found');
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle arrow key
|
||||
*
|
||||
* The slash menu will be closed in the following keyboard cases:
|
||||
* - Press the space key
|
||||
* - Press the backspace key and the search string is empty
|
||||
* - Press the escape key
|
||||
* - When the search item is empty, the slash menu will be hidden temporarily,
|
||||
* and if the following key is not the backspace key, the slash menu will be closed
|
||||
*/
|
||||
createKeydownObserver({
|
||||
target: inlineEditor.eventSource,
|
||||
signal: this.abortController.signal,
|
||||
interceptor: (event, next) => {
|
||||
const { key, isComposing, code } = event;
|
||||
if (key === this.triggerKey) {
|
||||
// Can not stopPropagation here,
|
||||
// otherwise the rich text will not be able to trigger a new the slash menu
|
||||
return;
|
||||
}
|
||||
|
||||
if (key === 'Process' && !isComposing && code === 'Slash') {
|
||||
// The IME case of above
|
||||
return;
|
||||
}
|
||||
|
||||
if (key !== 'Backspace' && this._queryState === 'no_result') {
|
||||
// if the following key is not the backspace key,
|
||||
// the slash menu will be closed
|
||||
this.abortController.abort();
|
||||
return;
|
||||
}
|
||||
|
||||
if (key === 'ArrowRight' || key === 'ArrowLeft' || key === 'Escape') {
|
||||
return;
|
||||
}
|
||||
|
||||
next();
|
||||
},
|
||||
onInput: isComposition => {
|
||||
if (isComposition) {
|
||||
this._updateFilteredItems();
|
||||
} else {
|
||||
this.inlineEditor.slots.renderComplete.once(
|
||||
this._updateFilteredItems
|
||||
);
|
||||
}
|
||||
},
|
||||
onPaste: () => {
|
||||
setTimeout(() => {
|
||||
this._updateFilteredItems();
|
||||
}, 50);
|
||||
},
|
||||
onDelete: () => {
|
||||
const curRange = this.inlineEditor.getInlineRange();
|
||||
if (!this._startRange || !curRange) {
|
||||
return;
|
||||
}
|
||||
if (curRange.index < this._startRange.index) {
|
||||
this.abortController.abort();
|
||||
}
|
||||
this.inlineEditor.slots.renderComplete.once(this._updateFilteredItems);
|
||||
},
|
||||
onAbort: () => this.abortController.abort(),
|
||||
});
|
||||
}
|
||||
|
||||
protected override willUpdate() {
|
||||
if (!this.hasUpdated) {
|
||||
const currRage = getCurrentNativeRange();
|
||||
if (!currRage) {
|
||||
this.abortController.abort();
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle position
|
||||
const updatePosition = throttle(() => {
|
||||
this._position = getPopperPosition(this, currRage);
|
||||
}, 10);
|
||||
|
||||
this.disposables.addFromEvent(window, 'resize', updatePosition);
|
||||
updatePosition();
|
||||
}
|
||||
}
|
||||
|
||||
override render() {
|
||||
const slashMenuStyles = this._position
|
||||
? {
|
||||
transform: `translate(${this._position.x}, ${this._position.y})`,
|
||||
maxHeight: `${Math.min(this._position.height, this.config.maxHeight)}px`,
|
||||
}
|
||||
: {
|
||||
visibility: 'hidden',
|
||||
};
|
||||
|
||||
return html`${this._queryState !== 'no_result'
|
||||
? html` <div
|
||||
class="overlay-mask"
|
||||
@click="${() => this.abortController.abort()}"
|
||||
></div>`
|
||||
: nothing}
|
||||
<inner-slash-menu
|
||||
.context=${this._innerSlashMenuContext}
|
||||
.menu=${this._queryState === 'off'
|
||||
? this.config.items
|
||||
: this._filteredItems}
|
||||
.onClickItem=${this._handleClickItem}
|
||||
.mainMenuStyle=${slashMenuStyles}
|
||||
.abortController=${this.abortController}
|
||||
>
|
||||
</inner-slash-menu>`;
|
||||
}
|
||||
|
||||
@state()
|
||||
private accessor _filteredItems: (SlashMenuActionItem | SlashSubMenu)[] = [];
|
||||
|
||||
@state()
|
||||
private accessor _position: {
|
||||
x: string;
|
||||
y: string;
|
||||
height: number;
|
||||
} | null = null;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor config!: SlashMenuStaticConfig;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor context!: SlashMenuContext;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor triggerKey!: string;
|
||||
}
|
||||
|
||||
export class InnerSlashMenu extends WithDisposable(LitElement) {
|
||||
static override styles = styles;
|
||||
|
||||
private readonly _closeSubMenu = () => {
|
||||
this._subMenuAbortController?.abort();
|
||||
this._subMenuAbortController = null;
|
||||
this._currentSubMenu = null;
|
||||
};
|
||||
|
||||
private _currentSubMenu: SlashSubMenu | null = null;
|
||||
|
||||
private readonly _openSubMenu = (item: SlashSubMenu) => {
|
||||
if (item === this._currentSubMenu) return;
|
||||
|
||||
const itemElement = this.shadowRoot?.querySelector(
|
||||
`.${slashItemClassName(item)}`
|
||||
);
|
||||
if (!itemElement) return;
|
||||
|
||||
this._closeSubMenu();
|
||||
this._currentSubMenu = item;
|
||||
this._subMenuAbortController = new AbortController();
|
||||
this._subMenuAbortController.signal.addEventListener('abort', () => {
|
||||
this._closeSubMenu();
|
||||
});
|
||||
|
||||
const subMenuElement = createLitPortal({
|
||||
shadowDom: false,
|
||||
template: html`<inner-slash-menu
|
||||
.context=${this.context}
|
||||
.menu=${item.subMenu}
|
||||
.depth=${this.depth + 1}
|
||||
.abortController=${this._subMenuAbortController}
|
||||
>
|
||||
${item.subMenu.map(this._renderItem)}
|
||||
</inner-slash-menu>`,
|
||||
computePosition: {
|
||||
referenceElement: itemElement,
|
||||
autoUpdate: true,
|
||||
middleware: [
|
||||
offset(12),
|
||||
autoPlacement({
|
||||
allowedPlacements: ['right-start', 'right-end'],
|
||||
}),
|
||||
],
|
||||
},
|
||||
abortController: this._subMenuAbortController,
|
||||
});
|
||||
|
||||
subMenuElement.style.zIndex = `calc(var(--affine-z-index-popover) + ${this.depth})`;
|
||||
subMenuElement.focus();
|
||||
};
|
||||
|
||||
private readonly _renderActionItem = (item: SlashMenuActionItem) => {
|
||||
const { name, icon, description, tooltip, customTemplate } = item;
|
||||
|
||||
const hover = item === this._activeItem;
|
||||
|
||||
return html`<icon-button
|
||||
class="slash-menu-item ${slashItemClassName(item)}"
|
||||
width="100%"
|
||||
height="44px"
|
||||
text=${customTemplate ?? name}
|
||||
subText=${ifDefined(description)}
|
||||
data-testid="${name}"
|
||||
hover=${hover}
|
||||
@mousemove=${() => {
|
||||
this._activeItem = item;
|
||||
this._closeSubMenu();
|
||||
}}
|
||||
@click=${() => this.context.onClickItem(item)}
|
||||
>
|
||||
${icon && html`<div class="slash-menu-item-icon">${icon}</div>`}
|
||||
${tooltip &&
|
||||
html`<affine-tooltip
|
||||
tip-position="right"
|
||||
.offset=${22}
|
||||
.tooltipStyle=${slashItemToolTipStyle}
|
||||
.hoverOptions=${{
|
||||
enterDelay: this.context.tooltipTimeout,
|
||||
allowMultiple: false,
|
||||
}}
|
||||
>
|
||||
<div class="tooltip-figure">${tooltip.figure}</div>
|
||||
<div class="tooltip-caption">${tooltip.caption}</div>
|
||||
</affine-tooltip>`}
|
||||
</icon-button>`;
|
||||
};
|
||||
|
||||
private readonly _renderGroupItem = (item: SlashMenuGroupDivider) => {
|
||||
return html`<div class="slash-menu-group-name">${item.groupName}</div>`;
|
||||
};
|
||||
|
||||
private readonly _renderItem = (item: SlashMenuStaticItem) => {
|
||||
if (isGroupDivider(item)) return this._renderGroupItem(item);
|
||||
else if (isActionItem(item)) return this._renderActionItem(item);
|
||||
else if (isSubMenuItem(item)) return this._renderSubMenuItem(item);
|
||||
else {
|
||||
console.error('Unknown item type for slash menu');
|
||||
console.error(item);
|
||||
return nothing;
|
||||
}
|
||||
};
|
||||
|
||||
private readonly _renderSubMenuItem = (item: SlashSubMenu) => {
|
||||
const { name, icon, description } = item;
|
||||
|
||||
const hover = item === this._activeItem;
|
||||
|
||||
return html`<icon-button
|
||||
class="slash-menu-item ${slashItemClassName(item)}"
|
||||
width="100%"
|
||||
height="44px"
|
||||
text=${name}
|
||||
subText=${ifDefined(description)}
|
||||
data-testid="${name}"
|
||||
hover=${hover}
|
||||
@mousemove=${() => {
|
||||
this._activeItem = item;
|
||||
this._openSubMenu(item);
|
||||
}}
|
||||
@touchstart=${() => {
|
||||
isSubMenuItem(item) &&
|
||||
(this._currentSubMenu === item
|
||||
? this._closeSubMenu()
|
||||
: this._openSubMenu(item));
|
||||
}}
|
||||
>
|
||||
${icon && html`<div class="slash-menu-item-icon">${icon}</div>`}
|
||||
<div slot="suffix" style="transform: rotate(-90deg);">
|
||||
${ArrowDownIcon}
|
||||
</div>
|
||||
</icon-button>`;
|
||||
};
|
||||
|
||||
private _subMenuAbortController: AbortController | null = null;
|
||||
|
||||
private _scrollToItem(item: SlashMenuStaticItem) {
|
||||
const shadowRoot = this.shadowRoot;
|
||||
if (!shadowRoot) {
|
||||
return;
|
||||
}
|
||||
|
||||
const text = isGroupDivider(item) ? item.groupName : item.name;
|
||||
|
||||
const ele = shadowRoot.querySelector(`icon-button[text="${text}"]`);
|
||||
if (!ele) {
|
||||
return;
|
||||
}
|
||||
ele.scrollIntoView({
|
||||
block: 'nearest',
|
||||
});
|
||||
}
|
||||
|
||||
override connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
// close all sub menus
|
||||
this.abortController?.signal?.addEventListener('abort', () => {
|
||||
this._subMenuAbortController?.abort();
|
||||
});
|
||||
this.addEventListener('wheel', event => {
|
||||
if (this._currentSubMenu) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
const inlineEditor = getInlineEditorByModel(
|
||||
this.context.rootComponent.host,
|
||||
this.context.model
|
||||
);
|
||||
|
||||
if (!inlineEditor || !inlineEditor.eventSource) {
|
||||
console.error('inlineEditor or eventSource is not found');
|
||||
return;
|
||||
}
|
||||
|
||||
inlineEditor.eventSource.addEventListener(
|
||||
'keydown',
|
||||
event => {
|
||||
if (this._currentSubMenu) return;
|
||||
if (event.isComposing) return;
|
||||
|
||||
const { key, ctrlKey, metaKey, altKey, shiftKey } = event;
|
||||
|
||||
const onlyCmd = (ctrlKey || metaKey) && !altKey && !shiftKey;
|
||||
const onlyShift = shiftKey && !isControlledKeyboardEvent(event);
|
||||
const notControlShift = !(ctrlKey || metaKey || altKey || shiftKey);
|
||||
|
||||
let moveStep = 0;
|
||||
if (
|
||||
(key === 'ArrowUp' && notControlShift) ||
|
||||
(key === 'Tab' && onlyShift) ||
|
||||
(key === 'P' && onlyCmd) ||
|
||||
(key === 'p' && onlyCmd)
|
||||
) {
|
||||
moveStep = -1;
|
||||
}
|
||||
|
||||
if (
|
||||
(key === 'ArrowDown' && notControlShift) ||
|
||||
(key === 'Tab' && notControlShift) ||
|
||||
(key === 'n' && onlyCmd) ||
|
||||
(key === 'N' && onlyCmd)
|
||||
) {
|
||||
moveStep = 1;
|
||||
}
|
||||
|
||||
if (moveStep !== 0) {
|
||||
let itemIndex = this.menu.indexOf(this._activeItem);
|
||||
do {
|
||||
itemIndex =
|
||||
(itemIndex + moveStep + this.menu.length) % this.menu.length;
|
||||
} while (isGroupDivider(this.menu[itemIndex]));
|
||||
|
||||
this._activeItem = this.menu[itemIndex] as typeof this._activeItem;
|
||||
this._scrollToItem(this._activeItem);
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
if (key === 'ArrowRight' && notControlShift) {
|
||||
if (isSubMenuItem(this._activeItem)) {
|
||||
this._openSubMenu(this._activeItem);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
if ((key === 'ArrowLeft' || key === 'Escape') && notControlShift) {
|
||||
this.abortController.abort();
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
if (key === 'Enter' && notControlShift) {
|
||||
if (isSubMenuItem(this._activeItem)) {
|
||||
this._openSubMenu(this._activeItem);
|
||||
} else if (isActionItem(this._activeItem)) {
|
||||
this.context.onClickItem(this._activeItem);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
},
|
||||
{
|
||||
capture: true,
|
||||
signal: this.abortController.signal,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
override disconnectedCallback() {
|
||||
this.abortController.abort();
|
||||
}
|
||||
|
||||
override render() {
|
||||
if (this.menu.length === 0) return nothing;
|
||||
|
||||
const style = styleMap(this.mainMenuStyle ?? { position: 'relative' });
|
||||
|
||||
return html`<div
|
||||
class="slash-menu"
|
||||
style=${style}
|
||||
data-testid=${`sub-menu-${this.depth}`}
|
||||
>
|
||||
${this.menu.map(this._renderItem)}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
override willUpdate(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has('menu') && this.menu.length !== 0) {
|
||||
const firstItem = getFirstNotDividerItem(this.menu);
|
||||
if (!firstItem) {
|
||||
console.error('No item found in slash menu');
|
||||
return;
|
||||
}
|
||||
|
||||
this._activeItem = firstItem;
|
||||
|
||||
// this case happen on query updated
|
||||
this._subMenuAbortController?.abort();
|
||||
}
|
||||
}
|
||||
|
||||
@state()
|
||||
private accessor _activeItem!: SlashMenuActionItem | SlashSubMenu;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor abortController!: AbortController;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor context!: InnerSlashMenuContext;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor depth: number = 0;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor mainMenuStyle: Parameters<typeof styleMap>[0] | null = null;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor menu!: SlashMenuStaticItem[];
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
|
||||
import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
|
||||
import { baseTheme } from '@toeverything/theme';
|
||||
import { css, unsafeCSS } from 'lit';
|
||||
|
||||
export const styles = css`
|
||||
.overlay-mask {
|
||||
pointer-events: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: var(--affine-z-index-popover);
|
||||
}
|
||||
|
||||
.slash-menu {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 4px 8px 8px;
|
||||
width: 258px;
|
||||
overflow-y: auto;
|
||||
font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
|
||||
|
||||
background: ${unsafeCSSVarV2('layer/background/overlayPanel')};
|
||||
box-shadow: ${unsafeCSSVar('overlayPanelShadow')};
|
||||
border-radius: 8px;
|
||||
z-index: var(--affine-z-index-popover);
|
||||
user-select: none;
|
||||
/* transition: max-height 0.2s ease-in-out; */
|
||||
}
|
||||
|
||||
${scrollbarStyle('.slash-menu')}
|
||||
|
||||
.slash-menu-group-name {
|
||||
box-sizing: border-box;
|
||||
padding: 2px 8px;
|
||||
|
||||
font-size: var(--affine-font-xs);
|
||||
font-weight: 500;
|
||||
line-height: var(--affine-line-height);
|
||||
text-align: left;
|
||||
color: var(
|
||||
--light-textColor-textSecondaryColor,
|
||||
var(--textColor-textSecondaryColor, #8e8d91)
|
||||
);
|
||||
}
|
||||
|
||||
.slash-menu-item {
|
||||
padding: 2px 8px 2px 8px;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.slash-menu-item-icon {
|
||||
box-sizing: border-box;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--affine-border-color, #e3e2e4);
|
||||
border-radius: 4px;
|
||||
color: var(--affine-icon-color);
|
||||
background: ${unsafeCSSVarV2('layer/background/overlayPanel')};
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slash-menu-item-icon svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slash-menu-item.ask-ai {
|
||||
color: var(--affine-brand-color);
|
||||
}
|
||||
.slash-menu-item.github .github-icon {
|
||||
color: var(--affine-black);
|
||||
}
|
||||
`;
|
||||
|
||||
export const slashItemToolTipStyle = css`
|
||||
.affine-tooltip {
|
||||
display: flex;
|
||||
padding: 4px 4px 2px 4px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.tooltip-figure svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tooltip-caption {
|
||||
padding-left: 4px;
|
||||
color: var(
|
||||
--light-textColor-textSecondaryColor,
|
||||
var(--textColor-textSecondaryColor, #8e8d91)
|
||||
);
|
||||
font-family: var(--affine-font-family);
|
||||
font-size: var(--affine-font-xs);
|
||||
line-height: var(--affine-line-height);
|
||||
}
|
||||
`;
|
||||
@@ -1,41 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const AttachmentTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1013" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1013)">
|
||||
<rect x="8.5" y="28.5" width="169" height="67" rx="3.5" fill="white" stroke="#E3E2E4"/>
|
||||
<mask id="mask1_16460_1013" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="8" y="28" width="170" height="68">
|
||||
<rect x="8" y="28" width="170" height="68" rx="4" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_16460_1013)">
|
||||
<g filter="url(#filter0_d_16460_1013)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M149.686 42.516C149.796 41.7313 149.251 41.0057 148.47 40.8954L130.084 38.2995C128.913 38.1341 127.829 38.9542 127.665 40.1313L122.298 78.494C122.133 79.671 122.95 80.7593 124.121 80.9248L157.357 85.6174C158.529 85.7828 159.612 84.9627 159.777 83.7856L163.057 60.3418C163.166 59.5571 162.622 58.8315 161.841 58.7212L151.941 57.3234C149.598 56.9926 147.965 54.816 148.294 52.4619L149.686 42.516ZM133.567 59.8003C133.649 59.2118 134.191 58.8017 134.776 58.8844L152.455 61.3805C153.041 61.4632 153.449 62.0074 153.367 62.5959C153.284 63.1844 152.743 63.5945 152.157 63.5118L134.478 61.0157C133.892 60.933 133.484 60.3888 133.567 59.8003ZM133.932 64.923C133.346 64.8403 132.804 65.2504 132.722 65.8389C132.64 66.4274 133.048 66.9716 133.634 67.0543L151.312 69.5504C151.898 69.6331 152.44 69.223 152.522 68.6345C152.604 68.046 152.196 67.5018 151.61 67.4191L133.932 64.923Z" fill="white"/>
|
||||
<path d="M153.295 43.1135C152.819 42.4792 151.818 42.7394 151.708 43.5259L150.416 52.7614C150.251 53.9385 151.067 55.0268 152.239 55.1922L161.432 56.4901C162.215 56.6007 162.74 55.7051 162.264 55.0708L153.295 43.1135Z" fill="white"/>
|
||||
</g>
|
||||
<g clip-path="url(#clip0_16460_1013)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1088 36.804L17.0887 39.8241C16.1371 40.7509 16.1371 42.2492 17.0886 43.1759C18.0457 44.108 19.6014 44.108 20.5584 43.1759L23.5034 40.3144C23.6519 40.1701 23.8893 40.1735 24.0337 40.322C24.178 40.4706 24.1746 40.708 24.026 40.8523L21.0817 43.7132C21.0817 43.7133 21.0818 43.7131 21.0817 43.7132C19.8334 44.9288 17.8136 44.9289 16.5653 43.7132C15.3122 42.4926 15.3116 40.5099 16.5635 39.2886L19.5838 36.2683C20.4645 35.4105 21.8884 35.4106 22.7691 36.2683C23.6548 37.1309 23.6554 38.5332 22.771 39.3965L19.7507 42.4169C19.2376 42.9167 18.4095 42.9166 17.8964 42.4168C17.3777 41.9116 17.3777 41.0884 17.8964 40.5832L20.9956 37.5647C21.1439 37.4202 21.3813 37.4233 21.5259 37.5717C21.6704 37.7201 21.6672 37.9575 21.5189 38.102L18.4197 41.1205C18.2033 41.3312 18.2033 41.6688 18.4197 41.8796C18.6411 42.0952 19.0038 42.0957 19.2259 41.881L22.2458 38.861C22.8298 38.2923 22.8298 37.3744 22.2459 36.8056C21.6569 36.232 20.6984 36.2315 20.1088 36.804Z" fill="#77757D"/>
|
||||
</g>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" font-weight="600" letter-spacing="0em"><tspan x="30" y="43.6364">Rickroll.mp3</tspan></text>
|
||||
</g>
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="10" y="18.6364">Attach a file.</tspan></text>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_16460_1013" x="118.277" y="34.2783" width="48.7936" height="55.3602" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.258824 0 0 0 0 0.254902 0 0 0 0 0.286275 0 0 0 0.18 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16460_1013"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_16460_1013" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_16460_1013">
|
||||
<rect width="12" height="12" fill="white" transform="translate(14 34)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,13 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const BoldTextTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_971" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_971)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="43.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="55.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="71.6364">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="83.6364">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="95.6364">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="107.636">other users. </tspan><tspan x="8" y="123.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="135.636">those changes to their version of the document.</tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" font-weight="bold" letter-spacing="0px"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data. </tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,15 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const BulletedListTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_934" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_934)">
|
||||
<circle cx="14" cy="26" r="1.5" fill="#1C81D9"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="22" y="29.6364">Here's an example of a bulleted list.</tspan></text>
|
||||
<circle cx="14" cy="42" r="1.5" fill="#1C81D9"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="22" y="45.6364">You can list your plans such as this</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,17 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const CodeBlockTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_915" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_915)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="var(--affine-font-code-family)" font-size="11" letter-spacing="0em"><tspan x="47.5742" y="17.46"> </tspan><tspan x="126.723" y="17.46">: </tspan><tspan x="166.297" y="17.46"> { </tspan><tspan x="8" y="32.46"> </tspan><tspan x="100.34" y="32.46"> helloTo </tspan><tspan x="166.297" y="32.46"> "World" </tspan><tspan x="8" y="47.46"> </tspan><tspan x="54.1699" y="47.46"> body: </tspan><tspan x="126.723" y="47.46"> </tspan><tspan x="159.701" y="47.46"> { </tspan><tspan x="8" y="62.46"> </tspan><tspan x="87.1484" y="62.46">(</tspan><tspan x="219.062" y="62.46">) </tspan><tspan x="8" y="77.46">} </tspan><tspan x="8" y="92.46">}</tspan></text>
|
||||
<text fill="#0782A0" xml:space="preserve" style="white-space: pre" font-family="var(--affine-font-code-family)" font-size="11" letter-spacing="0em"><tspan x="8" y="17.46">struct</tspan><tspan x="73.957" y="32.46"> var</tspan><tspan x="159.701" y="32.46">=</tspan><tspan x="34.3828" y="47.46">var</tspan><tspan x="100.34" y="47.46">some</tspan><tspan x="139.914" y="62.46">\(</tspan></text>
|
||||
<text fill="#842ED3" xml:space="preserve" style="white-space: pre" font-family="var(--affine-font-code-family)" font-size="11" letter-spacing="0em"><tspan x="54.1699" y="17.46">ContentView</tspan></text>
|
||||
<text fill="#C62222" xml:space="preserve" style="white-space: pre" font-family="var(--affine-font-code-family)" font-size="11" letter-spacing="0em"><tspan x="139.914" y="17.46">View</tspan><tspan x="34.3828" y="32.46">@State</tspan><tspan x="133.318" y="47.46">View</tspan></text>
|
||||
<text fill="#2159D3" xml:space="preserve" style="white-space: pre" font-family="var(--affine-font-code-family)" font-size="11" letter-spacing="0em"><tspan x="60.7656" y="62.46">Text</tspan></text>
|
||||
<text fill="#D34F0B" xml:space="preserve" style="white-space: pre" font-family="var(--affine-font-code-family)" font-size="11" letter-spacing="0em"><tspan x="93.7441" y="62.46">"Hello </tspan><tspan x="153.105" y="62.46">helloTo)!"</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,13 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const CopyTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1240" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1240)">
|
||||
<path d="M4 7C4 5.89543 4.89543 5 6 5H172V32H6C4.89543 32 4 31.1046 4 30V7Z" fill="#F4F4F5"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data. </tspan><tspan x="8" y="43.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="55.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="71.6364">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="83.6364">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="95.6364">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="107.636">other users. </tspan><tspan x="8" y="123.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="135.636">those changes to their version of the document.</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,14 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const DeleteTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1246" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1246)">
|
||||
<path d="M4 7C4 5.89543 4.89543 5 6 5H172V32H6C4.89543 32 4 31.1046 4 30V7Z" fill="#FDECEB"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="43.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="55.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="71.6364">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="83.6364">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="95.6364">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="107.636">other users. </tspan><tspan x="8" y="123.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="135.636">those changes to their version of the document.</tspan></text>
|
||||
<text fill="#EB4335" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data. </tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,13 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const DividerTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_928" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_928)">
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="16.6364">In a decentralized system, we can have a </tspan><tspan x="8" y="30.6364">kaleidoscopic complexity to our data. </tspan><tspan x="8" y="54.6364">Any user may have a different perspective </tspan><tspan x="8" y="68.6364">on what data they either have, choose to </tspan><tspan x="8" y="82.6364">share, or accept. </tspan><tspan x="8" y="106.636">For example, one user’s edits to a </tspan><tspan x="8" y="120.636">document might be on their laptop on an </tspan><tspan x="8" y="134.636">airplane; when the plane lands and the </tspan><tspan x="8" y="148.636">computer reconnects, those changes are </tspan><tspan x="8" y="162.636">distributed to other users. </tspan><tspan x="8" y="186.636">Other users might choose to accept all, </tspan><tspan x="8" y="200.636">some, or none of those changes to their </tspan><tspan x="8" y="214.636">version of the document.</tspan></text>
|
||||
<line x1="8.25" y1="40.75" x2="169.75" y2="40.75" stroke="#E3E2E4" stroke-width="0.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,28 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const EdgelessTooltip = 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" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1252" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="106">
|
||||
<rect width="170" height="106" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1252)">
|
||||
<rect x="100.5" y="42.6565" width="141" height="51" stroke="#1E96EB" stroke-width="3" stroke-dasharray="5 5"/>
|
||||
<circle cx="101.5" cy="43.5" r="6" fill="white" stroke="#1E96EB" stroke-width="3"/>
|
||||
<rect x="105" y="8" width="59" height="26" rx="10" fill="black" fill-opacity="0.1"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="12" letter-spacing="0em"><tspan x="117" y="25.3636">Group</tspan></text>
|
||||
<mask id="mask1_16460_1252" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="98" height="106">
|
||||
<path d="M0 1.5C0 0.947717 0.447715 0.5 1 0.5H96.2527C96.8927 0.5 97.368 1.09278 97.2288 1.71742L74.1743 105.217C74.0725 105.675 73.6667 106 73.1982 106H0.999999C0.447715 106 0 105.552 0 105V1.5Z" fill="#F4F4F5"/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_16460_1252)">
|
||||
<path d="M0 1.5C0 0.947717 0.447715 0.5 1 0.5H96.2527C96.8927 0.5 97.368 1.09278 97.2288 1.71742L74.1743 105.217C74.0725 105.675 73.6667 106 73.1982 106H0.999999C0.447715 106 0 105.552 0 105V1.5Z" fill="#F4F4F5"/>
|
||||
<rect x="23" y="41.6565" width="142" height="52" rx="9" stroke="black" stroke-opacity="0.5" stroke-width="2"/>
|
||||
<path d="M23 12.4244C23 10.0964 24.8829 8.20923 27.2056 8.20923H71.7846C74.1073 8.20923 75.9902 10.0964 75.9902 12.4244V29.2849C75.9902 31.6128 74.1073 33.5 71.7846 33.5H27.2056C24.8829 33.5 23 31.6128 23 29.2849V12.4244Z" fill="black" fill-opacity="0.8"/>
|
||||
<path d="M64.0353 25.2043C63.415 25.2043 62.8798 25.0674 62.4299 24.7935C61.9828 24.5169 61.6377 24.1313 61.3946 23.6367C61.1543 23.1393 61.0341 22.5608 61.0341 21.9014C61.0341 21.2419 61.1543 20.6606 61.3946 20.1577C61.6377 19.6519 61.9759 19.2579 62.409 18.9756C62.8449 18.6906 63.3535 18.5481 63.9347 18.5481C64.27 18.5481 64.6012 18.604 64.9281 18.7158C65.2551 18.8275 65.5527 19.0092 65.8209 19.2607C66.0892 19.5094 66.303 19.8391 66.4622 20.2499C66.6215 20.6606 66.7012 21.1664 66.7012 21.7672V22.1864H61.7383V21.3313H65.6952C65.6952 20.968 65.6225 20.6439 65.4772 20.3589C65.3347 20.0738 65.1307 19.8489 64.8652 19.684C64.6026 19.5191 64.2924 19.4367 63.9347 19.4367C63.5407 19.4367 63.1998 19.5345 62.912 19.7301C62.6269 19.9229 62.4076 20.1744 62.2539 20.4846C62.1002 20.7948 62.0234 21.1273 62.0234 21.4822V22.0523C62.0234 22.5385 62.1072 22.9506 62.2748 23.2888C62.4453 23.6241 62.6814 23.8798 62.9832 24.0558C63.285 24.2291 63.6357 24.3157 64.0353 24.3157C64.2952 24.3157 64.5299 24.2794 64.7395 24.2067C64.9519 24.1313 65.1349 24.0195 65.2886 23.8714C65.4423 23.7205 65.561 23.5333 65.6449 23.3097L66.6006 23.578C66.5 23.9021 66.3309 24.1872 66.0934 24.4331C65.8558 24.6762 65.5624 24.8662 65.2131 25.0031C64.8638 25.1373 64.4712 25.2043 64.0353 25.2043Z" fill="white"/>
|
||||
<path d="M51.0779 25.0702V18.6319H52.0336V19.6379H52.1174C52.2515 19.2942 52.4681 19.0273 52.7671 18.8373C53.0661 18.6445 53.4252 18.5481 53.8443 18.5481C54.2691 18.5481 54.6226 18.6445 54.9048 18.8373C55.1898 19.0273 55.412 19.2942 55.5713 19.6379H55.6383C55.8032 19.3054 56.0505 19.0413 56.3802 18.8457C56.71 18.6473 57.1054 18.5481 57.5665 18.5481C58.1421 18.5481 58.613 18.7283 58.979 19.0888C59.3451 19.4465 59.5281 20.004 59.5281 20.7612V25.0702H58.5389V20.7612C58.5389 20.2862 58.409 19.9467 58.1491 19.7427C57.8892 19.5387 57.5832 19.4367 57.2311 19.4367C56.7784 19.4367 56.4278 19.5736 56.179 19.8475C55.9303 20.1185 55.806 20.4622 55.806 20.8786V25.0702H54.8V20.6606C54.8 20.2946 54.6813 19.9998 54.4437 19.7762C54.2062 19.5499 53.9002 19.4367 53.5258 19.4367C53.2687 19.4367 53.0284 19.5052 52.8048 19.6421C52.5841 19.779 52.4052 19.969 52.2683 20.2121C52.1342 20.4525 52.0671 20.7305 52.0671 21.0463V25.0702H51.0779Z" fill="white"/>
|
||||
<path d="M46.3224 25.2211C45.9144 25.2211 45.5442 25.1442 45.2116 24.9905C44.8791 24.8341 44.615 24.6091 44.4194 24.3157C44.2238 24.0195 44.126 23.6618 44.126 23.2427C44.126 22.8738 44.1987 22.5748 44.344 22.3457C44.4893 22.1137 44.6835 21.9321 44.9266 21.8008C45.1697 21.6694 45.438 21.5716 45.7314 21.5073C46.0276 21.4403 46.3252 21.3872 46.6242 21.3481C47.0154 21.2978 47.3326 21.26 47.5757 21.2349C47.8216 21.207 48.0004 21.1608 48.1122 21.0966C48.2268 21.0323 48.284 20.9205 48.284 20.7612V20.7277C48.284 20.3141 48.1709 19.9928 47.9445 19.7637C47.721 19.5345 47.3815 19.4199 46.926 19.4199C46.4537 19.4199 46.0835 19.5233 45.8152 19.7301C45.547 19.9369 45.3583 20.1577 45.2493 20.3924L44.3104 20.0571C44.4781 19.6658 44.7017 19.3613 44.9811 19.1433C45.2633 18.9225 45.5707 18.7689 45.9032 18.6822C46.2386 18.5928 46.5683 18.5481 46.8924 18.5481C47.0992 18.5481 47.3368 18.5732 47.605 18.6235C47.8761 18.671 48.1373 18.7702 48.3888 18.9211C48.6431 19.072 48.8541 19.2998 49.0218 19.6044C49.1894 19.909 49.2733 20.3169 49.2733 20.8283V25.0702H48.284V24.1983H48.2337C48.1667 24.3381 48.0549 24.4876 47.8984 24.6468C47.7419 24.8061 47.5338 24.9416 47.2739 25.0534C47.014 25.1652 46.6968 25.2211 46.3224 25.2211ZM46.4733 24.3325C46.8645 24.3325 47.1942 24.2556 47.4625 24.1019C47.7336 23.9482 47.9375 23.7498 48.0745 23.5067C48.2142 23.2636 48.284 23.0079 48.284 22.7397V21.8343C48.2421 21.8846 48.1499 21.9307 48.0074 21.9726C47.8677 22.0117 47.7056 22.0467 47.5212 22.0774C47.3395 22.1053 47.1621 22.1305 46.9889 22.1528C46.8184 22.1724 46.6801 22.1892 46.5739 22.2031C46.3168 22.2367 46.0765 22.2912 45.8529 22.3666C45.6322 22.4393 45.4533 22.5497 45.3164 22.6978C45.1823 22.8431 45.1152 23.0415 45.1152 23.293C45.1152 23.6367 45.2424 23.8965 45.4967 24.0726C45.7537 24.2458 46.0793 24.3325 46.4733 24.3325Z" fill="white"/>
|
||||
<path d="M40.0364 25.0704V18.6321H40.9921V19.6045H41.0592C41.1765 19.286 41.3889 19.0275 41.6963 18.8291C42.0037 18.6307 42.3502 18.5315 42.7358 18.5315C42.8084 18.5315 42.8993 18.5329 43.0082 18.5357C43.1172 18.5385 43.1997 18.5427 43.2556 18.5483V19.5542C43.222 19.5459 43.1452 19.5333 43.025 19.5165C42.9077 19.497 42.7833 19.4872 42.652 19.4872C42.339 19.4872 42.0596 19.5528 41.8136 19.6842C41.5705 19.8127 41.3777 19.9916 41.2352 20.2207C41.0955 20.447 41.0256 20.7055 41.0256 20.9961V25.0704H40.0364Z" fill="white"/>
|
||||
<path d="M33.3126 25.0704V16.4861H38.4598V17.4082H34.3521V20.3088H38.0742V21.2309H34.3521V25.0704H33.3126Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,11 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const EmptyTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_864" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_864)">
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
File diff suppressed because one or more lines are too long
@@ -1,23 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const GithubRepoTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1028" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1028)">
|
||||
<rect x="6.5" y="28.5" width="169" height="67" rx="3.5" fill="white" stroke="#E3E2E4"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="9" letter-spacing="0em"><tspan x="18" y="46.7727">toeverything/</tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="9" font-weight="bold" letter-spacing="0em"><tspan x="75.041" y="46.7727">AFFiNE</tspan></text>
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" letter-spacing="0em"><tspan x="18" y="57.5455">Write, Draw and Plan All at Once.</tspan></text>
|
||||
<rect x="146" y="38" width="24" height="24" fill="url(#pattern0_16460_1028)"/>
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="10" y="18.6364">Link to a GitHub repository.</tspan></text>
|
||||
</g>
|
||||
<defs>
|
||||
<pattern id="pattern0_16460_1028" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image0_16460_1028" transform="scale(0.0208333)"/>
|
||||
</pattern>
|
||||
<image id="image0_16460_1028" width="48" height="48" xlink:href="data:image/png;base64,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"/>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,13 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const Heading1Tooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_873" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_873)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="28" font-weight="bold" letter-spacing="-0.24px"><tspan x="8" y="34.1818">Heading 1</tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="51.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="63.6364">complexity to our data. </tspan><tspan x="8" y="79.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="91.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="107.636">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="119.636">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="131.636">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="143.636">other users. </tspan><tspan x="8" y="159.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="171.636">those changes to their version of the document.</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,13 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const Heading2Tooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_880" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_880)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="26" font-weight="600" letter-spacing="-0.24px"><tspan x="8" y="33.4545">Heading 2</tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="51.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="63.6364">complexity to our data. </tspan><tspan x="8" y="79.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="91.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="107.636">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="119.636">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="131.636">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="143.636">other users. </tspan><tspan x="8" y="159.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="171.636">those changes to their version of the document.</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,13 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const Heading3Tooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_887" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_887)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="24" font-weight="600" letter-spacing="-0.24px"><tspan x="8" y="30.7273">Heading 3</tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="47.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="59.6364">complexity to our data. </tspan><tspan x="8" y="75.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="87.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="103.636">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="115.636">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="127.636">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="139.636">other users. </tspan><tspan x="8" y="155.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="167.636">those changes to their version of the document.</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,13 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const Heading4Tooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_894" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_894)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="22" font-weight="600" letter-spacing="0.24px"><tspan x="8" y="29">Heading 4</tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="45.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="57.6364">complexity to our data. </tspan><tspan x="8" y="73.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="85.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="101.636">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="113.636">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="125.636">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="137.636">other users. </tspan><tspan x="8" y="153.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="165.636">those changes to their version of the document.</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,13 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const Heading5Tooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_901" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_901)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="20" font-weight="600" letter-spacing="0.24px"><tspan x="8" y="27.2727">Heading 5</tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="43.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="55.6364">complexity to our data. </tspan><tspan x="8" y="71.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="83.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="99.6364">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="111.636">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="123.636">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="135.636">other users. </tspan><tspan x="8" y="151.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="163.636">those changes to their version of the document.</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,13 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const Heading6Tooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_908" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_908)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="18" font-weight="600" letter-spacing="0.24px"><tspan x="8" y="25.5455">Heading 6</tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="41.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="53.6364">complexity to our data. </tspan><tspan x="8" y="69.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="81.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="97.6364">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="109.636">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="121.636">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="133.636">other users. </tspan><tspan x="8" y="149.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="161.636">those changes to their version of the document.</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,243 +0,0 @@
|
||||
import type { TemplateResult } from 'lit';
|
||||
|
||||
import { AttachmentTooltip } from './attachment.js';
|
||||
import { BoldTextTooltip } from './bold-text.js';
|
||||
import { BulletedListTooltip } from './bulleted-list.js';
|
||||
import { CodeBlockTooltip } from './code-block.js';
|
||||
import { CopyTooltip } from './copy.js';
|
||||
import { DeleteTooltip } from './delete.js';
|
||||
import { DividerTooltip } from './divider.js';
|
||||
import { EdgelessTooltip } from './edgeless.js';
|
||||
import { FigmaTooltip } from './figma.js';
|
||||
import { GithubRepoTooltip } from './github-repo.js';
|
||||
import { Heading1Tooltip } from './heading-1.js';
|
||||
import { Heading2Tooltip } from './heading-2.js';
|
||||
import { Heading3Tooltip } from './heading-3.js';
|
||||
import { Heading4Tooltip } from './heading-4.js';
|
||||
import { Heading5Tooltip } from './heading-5.js';
|
||||
import { Heading6Tooltip } from './heading-6.js';
|
||||
import { ItalicTooltip } from './italic.js';
|
||||
import { KanbanViewTooltip } from './kanban-view.js';
|
||||
import { LinearTooltip } from './linear.js';
|
||||
import { LinkTooltip } from './link.js';
|
||||
import { LinkDocTooltip } from './link-doc.js';
|
||||
import { MoveDownTooltip } from './move-down.js';
|
||||
import { MoveUpTooltip } from './move-up.js';
|
||||
import { NewDocTooltip } from './new-doc.js';
|
||||
import { NowTooltip } from './now.js';
|
||||
import { NumberedListTooltip } from './numbered-list.js';
|
||||
import { PDFTooltip } from './pdf.js';
|
||||
import { PhotoTooltip } from './photo.js';
|
||||
import { QuoteTooltip } from './quote.js';
|
||||
import { StrikethroughTooltip } from './strikethrough.js';
|
||||
import { TableViewTooltip } from './table-view.js';
|
||||
import { TextTooltip } from './text.js';
|
||||
import { ToDoListTooltip } from './to-do-list.js';
|
||||
import { TodayTooltip } from './today.js';
|
||||
import { TomorrowTooltip } from './tomorrow.js';
|
||||
import { TweetTooltip } from './tweet.js';
|
||||
import { UnderlineTooltip } from './underline.js';
|
||||
import { YesterdayTooltip } from './yesterday.js';
|
||||
import { YoutubeVideoTooltip } from './youtube-video.js';
|
||||
|
||||
export type SlashMenuTooltip = {
|
||||
figure: TemplateResult;
|
||||
caption: string;
|
||||
};
|
||||
|
||||
export const slashMenuToolTips: Record<string, SlashMenuTooltip> = {
|
||||
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',
|
||||
},
|
||||
|
||||
'To-do List': {
|
||||
figure: ToDoListTooltip,
|
||||
caption: 'To-do 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',
|
||||
},
|
||||
|
||||
'Linked Doc': {
|
||||
figure: LinkDocTooltip,
|
||||
caption: 'Link Doc',
|
||||
},
|
||||
|
||||
Link: {
|
||||
figure: LinkTooltip,
|
||||
caption: 'Link',
|
||||
},
|
||||
|
||||
Attachment: {
|
||||
figure: AttachmentTooltip,
|
||||
caption: 'Attachment',
|
||||
},
|
||||
|
||||
PDF: {
|
||||
figure: PDFTooltip,
|
||||
caption: 'PDF',
|
||||
},
|
||||
|
||||
Github: {
|
||||
figure: GithubRepoTooltip,
|
||||
caption: 'GitHub Repo',
|
||||
},
|
||||
|
||||
YouTube: {
|
||||
figure: YoutubeVideoTooltip,
|
||||
caption: 'YouTube Video',
|
||||
},
|
||||
|
||||
Image: {
|
||||
figure: PhotoTooltip,
|
||||
caption: 'Photo',
|
||||
},
|
||||
|
||||
'X (Twitter)': {
|
||||
figure: TweetTooltip,
|
||||
caption: 'Tweet',
|
||||
},
|
||||
|
||||
Figma: {
|
||||
figure: FigmaTooltip,
|
||||
caption: 'Figma',
|
||||
},
|
||||
|
||||
Linear: {
|
||||
figure: LinearTooltip,
|
||||
caption: 'Linear',
|
||||
},
|
||||
|
||||
Today: {
|
||||
figure: TodayTooltip,
|
||||
caption: 'Today',
|
||||
},
|
||||
|
||||
Tomorrow: {
|
||||
figure: TomorrowTooltip,
|
||||
caption: 'Tomorrow',
|
||||
},
|
||||
|
||||
Yesterday: {
|
||||
figure: YesterdayTooltip,
|
||||
caption: 'Yesterday',
|
||||
},
|
||||
|
||||
Now: {
|
||||
figure: NowTooltip,
|
||||
caption: 'Now',
|
||||
},
|
||||
|
||||
'Table View': {
|
||||
figure: TableViewTooltip,
|
||||
caption: 'Table View',
|
||||
},
|
||||
|
||||
'Kanban View': {
|
||||
figure: KanbanViewTooltip,
|
||||
caption: 'Kanban View',
|
||||
},
|
||||
|
||||
'Move Up': {
|
||||
figure: MoveUpTooltip,
|
||||
caption: 'Move Up',
|
||||
},
|
||||
|
||||
'Move Down': {
|
||||
figure: MoveDownTooltip,
|
||||
caption: 'Move Down',
|
||||
},
|
||||
|
||||
Copy: {
|
||||
figure: CopyTooltip,
|
||||
caption: 'Copy / Duplicate',
|
||||
},
|
||||
|
||||
Delete: {
|
||||
figure: DeleteTooltip,
|
||||
caption: 'Delete',
|
||||
},
|
||||
|
||||
'Group & Frame': {
|
||||
figure: EdgelessTooltip,
|
||||
caption: 'Edgeless',
|
||||
},
|
||||
};
|
||||
@@ -1,13 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const ItalicTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_976" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_976)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="43.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="55.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="71.6364">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="83.6364">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="95.6364">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="107.636">other users. </tspan><tspan x="8" y="123.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="135.636">those changes to their version of the document.</tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" font-style="italic" letter-spacing="0px"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data. </tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,80 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const KanbanViewTooltip = 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" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1185" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="106">
|
||||
<rect width="170" height="106" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1185)">
|
||||
<rect x="8.5" y="26.5" width="169" height="84" rx="3.5" fill="white" stroke="#E3E2E4"/>
|
||||
<mask id="mask1_16460_1185" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="27" width="168" height="83">
|
||||
<rect x="9" y="27" width="168" height="83" rx="4" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_16460_1185)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="9" font-weight="500" letter-spacing="0em"><tspan x="18" y="42.7727">Untitled Kanban</tspan></text>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="18" y="55.8182">Ungroups</tspan></text>
|
||||
<rect x="84" y="50" width="31" height="8" rx="1" fill="#F3F0FF"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="86" y="55.8182">In Progress</tspan></text>
|
||||
<rect x="150" y="50" width="17" height="8" rx="1" fill="#DFF4E8"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="152" y="55.8182">Done</tspan></text>
|
||||
<rect x="16.25" y="60.25" width="59.5" height="53.5" rx="1.75" fill="white" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="21" y="68.8182">Task 5</tspan></text>
|
||||
<rect x="20" y="88" width="8" height="8" rx="1" fill="#EEEEEE"/>
|
||||
<g clip-path="url(#clip0_16460_1185)">
|
||||
<g clip-path="url(#clip1_16460_1185)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8125 90C21.8125 89.8964 21.8964 89.8125 22 89.8125H26C26.1036 89.8125 26.1875 89.8964 26.1875 90V90.6667C26.1875 90.7702 26.1036 90.8542 26 90.8542C25.8964 90.8542 25.8125 90.7702 25.8125 90.6667V90.1875H24.1875V93.8125H25C25.1036 93.8125 25.1875 93.8964 25.1875 94C25.1875 94.1036 25.1036 94.1875 25 94.1875H23C22.8964 94.1875 22.8125 94.1036 22.8125 94C22.8125 93.8964 22.8964 93.8125 23 93.8125H23.8125V90.1875H22.1875V90.6667C22.1875 90.7702 22.1036 90.8542 22 90.8542C21.8964 90.8542 21.8125 90.7702 21.8125 90.6667V90Z" fill="#77757D"/>
|
||||
</g>
|
||||
</g>
|
||||
<rect x="82.25" y="60.25" width="59.5" height="53.5" rx="1.75" fill="white" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<rect x="148.25" y="60.25" width="59.5" height="53.5" rx="1.75" fill="white" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<line x1="16" y1="99.75" x2="76" y2="99.75" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<line x1="82" y1="99.75" x2="142" y2="99.75" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<line x1="148" y1="99.75" x2="208" y2="99.75" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="87" y="68.8182">Task 1</tspan></text>
|
||||
<rect x="86" y="88" width="8" height="8" rx="1" fill="#EEEEEE"/>
|
||||
<g clip-path="url(#clip2_16460_1185)">
|
||||
<g clip-path="url(#clip3_16460_1185)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M87.8125 90C87.8125 89.8964 87.8964 89.8125 88 89.8125H92C92.1036 89.8125 92.1875 89.8964 92.1875 90V90.6667C92.1875 90.7702 92.1036 90.8542 92 90.8542C91.8964 90.8542 91.8125 90.7702 91.8125 90.6667V90.1875H90.1875V93.8125H91C91.1036 93.8125 91.1875 93.8964 91.1875 94C91.1875 94.1036 91.1036 94.1875 91 94.1875H89C88.8964 94.1875 88.8125 94.1036 88.8125 94C88.8125 93.8964 88.8964 93.8125 89 93.8125H89.8125V90.1875H88.1875V90.6667C88.1875 90.7702 88.1036 90.8542 88 90.8542C87.8964 90.8542 87.8125 90.7702 87.8125 90.6667V90Z" fill="#77757D"/>
|
||||
</g>
|
||||
</g>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="153" y="68.8182">Task 4</tspan></text>
|
||||
<rect x="152" y="88" width="8" height="8" rx="1" fill="#EEEEEE"/>
|
||||
<g clip-path="url(#clip4_16460_1185)">
|
||||
<g clip-path="url(#clip5_16460_1185)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M153.812 90C153.812 89.8964 153.896 89.8125 154 89.8125H158C158.104 89.8125 158.188 89.8964 158.188 90V90.6667C158.188 90.7702 158.104 90.8542 158 90.8542C157.896 90.8542 157.812 90.7702 157.812 90.6667V90.1875H156.188V93.8125H157C157.104 93.8125 157.188 93.8964 157.188 94C157.188 94.1036 157.104 94.1875 157 94.1875H155C154.896 94.1875 154.812 94.1036 154.812 94C154.812 93.8964 154.896 93.8125 155 93.8125H155.812V90.1875H154.188V90.6667C154.188 90.7702 154.104 90.8542 154 90.8542C153.896 90.8542 153.812 90.7702 153.812 90.6667V90Z" fill="#77757D"/>
|
||||
</g>
|
||||
</g>
|
||||
<rect x="43" y="50" width="8" height="8" rx="1" fill="#F5F5F5"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="45.5" y="55.8182">1</tspan></text>
|
||||
<rect x="117" y="50" width="8" height="8" rx="1" fill="#F5F5F5"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="119.5" y="55.8182">1</tspan></text>
|
||||
<rect x="169" y="50" width="8" height="8" rx="1" fill="#F5F5F5"/>
|
||||
<rect x="86" y="103" width="31" height="8" rx="1" fill="#F3F0FF"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="88" y="108.818">In Progress</tspan></text>
|
||||
<rect x="152" y="103" width="17" height="8" rx="1" fill="#DFF4E8"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="154" y="108.818">Done</tspan></text>
|
||||
</g>
|
||||
<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">Visualize data in a dashboard.</tspan></text>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(21 89)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(21 89)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip2_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(87 89)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip3_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(87 89)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip4_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(153 89)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip5_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(153 89)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,49 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const LinearTooltip = html`<svg width="170" height="106" viewBox="0 0 170 106" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect width="170" height="106" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1097" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="106">
|
||||
<rect width="170" height="106" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1097)">
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="10" y="18.6364">Insert a Linear issue.</tspan></text>
|
||||
<rect x="8.5" y="28.5" width="169" height="84" rx="3.5" fill="white" stroke="#E3E2E4"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="9" font-weight="500" letter-spacing="0em"><tspan x="18" y="44.7727">Change theme following phone case color</tspan></text>
|
||||
<g clip-path="url(#clip0_16460_1097)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5474 50.5324C20.6694 50.6545 20.6694 50.8523 20.5474 50.9744L19.7835 51.7383C19.6614 51.8603 19.4636 51.8603 19.3415 51.7383C19.2195 51.6162 19.2195 51.4184 19.3415 51.2963L20.1054 50.5324C20.2275 50.4104 20.4253 50.4104 20.5474 50.5324ZM25.4526 50.5324C25.5747 50.4104 25.7725 50.4104 25.8946 50.5324L26.6585 51.2963C26.7805 51.4184 26.7805 51.6162 26.6585 51.7383C26.5364 51.8603 26.3386 51.8603 26.2165 51.7383L25.4526 50.9744C25.3306 50.8523 25.3306 50.6545 25.4526 50.5324ZM23 51.4479C21.4851 51.4479 20.2569 52.676 20.2569 54.1909C20.2569 55.7059 21.4851 56.934 23 56.934C24.5149 56.934 25.7431 55.7059 25.7431 54.1909C25.7431 52.676 24.5149 51.4479 23 51.4479ZM19.6319 54.1909C19.6319 52.3308 21.1399 50.8229 23 50.8229C24.8601 50.8229 26.3681 52.3308 26.3681 54.1909C26.3681 56.051 24.8601 57.559 23 57.559C21.1399 57.559 19.6319 56.051 19.6319 54.1909Z" fill="#8E8D91"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.3321 53.316C24.4541 53.4381 24.4541 53.6359 24.3321 53.758L22.8506 55.2394C22.7286 55.3615 22.5307 55.3615 22.4087 55.2394L21.6679 54.4987C21.5459 54.3767 21.5459 54.1788 21.6679 54.0568C21.79 53.9347 21.9878 53.9347 22.1099 54.0568L22.6296 54.5765L23.8901 53.316C24.0122 53.194 24.21 53.194 24.3321 53.316Z" fill="#8E8D91"/>
|
||||
</g>
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" letter-spacing="0em"><tspan x="30" y="56.5455">Work in Progress · </tspan></text>
|
||||
<g clip-path="url(#clip1_16460_1097)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M96.6591 50.3635C96.8266 50.4054 96.9284 50.5751 96.8865 50.7425L96.4627 52.4375H98.3185L98.7802 50.5909C98.822 50.4235 98.9917 50.3217 99.1591 50.3635C99.3266 50.4054 99.4284 50.5751 99.3865 50.7425L98.9627 52.4375H100.333C100.506 52.4375 100.646 52.5774 100.646 52.75C100.646 52.9226 100.506 53.0625 100.333 53.0625H98.8065L98.3377 54.9375H99.5C99.6726 54.9375 99.8125 55.0774 99.8125 55.25C99.8125 55.4226 99.6726 55.5625 99.5 55.5625H98.1815L97.7198 57.4092C97.678 57.5766 97.5083 57.6784 97.3409 57.6365C97.1734 57.5947 97.0716 57.425 97.1135 57.2576L97.5373 55.5625H95.6815L95.2198 57.4092C95.178 57.5766 95.0083 57.6784 94.8409 57.6365C94.6734 57.5947 94.5716 57.425 94.6135 57.2576L95.0373 55.5625H93.6667C93.4941 55.5625 93.3542 55.4226 93.3542 55.25C93.3542 55.0774 93.4941 54.9375 93.6667 54.9375H95.1935L95.6623 53.0625H94.5C94.3274 53.0625 94.1875 52.9226 94.1875 52.75C94.1875 52.5774 94.3274 52.4375 94.5 52.4375H95.8185L96.2802 50.5909C96.322 50.4235 96.4917 50.3217 96.6591 50.3635ZM96.3065 53.0625L95.8377 54.9375H97.6935L98.1623 53.0625H96.3065Z" fill="#8E8D91"/>
|
||||
</g>
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" letter-spacing="0em"><tspan x="104" y="56.5455">High</tspan></text>
|
||||
<rect x="16" y="65" width="12" height="12" rx="6" fill="url(#pattern0_16460_1097)"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" font-weight="500" letter-spacing="0em"><tspan x="32" y="71.5455">qpomelo</tspan></text>
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" letter-spacing="0em"><tspan x="32" y="79.5455">re-assigned to </tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" font-weight="500" letter-spacing="0em"><tspan x="82.1006" y="79.5455">tsiheng</tspan></text>
|
||||
<rect x="16" y="87" width="12" height="12" rx="6" fill="url(#pattern1_16460_1097)"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" font-weight="500" letter-spacing="0em"><tspan x="32" y="93.5455">tsiheng</tspan></text>
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" letter-spacing="0em"><tspan x="32" y="101.545">re-assigned to </tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" font-weight="500" letter-spacing="0em"><tspan x="82.1006" y="101.545">qpomelo</tspan></text>
|
||||
<path d="M22 79V85" stroke="#E3E2E4" stroke-width="0.5" stroke-linecap="round" stroke-dasharray="5 5"/>
|
||||
<path d="M22 101V107" stroke="#E3E2E4" stroke-width="0.5" stroke-linecap="round" stroke-dasharray="5 5"/>
|
||||
</g>
|
||||
<defs>
|
||||
<pattern id="pattern0_16460_1097" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image0_16460_1097" transform="scale(0.0416667)"/>
|
||||
</pattern>
|
||||
<pattern id="pattern1_16460_1097" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image1_16460_1097" transform="scale(0.0416667)"/>
|
||||
</pattern>
|
||||
<clipPath id="clip0_16460_1097">
|
||||
<rect width="10" height="10" fill="white" transform="translate(18 49)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_16460_1097">
|
||||
<rect width="10" height="10" fill="white" transform="translate(92 49)"/>
|
||||
</clipPath>
|
||||
<image id="image0_16460_1097" width="24" height="24" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAaaSURBVHgBfVVLbFzlFf7u+854ZnznmbGd2OMHxDYxOIkbkjaUCFUiVChAV3TBw111l6KsWDlWVdFdvGHTDemiUklVkhTRqmpLE6pAoJAYWa7j2COPY3vG9sQz987c99xHjweCAgSu5mo0/+j/zjnf+c53GHzP8/zZi4rH4DTH4ATDMgUOKJTf/z3cpqaOPfeL2UKhcFnq4C69/sKx0ndhMA86PHn2YoEJ/bc4hjvB8Rw4jgPbfhk0lz6FGHp49Imn8LORNKS4jAv/rZxXXXZ6ZvLbgbhvHpz69eXTDIM/cgI/LIgiBEmEGJEgRwXEeEDoGkSmdwDH8yJGJRVJvoWgQxm/Udx4lb9bdsrl0vX78dj7fzz7xrtTIcfOsKKg8AQsRyXEYzKyCRkj2Rgm+hSEggCuZWN/zEZ1bR2VhUU8vk+Af2dOAcOeO3r81NQDKzj1m3dPE2G/hcCDAlDmEn7aZePZ8QyGEyGOZFtIZJLwfQ+PxDzY1QrYgEEYBhApEd63cO3TOURHf3Ti6Jk3tfl33rz+VYAXz10sgOGJFkEGZQjuiyBqi8czeRMjB/qRymfRnZQxRsHMpgVTtxDSXY8gTMPGk88cxzvvXUP86Zdhr986mrH0t9fXl9U2RRwTmYpEREWSRfAEzAgcQobDCIE5BIaAPkEAhppstAKsV3YQshyi6RSEaBSRVBqe4+KlM2cQz+bg3r6h8JH4W20VvXju34WX9wcrvYM9cFwfO00bxS0dqUYVMmxMPJRGdqAPfDoHc3kRf7+5iYAVEeEDZKM8ehQSQqmERi6Djv5BTM9HsXP1L5AeOQYhmU9yQyd//mrerZ6U6ts40KtgdH8PDj+cgxTYQG0bwxNjxDOgV7fx4efrMEAZCwxSnTGYcgLFbRPzZR2lWgsjRhmDe7OIjv0ATSlBiQQOt//pV97QdL2gCCE21qqo3/wYEZLl/GIFo4dH2+AbDQ9zxRr8qILBvhwmJoaxrz8PTSPwDR01qRMVs4WNmoVHZROP9aUwX/dgcEQ5yXL8rrwX5foS+nsyuB1w0JY1KLkkdCfErZVNlOouDJ/axXrEtQ2/vApGlmFxEh7KRbGks2g0Ddyu+XhSiBB1Ak6PR3BhySnwIc8rPqlmRcyCK1dRq6vYuhsnxcRRLjcgKCl0xgWU/1eEy7BgurKYD1jYdgMiNT40LDi2CdcmGbMhNi0fAySGtz9ZxazYXWAZAmdYHnrnPmzUTVTp1Z0Alsfio9lbqO40oWo69mTTkO0abv7rb2QXC9SJABwVRXOMesOE2jRhGSa4OwswF+fxxGgOIsuAZXi+FJLP2CGD+PBhkJDQ8hkslbfByxLCIERIZ42mhtqOgaGRQxSoCdEy2tL0TBuW3gQXicCgROe0EBfe+wjsjf+ANxoqD04ocQxTiDWrWF+9RfpnobkuzM1V+PoOuvfkaQYlKIqCDxQLnT19GCt0o0agRpMCEE1JPsQSSTW9txufVRyI1NzNzyooPK7NsmTDV1kaLD9OQ5PtIm5ttGigW46HrY4e0ruPrc0yDE3DU/lODKEJ1zGg2mHbjHcr/jGpqjMeA9Q6LK0Gi+423BDJavEyTxTOhJwwZZNzBhQ52PWWRAJyIo7MwBBGB7rIPSQkSBk+gfmU8Y7tw/B8NBs6qtUqrngmxI44jEYdTZp0yXaR4NJYa7QusZcmD6osz1/ZtWZ+YBSxfC+0xUVShYUjcQY7tTpiMoOGqlK2ARwvBLs7HPS/RLsinc2iqtpt75I7UxDJhdNKHAcG9px//bXJEt/2og5+8pe9/k3NE5TZ1RTuuCYYzYJHMqnrDjaXi0gmMwjlOHEetocvEe+ASdlWtbuQqcE+BeTJxn948GGMD+bVjXpt+msbza6v/Iqs9dyf31/GJ+SBwnoR/bkIJKrMdRxw9E3JtwNQIXCIr616A4bpQCBfjUUEnDoyhMOPDQAi/5qYHpzZxeXvBZCT/TOt+orykyN7p8xqFEbQxIbhIEPrURYltIh7P9yVsA+XpGk3GuBoemNk7y+9cKxtlNnOjl0Ln5a+BP9aBfcenyrxPZ+2EqNYNBv/WKhj69oH8Ei+OgHu+o9AwykQ5zyBHxrOokyKufJxUQ1ZYfoPvzs7cz/eA5e+tbJQ4GT2LBuRXjFIMS5tsRg56OdzRfzzwyLdomtElRe4EP0GRg5NXBkupCdHDn576T8wwL0ntCqFlu0+zyJ4rrS2Nm7oLeWv19fI9JgSdbp08U/nr26X1ZlSaVb9Loz/A5eGBRhyu+yTAAAAAElFTkSuQmCC"/>
|
||||
<image id="image1_16460_1097" width="24" height="24" xlink:href="data:image/png;base64,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"/>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,18 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const LinkDocTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_998" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_998)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data. </tspan><tspan x="8" y="63.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="75.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="111.636">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="123.636">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="135.636">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="147.636">other users. </tspan><tspan x="8" y="183.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="195.636">those changes to their version of the document.</tspan></text>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.125 39C10.125 38.2406 10.7406 37.625 11.5 37.625H16.5C17.2594 37.625 17.875 38.2406 17.875 39V42C17.875 42.2071 17.7071 42.375 17.5 42.375C17.2929 42.375 17.125 42.2071 17.125 42V39C17.125 38.6548 16.8452 38.375 16.5 38.375H11.5C11.1548 38.375 10.875 38.6548 10.875 39V45C10.875 45.3452 11.1548 45.625 11.5 45.625H14C14.2071 45.625 14.375 45.7929 14.375 46C14.375 46.2071 14.2071 46.375 14 46.375H11.5C10.7406 46.375 10.125 45.7594 10.125 45V39ZM12.125 40C12.125 39.7929 12.2929 39.625 12.5 39.625H14C14.2071 39.625 14.375 39.7929 14.375 40C14.375 40.2071 14.2071 40.375 14 40.375H12.5C12.2929 40.375 12.125 40.2071 12.125 40ZM12.5 41.375C12.2929 41.375 12.125 41.5429 12.125 41.75C12.125 41.9571 12.2929 42.125 12.5 42.125H15.5C15.7071 42.125 15.875 41.9571 15.875 41.75C15.875 41.5429 15.7071 41.375 15.5 41.375H12.5ZM12.125 43.5C12.125 43.2929 12.2929 43.125 12.5 43.125H13.75C13.9571 43.125 14.125 43.2929 14.125 43.5C14.125 43.7071 13.9571 43.875 13.75 43.875H12.5C12.2929 43.875 12.125 43.7071 12.125 43.5ZM15.75 43.125C15.5429 43.125 15.375 43.2929 15.375 43.5C15.375 43.7071 15.5429 43.875 15.75 43.875H17.0947L15.2348 45.7348C15.0884 45.8813 15.0884 46.1187 15.2348 46.2652C15.3813 46.4116 15.6187 46.4116 15.7652 46.2652L17.625 44.4053V45.75C17.625 45.9571 17.7929 46.125 18 46.125C18.2071 46.125 18.375 45.9571 18.375 45.75V43.5C18.375 43.4005 18.3355 43.3052 18.2652 43.2348C18.1948 43.1645 18.0995 43.125 18 43.125H15.75Z" fill="#77757D"/>
|
||||
<mask id="path-5-inside-1_16460_998" fill="white">
|
||||
<path d="M24 35H98V49H24V35Z"/>
|
||||
</mask>
|
||||
<path d="M98 48.5H24V49.5H98V48.5Z" fill="#E3E2E4" mask="url(#path-5-inside-1_16460_998)"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="24" y="45.6364">What’s AFFiNE?</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,13 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const LinkTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1007" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1007)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data. </tspan><tspan x="8" y="63.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="75.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="111.636">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="123.636">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="135.636">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="147.636">other users. </tspan><tspan x="8" y="183.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="195.636">those changes to their version of the document.</tspan></text>
|
||||
<text fill="#1E67AF" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="11" letter-spacing="0em"><tspan x="8" y="45.5">Learn about AFFiNE</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,21 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const MoveDownTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1234" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1234)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data. </tspan></text>
|
||||
<text fill="#A9A9AD" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="43.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="55.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="71.6364">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="83.6364">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="95.6364">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="107.636">other users. </tspan><tspan x="8" y="123.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="135.636">those changes to their version of the document.</tspan></text>
|
||||
</g>
|
||||
<g clip-path="url(#clip0_16460_1234)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5073 51.0032C25.2022 50.723 24.7278 50.7432 24.4476 51.0483L20.75 55.0745L20.75 43C20.75 42.5858 20.4142 42.25 20 42.25C19.5858 42.25 19.25 42.5858 19.25 43L19.25 55.0745L15.5524 51.0483C15.2722 50.7432 14.7978 50.723 14.4927 51.0032C14.1876 51.2833 14.1674 51.7578 14.4476 52.0629L19.4476 57.5073C19.5896 57.662 19.79 57.75 20 57.75C20.21 57.75 20.4104 57.662 20.5524 57.5073L25.5524 52.0629C25.8326 51.7578 25.8124 51.2833 25.5073 51.0032Z" fill="#121212"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_16460_1234">
|
||||
<rect width="24" height="24" fill="white" transform="translate(8 38)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,21 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const MoveUpTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1228" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1228)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="43.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="55.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="71.6364">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="83.6364">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="95.6364">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="107.636">other users. </tspan><tspan x="8" y="123.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="135.636">those changes to their version of the document.</tspan></text>
|
||||
<text fill="#A9A9AD" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data. </tspan></text>
|
||||
</g>
|
||||
<g clip-path="url(#clip0_16460_1228)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5073 16.9968C25.2022 17.277 24.7278 17.2568 24.4476 16.9517L20.75 12.9255L20.75 25C20.75 25.4142 20.4142 25.75 20 25.75C19.5858 25.75 19.25 25.4142 19.25 25L19.25 12.9255L15.5524 16.9517C15.2722 17.2568 14.7978 17.277 14.4927 16.9968C14.1876 16.7167 14.1674 16.2422 14.4476 15.9371L19.4476 10.4927C19.5896 10.338 19.79 10.25 20 10.25C20.21 10.25 20.4104 10.338 20.5524 10.4927L25.5524 15.9371C25.8326 16.2422 25.8124 16.7167 25.5073 16.9968Z" fill="#121212"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_16460_1228">
|
||||
<rect width="24" height="24" fill="white" transform="translate(8 6)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,13 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const NewDocTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_991" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_991)">
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="22" font-weight="600" letter-spacing="0px"><tspan x="8" y="27.5">Title</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="44.6364">Type '/' for commands</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,14 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const NowTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1143" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1143)">
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="38.0488" y="16.6364">now</tspan><tspan x="81.8574" y="16.6364"> and time. </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 </tspan><tspan x="57.8047" y="16.6364"> date</tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="34.6364">11:45:14 Wed 3 Aug, 2022</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,27 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const NumberedListTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_947" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_947)">
|
||||
<g clip-path="url(#clip0_16460_947)">
|
||||
<text fill="#1C81D9" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="10" y="29.6364">1.</tspan></text>
|
||||
</g>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="24" y="29.6364">Here's an example of a numbered list.</tspan></text>
|
||||
<g clip-path="url(#clip1_16460_947)">
|
||||
<text fill="#1C81D9" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="10" y="45.6364">2.</tspan></text>
|
||||
</g>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="24" y="45.6364">You can list your plans such as this</tspan></text>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_16460_947">
|
||||
<rect width="16" height="16" fill="white" transform="translate(10 18)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_16460_947">
|
||||
<rect width="16" height="16" fill="white" transform="translate(10 34)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,36 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const PDFTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_689_35293" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_689_35293)">
|
||||
<rect x="8.5" y="28.5" width="169" height="67" rx="3.5" fill="white" stroke="#E3E2E4"/>
|
||||
<mask id="mask1_689_35293" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="8" y="28" width="170" height="68">
|
||||
<rect x="8" y="28" width="170" height="68" rx="4" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_689_35293)">
|
||||
<g filter="url(#filter0_d_689_35293)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M149.686 42.516C149.796 41.7313 149.251 41.0057 148.47 40.8954L130.084 38.2995C128.913 38.1341 127.829 38.9542 127.665 40.1313L122.298 78.494C122.133 79.671 122.95 80.7593 124.121 80.9248L157.357 85.6174C158.529 85.7828 159.612 84.9627 159.777 83.7856L163.057 60.3418C163.166 59.5571 162.622 58.8315 161.841 58.7212L151.941 57.3234C149.598 56.9926 147.965 54.816 148.294 52.4619L149.686 42.516ZM133.567 59.8003C133.649 59.2118 134.191 58.8017 134.776 58.8844L152.455 61.3805C153.041 61.4632 153.449 62.0074 153.367 62.5959C153.284 63.1844 152.743 63.5945 152.157 63.5118L134.478 61.0157C133.892 60.933 133.484 60.3888 133.567 59.8003ZM133.932 64.923C133.346 64.8403 132.804 65.2504 132.722 65.8389C132.64 66.4274 133.048 66.9716 133.634 67.0543L151.312 69.5504C151.898 69.6331 152.44 69.223 152.522 68.6345C152.604 68.046 152.196 67.5018 151.61 67.4191L133.932 64.923Z" fill="white"/>
|
||||
<path d="M153.295 43.1135C152.819 42.4792 151.818 42.7394 151.708 43.5259L150.416 52.7614C150.251 53.9385 151.067 55.0268 152.239 55.1922L161.432 56.4901C162.215 56.6007 162.74 55.7051 162.264 55.0708L153.295 43.1135Z" fill="white"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 35.125C17.2406 35.125 16.625 35.7406 16.625 36.5V38C16.625 38.2071 16.7929 38.375 17 38.375C17.2071 38.375 17.375 38.2071 17.375 38V36.5C17.375 36.1548 17.6548 35.875 18 35.875H20.5H21.7609C21.9538 35.875 22.1359 35.964 22.2543 36.1163L23.4933 37.7094C23.5787 37.8191 23.625 37.9541 23.625 38.0931V40V43C23.625 43.3452 23.3452 43.625 23 43.625H18C17.6548 43.625 17.375 43.3452 17.375 43V42.25C17.375 42.0429 17.2071 41.875 17 41.875C16.7929 41.875 16.625 42.0429 16.625 42.25V43C16.625 43.7594 17.2406 44.375 18 44.375H23C23.7594 44.375 24.375 43.7594 24.375 43V40V38.0931C24.375 37.7873 24.2731 37.4903 24.0854 37.2489L22.8463 35.6558C22.5858 35.3209 22.1852 35.125 21.7609 35.125H20.5H18ZM15.3965 40.9614C15.3965 41.1694 15.5093 41.2866 15.707 41.2866C15.9048 41.2866 16.0176 41.1694 16.0176 40.9614V40.6729H16.3193C16.813 40.6729 17.1484 40.3726 17.1484 39.9067C17.1484 39.4365 16.832 39.1362 16.3618 39.1362H15.707C15.5093 39.1362 15.3965 39.2534 15.3965 39.4614V40.9614ZM16.1919 40.2144H16.0176V39.6035H16.1963C16.3984 39.6035 16.5215 39.7075 16.5215 39.9082C16.5215 40.1104 16.3984 40.2144 16.1919 40.2144ZM17.3682 40.9248C17.3682 41.1328 17.481 41.25 17.6787 41.25H18.272C18.9121 41.25 19.29 40.8545 19.29 40.1777C19.29 39.501 18.9136 39.1362 18.272 39.1362H17.6787C17.481 39.1362 17.3682 39.2534 17.3682 39.4614V40.9248ZM18.1841 40.7563H17.9893V39.6299H18.1841C18.4814 39.6299 18.6572 39.8218 18.6572 40.1777C18.6572 40.5674 18.4946 40.7563 18.1841 40.7563ZM19.5332 40.9614C19.5332 41.1694 19.646 41.2866 19.8438 41.2866C20.0415 41.2866 20.1543 41.1694 20.1543 40.9614V40.5015H20.7109C20.8691 40.5015 20.9658 40.4165 20.9658 40.2686C20.9658 40.1206 20.8662 40.0356 20.7109 40.0356H20.1543V39.6313H20.7739C20.938 39.6313 21.0479 39.542 21.0479 39.3838C21.0479 39.2256 20.9409 39.1362 20.7739 39.1362H19.8438C19.646 39.1362 19.5332 39.2534 19.5332 39.4614V40.9614Z" fill="#7A7A7A"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" font-weight="600" letter-spacing="0em"><tspan x="30" y="43.6364">Rickroll.pdf</tspan></text>
|
||||
</g>
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="10" y="18.6364">Upload a pdf to document.</tspan></text>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_689_35293" x="118.277" y="34.2783" width="48.7936" height="55.3604" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.258824 0 0 0 0 0.254902 0 0 0 0 0.286275 0 0 0 0.18 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_689_35293"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_689_35293" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
File diff suppressed because one or more lines are too long
@@ -1,13 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const QuoteTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_920" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_920)">
|
||||
<rect x="12" y="14" width="2" height="33" rx="1" fill="#C2C1C5"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="24" y="26.6364">In a decentralized system, we can have a </tspan><tspan x="24" y="40.6364">kaleidoscopic complexity to our data. …</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,13 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const StrikethroughTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_986" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_986)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="43.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="55.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="71.6364">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="83.6364">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="95.6364">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="107.636">other users. </tspan><tspan x="8" y="123.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="135.636">those changes to their version of the document.</tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px" text-decoration="line-through"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data. </tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,86 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const TableViewTooltip = 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" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1148" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="106">
|
||||
<rect width="170" height="106" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1148)">
|
||||
<rect x="7.5" y="26.5" width="169" height="84" rx="3.5" fill="white" stroke="#E3E2E4"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="9" font-weight="500" letter-spacing="0em"><tspan x="17" y="42.7727">Untitled Table</tspan></text>
|
||||
<line x1="17" y1="50.75" x2="176" y2="50.75" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<line x1="65.25" y1="51" x2="65.25" y2="110" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<line x1="17" y1="63.75" x2="176" y2="63.75" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<line x1="17" y1="76.75" x2="176" y2="76.75" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<line x1="17" y1="89.75" x2="176" y2="89.75" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<line x1="17" y1="102.75" x2="176" y2="102.75" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="25" y="58.8182">Title</tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="28" y="71.8182">Task 1</tspan></text>
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="78" y="58.8182">Status</tspan></text>
|
||||
<rect x="69" y="66" width="16" height="8" rx="1" fill="#FFE1E1"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="71" y="71.8182">Todo</tspan></text>
|
||||
<rect x="69" y="79" width="31" height="8" rx="1" fill="#F3F0FF"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="71" y="84.8182">In Progress</tspan></text>
|
||||
<rect x="69" y="93" width="17" height="8" rx="1" fill="#DFF4E8"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="71" y="98.8182">Done</tspan></text>
|
||||
<g clip-path="url(#clip0_16460_1148)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.7102 55.3125C17.6067 55.3125 17.5227 55.3964 17.5227 55.5V56C17.5227 56.1036 17.6067 56.1875 17.7102 56.1875C17.8138 56.1875 17.8977 56.1036 17.8977 56V55.6875H18.75V58.3125H18.2557C18.1521 58.3125 18.0682 58.3964 18.0682 58.5C18.0682 58.6036 18.1521 58.6875 18.2557 58.6875H18.9375H19.6193C19.7228 58.6875 19.8068 58.6036 19.8068 58.5C19.8068 58.3964 19.7228 58.3125 19.6193 58.3125H19.125V55.6875H19.9773V56C19.9773 56.1036 20.0612 56.1875 20.1648 56.1875C20.2683 56.1875 20.3523 56.1036 20.3523 56V55.5C20.3523 55.3964 20.2683 55.3125 20.1648 55.3125H18.9375H17.7102ZM20.9011 55.3125C20.7976 55.3125 20.7136 55.3964 20.7136 55.5C20.7136 55.6036 20.7976 55.6875 20.9011 55.6875H22.2647C22.3683 55.6875 22.4522 55.6036 22.4522 55.5C22.4522 55.3964 22.3683 55.3125 22.2647 55.3125H20.9011ZM20.7136 57C20.7136 56.8964 20.7976 56.8125 20.9011 56.8125H22.2647C22.3683 56.8125 22.4522 56.8964 22.4522 57C22.4522 57.1036 22.3683 57.1875 22.2647 57.1875H20.9011C20.7976 57.1875 20.7136 57.1036 20.7136 57ZM20.9011 58.3125C20.7976 58.3125 20.7136 58.3964 20.7136 58.5C20.7136 58.6036 20.7976 58.6875 20.9011 58.6875H22.2647C22.3683 58.6875 22.4522 58.6036 22.4522 58.5C22.4522 58.3964 22.3683 58.3125 22.2647 58.3125H20.9011Z" fill="#8E8D91"/>
|
||||
</g>
|
||||
<rect x="17" y="66" width="8" height="8" rx="1" fill="#EEEEEE"/>
|
||||
<g clip-path="url(#clip1_16460_1148)">
|
||||
<g clip-path="url(#clip2_16460_1148)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8125 68C18.8125 67.8964 18.8964 67.8125 19 67.8125H23C23.1036 67.8125 23.1875 67.8964 23.1875 68V68.6667C23.1875 68.7702 23.1036 68.8542 23 68.8542C22.8964 68.8542 22.8125 68.7702 22.8125 68.6667V68.1875H21.1875V71.8125H22C22.1036 71.8125 22.1875 71.8964 22.1875 72C22.1875 72.1036 22.1036 72.1875 22 72.1875H20C19.8964 72.1875 19.8125 72.1036 19.8125 72C19.8125 71.8964 19.8964 71.8125 20 71.8125H20.8125V68.1875H19.1875V68.6667C19.1875 68.7702 19.1036 68.8542 19 68.8542C18.8964 68.8542 18.8125 68.7702 18.8125 68.6667V68Z" fill="#77757D"/>
|
||||
</g>
|
||||
</g>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="28" y="84.8182">Task 2</tspan></text>
|
||||
<rect x="17" y="79" width="8" height="8" rx="1" fill="#EEEEEE"/>
|
||||
<g clip-path="url(#clip3_16460_1148)">
|
||||
<g clip-path="url(#clip4_16460_1148)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8125 81C18.8125 80.8964 18.8964 80.8125 19 80.8125H23C23.1036 80.8125 23.1875 80.8964 23.1875 81V81.6667C23.1875 81.7702 23.1036 81.8542 23 81.8542C22.8964 81.8542 22.8125 81.7702 22.8125 81.6667V81.1875H21.1875V84.8125H22C22.1036 84.8125 22.1875 84.8964 22.1875 85C22.1875 85.1036 22.1036 85.1875 22 85.1875H20C19.8964 85.1875 19.8125 85.1036 19.8125 85C19.8125 84.8964 19.8964 84.8125 20 84.8125H20.8125V81.1875H19.1875V81.6667C19.1875 81.7702 19.1036 81.8542 19 81.8542C18.8964 81.8542 18.8125 81.7702 18.8125 81.6667V81Z" fill="#77757D"/>
|
||||
</g>
|
||||
</g>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="28" y="98.8182">Task 3</tspan></text>
|
||||
<rect x="17" y="93" width="8" height="8" rx="1" fill="#EEEEEE"/>
|
||||
<g clip-path="url(#clip5_16460_1148)">
|
||||
<g clip-path="url(#clip6_16460_1148)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8125 95C18.8125 94.8964 18.8964 94.8125 19 94.8125H23C23.1036 94.8125 23.1875 94.8964 23.1875 95V95.6667C23.1875 95.7702 23.1036 95.8542 23 95.8542C22.8964 95.8542 22.8125 95.7702 22.8125 95.6667V95.1875H21.1875V98.8125H22C22.1036 98.8125 22.1875 98.8964 22.1875 99C22.1875 99.1036 22.1036 99.1875 22 99.1875H20C19.8964 99.1875 19.8125 99.1036 19.8125 99C19.8125 98.8964 19.8964 98.8125 20 98.8125H20.8125V95.1875H19.1875V95.6667C19.1875 95.7702 19.1036 95.8542 19 95.8542C18.8964 95.8542 18.8125 95.7702 18.8125 95.6667V95Z" fill="#77757D"/>
|
||||
</g>
|
||||
</g>
|
||||
<g clip-path="url(#clip7_16460_1148)">
|
||||
<g clip-path="url(#clip8_16460_1148)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M71 54.6875C71.1036 54.6875 71.1875 54.7714 71.1875 54.875V55.0625H72.8125V54.875C72.8125 54.7714 72.8964 54.6875 73 54.6875C73.1036 54.6875 73.1875 54.7714 73.1875 54.875V55.0625H73.75C74.1297 55.0625 74.4375 55.3703 74.4375 55.75V56.375V57C74.4375 57.1036 74.3536 57.1875 74.25 57.1875C74.1464 57.1875 74.0625 57.1036 74.0625 57V56.5625H69.9375V58.75C69.9375 58.9226 70.0774 59.0625 70.25 59.0625H72C72.1036 59.0625 72.1875 59.1464 72.1875 59.25C72.1875 59.3536 72.1036 59.4375 72 59.4375H70.25C69.8703 59.4375 69.5625 59.1297 69.5625 58.75V56.375V55.75C69.5625 55.3703 69.8703 55.0625 70.25 55.0625H70.8125V54.875C70.8125 54.7714 70.8964 54.6875 71 54.6875ZM72.8125 55.4375V55.625C72.8125 55.7286 72.8964 55.8125 73 55.8125C73.1036 55.8125 73.1875 55.7286 73.1875 55.625V55.4375H73.75C73.9226 55.4375 74.0625 55.5774 74.0625 55.75V56.1875H69.9375V55.75C69.9375 55.5774 70.0774 55.4375 70.25 55.4375H70.8125V55.625C70.8125 55.7286 70.8964 55.8125 71 55.8125C71.1036 55.8125 71.1875 55.7286 71.1875 55.625V55.4375H72.8125ZM72.8586 57.8981C72.9975 57.7326 73.2059 57.6276 73.4386 57.6276C73.7911 57.6276 74.0877 57.8687 74.1718 58.1952C74.1976 58.2955 74.2998 58.3559 74.4001 58.33C74.5004 58.3042 74.5607 58.202 74.5349 58.1017C74.4093 57.6135 73.9663 57.2526 73.4386 57.2526C73.0495 57.2526 72.7065 57.4489 72.5029 57.7474L72.354 57.6842C72.2983 57.6606 72.239 57.7093 72.2513 57.7686L72.3723 58.3507C72.383 58.402 72.4416 58.4269 72.4859 58.3989L72.9884 58.081C73.0395 58.0487 73.0333 57.9722 72.9776 57.9486L72.8586 57.8981ZM73.3836 59.2519C73.6163 59.2519 73.8246 59.1469 73.9636 58.9814L73.8446 58.9309C73.7889 58.9073 73.7827 58.8308 73.8338 58.7985L74.3363 58.4806C74.3806 58.4526 74.4392 58.4775 74.4499 58.5287L74.5709 59.1109C74.5832 59.1702 74.5239 59.2189 74.4682 59.1952L74.3193 59.1321C74.1156 59.4306 73.7727 59.6269 73.3836 59.6269C72.9868 59.6269 72.6378 59.4226 72.436 59.1143C72.3693 59.0125 72.3185 58.8991 72.2873 58.7778C72.2615 58.6775 72.3218 58.5752 72.4221 58.5494C72.5224 58.5236 72.6246 58.584 72.6504 58.6843C72.6712 58.7651 72.7051 58.8407 72.7497 58.9089C72.8852 59.1158 73.1186 59.2519 73.3836 59.2519Z" fill="#8E8D91"/>
|
||||
</g>
|
||||
</g>
|
||||
<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">Display items in a table format.</tspan></text>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_16460_1148">
|
||||
<rect width="6" height="6" fill="white" transform="translate(17 54)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_16460_1148">
|
||||
<rect width="6" height="6" fill="white" transform="translate(18 67)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip2_16460_1148">
|
||||
<rect width="6" height="6" fill="white" transform="translate(18 67)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip3_16460_1148">
|
||||
<rect width="6" height="6" fill="white" transform="translate(18 80)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip4_16460_1148">
|
||||
<rect width="6" height="6" fill="white" transform="translate(18 80)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip5_16460_1148">
|
||||
<rect width="6" height="6" fill="white" transform="translate(18 94)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip6_16460_1148">
|
||||
<rect width="6" height="6" fill="white" transform="translate(18 94)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip7_16460_1148">
|
||||
<rect width="6" height="6" fill="white" transform="translate(69 54)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip8_16460_1148">
|
||||
<rect width="6" height="6" fill="white" transform="translate(69 54)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,12 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const TextTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_868" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_868)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data. </tspan><tspan x="8" y="43.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="55.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="71.6364">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="83.6364">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="95.6364">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="107.636">other users. </tspan><tspan x="8" y="123.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="135.636">those changes to their version of the document.</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,15 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const ToDoListTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_960" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_960)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6667 19C12.7462 19 12 19.7462 12 20.6667V27.3333C12 28.2538 12.7462 29 13.6667 29H20.3333C21.2538 29 22 28.2538 22 27.3333V20.6667C22 19.7462 21.2538 19 20.3333 19H13.6667ZM12.9091 20.6667C12.9091 20.2483 13.2483 19.9091 13.6667 19.9091H20.3333C20.7517 19.9091 21.0909 20.2483 21.0909 20.6667V27.3333C21.0909 27.7517 20.7517 28.0909 20.3333 28.0909H13.6667C13.2483 28.0909 12.9091 27.7517 12.9091 27.3333V20.6667Z" fill="#77757D"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="28" y="27.6364">Here is an example of todo list.</tspan></text>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 40.6667C12 39.7462 12.7462 39 13.6667 39H20.3333C21.2538 39 22 39.7462 22 40.6667V47.3333C22 48.2538 21.2538 49 20.3333 49H13.6667C12.7462 49 12 48.2538 12 47.3333V40.6667ZM19.7457 42.5032C19.9232 42.3257 19.9232 42.0379 19.7457 41.8604C19.5681 41.6829 19.2803 41.6829 19.1028 41.8604L16.0909 44.8723L15.2002 43.9816C15.0227 43.8041 14.7349 43.8041 14.5574 43.9816C14.3799 44.1591 14.3799 44.4469 14.5574 44.6244L15.7695 45.8366C15.947 46.0141 16.2348 46.0141 16.4123 45.8366L19.7457 42.5032Z" fill="#1E96EB"/>
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="28" y="47.6364">Make a list for building preview.</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,14 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const TodayTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1128" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1128)">
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="95.5098" y="16.6364">. </tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="34.6364">Wed 3 Aug, 2022</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 today’s date</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,14 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const TomorrowTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1133" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1133)">
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="38.0488" y="16.6364">tomorrow’s</tspan><tspan x="114.211" y="16.6364">. </tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="34.6364">Wed 3 Aug, 2022</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 </tspan><tspan x="90.1582" y="16.6364"> date</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
File diff suppressed because one or more lines are too long
@@ -1,13 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const UnderlineTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_981" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_981)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="43.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="55.6364">either have, choose to share, or accept. </tspan><tspan x="8" y="71.6364">For example, one user’s edits to a document might be on </tspan><tspan x="8" y="83.6364">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="95.6364">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="107.636">other users. </tspan><tspan x="8" y="123.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="135.636">those changes to their version of the document.</tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px" text-decoration="underline"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data. </tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,14 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const YesterdayTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1138" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
|
||||
<rect width="170" height="68" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1138)">
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="38.0488" y="16.6364">yesterday’s</tspan><tspan x="115.334" y="16.6364">. </tspan></text>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="34.6364">Wed 3 Aug, 2022</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 </tspan><tspan x="91.2812" y="16.6364"> date</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
File diff suppressed because one or more lines are too long
@@ -1,141 +0,0 @@
|
||||
import { updateBlockType } from '@blocksuite/affine-block-note';
|
||||
import {
|
||||
formatBlockCommand,
|
||||
type TextConversionConfig,
|
||||
type TextFormatConfig,
|
||||
} from '@blocksuite/affine-components/rich-text';
|
||||
import { isInsideBlockByFlavour } from '@blocksuite/affine-shared/utils';
|
||||
import { BlockSelection } from '@blocksuite/block-std';
|
||||
import { assertType } from '@blocksuite/global/utils';
|
||||
import type { BlockModel } from '@blocksuite/store';
|
||||
|
||||
import type {
|
||||
SlashMenuActionItem,
|
||||
SlashMenuContext,
|
||||
SlashMenuGroupDivider,
|
||||
SlashMenuItem,
|
||||
SlashMenuItemGenerator,
|
||||
SlashMenuStaticItem,
|
||||
SlashSubMenu,
|
||||
} from './config.js';
|
||||
import { slashMenuToolTips } from './tooltips/index.js';
|
||||
|
||||
export function isGroupDivider(
|
||||
item: SlashMenuStaticItem
|
||||
): item is SlashMenuGroupDivider {
|
||||
return 'groupName' in item;
|
||||
}
|
||||
|
||||
export function notGroupDivider(
|
||||
item: SlashMenuStaticItem
|
||||
): item is Exclude<SlashMenuStaticItem, SlashMenuGroupDivider> {
|
||||
return !isGroupDivider(item);
|
||||
}
|
||||
|
||||
export function isActionItem(
|
||||
item: SlashMenuStaticItem
|
||||
): item is SlashMenuActionItem {
|
||||
return 'action' in item;
|
||||
}
|
||||
|
||||
export function isSubMenuItem(item: SlashMenuStaticItem): item is SlashSubMenu {
|
||||
return 'subMenu' in item;
|
||||
}
|
||||
|
||||
export function isMenuItemGenerator(
|
||||
item: SlashMenuItem
|
||||
): item is SlashMenuItemGenerator {
|
||||
return typeof item === 'function';
|
||||
}
|
||||
|
||||
export function slashItemClassName(item: SlashMenuStaticItem) {
|
||||
const name = isGroupDivider(item) ? item.groupName : item.name;
|
||||
|
||||
return name.split(' ').join('-').toLocaleLowerCase();
|
||||
}
|
||||
|
||||
export function filterEnabledSlashMenuItems(
|
||||
items: SlashMenuItem[],
|
||||
context: SlashMenuContext
|
||||
): SlashMenuStaticItem[] {
|
||||
const result = items
|
||||
.map(item => (isMenuItemGenerator(item) ? item(context) : item))
|
||||
.flat()
|
||||
.filter(item => (item.showWhen ? item.showWhen(context) : true))
|
||||
.map(item => {
|
||||
if (isSubMenuItem(item)) {
|
||||
return {
|
||||
...item,
|
||||
subMenu: filterEnabledSlashMenuItems(item.subMenu, context),
|
||||
};
|
||||
} else {
|
||||
return { ...item };
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
export function getFirstNotDividerItem(
|
||||
items: SlashMenuStaticItem[]
|
||||
): SlashMenuActionItem | SlashSubMenu | null {
|
||||
const firstItem = items.find(item => !isGroupDivider(item));
|
||||
assertType<SlashMenuActionItem | SlashSubMenu | undefined>(firstItem);
|
||||
return firstItem ?? null;
|
||||
}
|
||||
|
||||
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
|
||||
): SlashMenuActionItem {
|
||||
const { name, description, icon, flavour, type } = config;
|
||||
return {
|
||||
name,
|
||||
description,
|
||||
icon,
|
||||
tooltip: slashMenuToolTips[name],
|
||||
showWhen: ({ model }) => model.doc.schema.flavourSchemaMap.has(flavour),
|
||||
action: ({ rootComponent }) => {
|
||||
rootComponent.std.command.exec(updateBlockType, {
|
||||
flavour,
|
||||
props: { type },
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function createTextFormatItem(
|
||||
config: TextFormatConfig
|
||||
): SlashMenuActionItem {
|
||||
const { name, icon, id, action } = config;
|
||||
return {
|
||||
name,
|
||||
icon,
|
||||
tooltip: slashMenuToolTips[name],
|
||||
action: ({ rootComponent, model }) => {
|
||||
const { std, host } = rootComponent;
|
||||
|
||||
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);
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user