mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-27 10:52:40 +08:00
feat(editor): support member node (#11075)
Close [BS-2793](https://linear.app/affine-design/issue/BS-2793/inline-member)
This commit is contained in:
Flrande
@@ -42,6 +42,7 @@
|
||||
"@blocksuite/affine-inline-footnote": "workspace:*",
|
||||
"@blocksuite/affine-inline-latex": "workspace:*",
|
||||
"@blocksuite/affine-inline-link": "workspace:*",
|
||||
"@blocksuite/affine-inline-mention": "workspace:*",
|
||||
"@blocksuite/affine-inline-preset": "workspace:*",
|
||||
"@blocksuite/affine-inline-reference": "workspace:*",
|
||||
"@blocksuite/affine-model": "workspace:*",
|
||||
@@ -106,6 +107,7 @@
|
||||
"./inlines/preset": "./src/inlines/preset.ts",
|
||||
"./inlines/footnote": "./src/inlines/footnote.ts",
|
||||
"./inlines/latex": "./src/inlines/latex.ts",
|
||||
"./inlines/mention": "./src/inlines/mention.ts",
|
||||
"./widgets/drag-handle": "./src/widgets/drag-handle.ts",
|
||||
"./widgets/edgeless-auto-connect": "./src/widgets/edgeless-auto-connect.ts",
|
||||
"./widgets/edgeless-toolbar": "./src/widgets/edgeless-toolbar.ts",
|
||||
|
||||
@@ -48,6 +48,7 @@ import { effects as fragmentOutlineEffects } from '@blocksuite/affine-fragment-o
|
||||
import { effects as inlineFootnoteEffects } from '@blocksuite/affine-inline-footnote/effects';
|
||||
import { effects as inlineLatexEffects } from '@blocksuite/affine-inline-latex/effects';
|
||||
import { effects as inlineLinkEffects } from '@blocksuite/affine-inline-link/effects';
|
||||
import { effects as inlineMentionEffects } from '@blocksuite/affine-inline-mention';
|
||||
import { effects as inlinePresetEffects } from '@blocksuite/affine-inline-preset/effects';
|
||||
import { effects as inlineReferenceEffects } from '@blocksuite/affine-inline-reference/effects';
|
||||
import { effects as richTextEffects } from '@blocksuite/affine-rich-text/effects';
|
||||
@@ -123,6 +124,7 @@ export function effects() {
|
||||
inlineLinkEffects();
|
||||
inlineFootnoteEffects();
|
||||
inlineLatexEffects();
|
||||
inlineMentionEffects();
|
||||
|
||||
blockNoteEffects();
|
||||
blockAttachmentEffects();
|
||||
|
||||
1
blocksuite/affine/all/src/inlines/mention.ts
Normal file
1
blocksuite/affine/all/src/inlines/mention.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from '@blocksuite/affine-inline-mention';
|
||||
@@ -39,6 +39,7 @@
|
||||
{ "path": "../inlines/footnote" },
|
||||
{ "path": "../inlines/latex" },
|
||||
{ "path": "../inlines/link" },
|
||||
{ "path": "../inlines/mention" },
|
||||
{ "path": "../inlines/preset" },
|
||||
{ "path": "../inlines/reference" },
|
||||
{ "path": "../model" },
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"@blocksuite/affine-widget-slash-menu": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"@blocksuite/affine-widget-slash-menu": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@lit/context": "^1.1.2",
|
||||
"@preact/signals-core": "^1.8.0",
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"@blocksuite/affine-widget-slash-menu": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@emoji-mart/data": "^1.2.1",
|
||||
"@floating-ui/dom": "^1.6.10",
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
"@blocksuite/affine-widget-slash-menu": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/data-view": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/data-view": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
"@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
"@blocksuite/affine-widget-slash-menu": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"@blocksuite/affine-widget-frame-title": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"@blocksuite/affine-widget-slash-menu": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
"@blocksuite/affine-widget-slash-menu": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
"@blocksuite/affine-widget-slash-menu": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@lit/context": "^1.1.2",
|
||||
"@preact/signals-core": "^1.8.0",
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/data-view": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"@blocksuite/affine-widget-slash-menu": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/data-view": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@preact/signals-core": "^1.8.0",
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@emotion/hash": "^0.9.2",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@lit/context": "^1.1.2",
|
||||
"@preact/signals-core": "^1.8.0",
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
"@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@lit/context": "^1.1.2",
|
||||
"@preact/signals-core": "^1.8.0",
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
"@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@lit/context": "^1.1.2",
|
||||
"@preact/signals-core": "^1.8.0",
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
"@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@lit/context": "^1.1.2",
|
||||
"@preact/signals-core": "^1.8.0",
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
"@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@lit/context": "^1.1.2",
|
||||
"@preact/signals-core": "^1.8.0",
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
45
blocksuite/affine/inlines/mention/package.json
Normal file
45
blocksuite/affine/inlines/mention/package.json
Normal file
@@ -0,0 +1,45 @@
|
||||
{
|
||||
"name": "@blocksuite/affine-inline-mention",
|
||||
"description": "Inline mention for BlockSuite.",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "tsc"
|
||||
},
|
||||
"sideEffects": false,
|
||||
"keywords": [],
|
||||
"author": "toeverything",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@blocksuite/affine-components": "workspace:*",
|
||||
"@blocksuite/affine-model": "workspace:*",
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
"@preact/signals-core": "^1.8.0",
|
||||
"@toeverything/theme": "^1.1.12",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"collapse-white-space": "^2.1.0",
|
||||
"date-fns": "^4.0.0",
|
||||
"lit": "^3.2.0",
|
||||
"lit-html": "^3.2.1",
|
||||
"lodash-es": "^4.17.21",
|
||||
"rxjs": "^7.8.1",
|
||||
"yjs": "^13.6.21",
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"exports": {
|
||||
".": "./src/index.ts",
|
||||
"./effects": "./src/effects.ts"
|
||||
},
|
||||
"files": [
|
||||
"src",
|
||||
"dist",
|
||||
"!src/__tests__",
|
||||
"!dist/__tests__"
|
||||
],
|
||||
"version": "0.20.0"
|
||||
}
|
||||
149
blocksuite/affine/inlines/mention/src/affine-mention.ts
Normal file
149
blocksuite/affine/inlines/mention/src/affine-mention.ts
Normal file
@@ -0,0 +1,149 @@
|
||||
import { UserProvider } from '@blocksuite/affine-shared/services';
|
||||
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
|
||||
import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
|
||||
import type { BlockStdScope } from '@blocksuite/block-std';
|
||||
import { ShadowlessElement } from '@blocksuite/block-std';
|
||||
import {
|
||||
ZERO_WIDTH_NON_JOINER,
|
||||
ZERO_WIDTH_SPACE,
|
||||
} from '@blocksuite/block-std/inline';
|
||||
import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
|
||||
import type { DeltaInsert } from '@blocksuite/store';
|
||||
import { css, html } from 'lit';
|
||||
import { property } from 'lit/decorators.js';
|
||||
|
||||
export class AffineMention extends SignalWatcher(
|
||||
WithDisposable(ShadowlessElement)
|
||||
) {
|
||||
static override styles = css`
|
||||
.affine-mention {
|
||||
color: ${unsafeCSSVarV2('text/primary')};
|
||||
font-feature-settings:
|
||||
'liga' off,
|
||||
'clig' off;
|
||||
/* Client/baseMedium */
|
||||
font-family: Inter;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px; /* 160% */
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.affine-mention:hover {
|
||||
background: var(--affine-hover-color);
|
||||
}
|
||||
.affine-mention[data-selected='true'] {
|
||||
background: var(--affine-hover-color);
|
||||
}
|
||||
.affine-mention[data-type='default'] {
|
||||
color: ${unsafeCSSVarV2('text/primary')};
|
||||
}
|
||||
.affine-mention[data-type='removed'] {
|
||||
color: ${unsafeCSSVarV2('text/disable')};
|
||||
}
|
||||
.affine-mention[data-type='error'] {
|
||||
color: ${unsafeCSSVarV2('text/disable')};
|
||||
}
|
||||
.affine-mention[data-type='loading'] {
|
||||
color: ${unsafeCSSVarV2('text/placeholder')};
|
||||
background: ${unsafeCSSVarV2('skeleton/skeleton')};
|
||||
}
|
||||
.loading-text {
|
||||
display: inline-block;
|
||||
}
|
||||
.dots {
|
||||
display: inline-block;
|
||||
}
|
||||
.dot {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
animation: pulse 1.2s infinite;
|
||||
}
|
||||
.dots > .dot:nth-child(2) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.dots > .dot:nth-child(3) {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
33.333% {
|
||||
opacity: 1;
|
||||
}
|
||||
66.666% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
override render() {
|
||||
const errorContent = html`<span
|
||||
data-selected=${this.selected}
|
||||
data-type="error"
|
||||
class="affine-mention"
|
||||
>@Unknown Member<v-text .str=${ZERO_WIDTH_NON_JOINER}></v-text
|
||||
></span>`;
|
||||
|
||||
const userService = this.std.getOptional(UserProvider);
|
||||
const memberId = this.delta.attributes?.mention?.member;
|
||||
if (!userService || !memberId) {
|
||||
return errorContent;
|
||||
}
|
||||
|
||||
userService.revalidateUserInfo(memberId);
|
||||
const isLoading$ = userService.isLoading$(memberId);
|
||||
const userInfo$ = userService.userInfo$(memberId);
|
||||
|
||||
if (userInfo$.value) {
|
||||
if (userInfo$.value.removed) {
|
||||
return html`<span
|
||||
data-selected=${this.selected}
|
||||
data-type="removed"
|
||||
class="affine-mention"
|
||||
>@Inactive Member<v-text .str=${ZERO_WIDTH_NON_JOINER}></v-text
|
||||
></span>`;
|
||||
} else {
|
||||
return html`<span
|
||||
data-selected=${this.selected}
|
||||
data-type="default"
|
||||
class="affine-mention"
|
||||
>@${userInfo$.value.name ?? 'Unknown'}<v-text
|
||||
.str=${ZERO_WIDTH_NON_JOINER}
|
||||
></v-text
|
||||
></span>`;
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading$.value) {
|
||||
return html`<span
|
||||
data-selected=${this.selected}
|
||||
data-type="loading"
|
||||
class="affine-mention"
|
||||
>@loading<span class="dots"
|
||||
><span class="dot">.</span><span class="dot">.</span
|
||||
><span class="dot">.</span></span
|
||||
><v-text .str=${ZERO_WIDTH_NON_JOINER}></v-text
|
||||
></span>`;
|
||||
}
|
||||
|
||||
return errorContent;
|
||||
}
|
||||
|
||||
@property({ type: Object })
|
||||
accessor delta: DeltaInsert<AffineTextAttributes> = {
|
||||
insert: ZERO_WIDTH_SPACE,
|
||||
attributes: {},
|
||||
};
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor selected = false;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor std!: BlockStdScope;
|
||||
}
|
||||
11
blocksuite/affine/inlines/mention/src/effects.ts
Normal file
11
blocksuite/affine/inlines/mention/src/effects.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { AffineMention } from './affine-mention';
|
||||
|
||||
export function effects() {
|
||||
customElements.define('affine-mention', AffineMention);
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'affine-mention': AffineMention;
|
||||
}
|
||||
}
|
||||
7
blocksuite/affine/inlines/mention/src/exts.ts
Normal file
7
blocksuite/affine/inlines/mention/src/exts.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import type { ExtensionType } from '@blocksuite/store';
|
||||
|
||||
import { MentionInlineSpecExtension } from './inline-spec';
|
||||
|
||||
export const inlineMentionExtensions: ExtensionType[] = [
|
||||
MentionInlineSpecExtension,
|
||||
];
|
||||
4
blocksuite/affine/inlines/mention/src/index.ts
Normal file
4
blocksuite/affine/inlines/mention/src/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export * from './affine-mention';
|
||||
export * from './effects';
|
||||
export * from './exts';
|
||||
export * from './inline-spec';
|
||||
32
blocksuite/affine/inlines/mention/src/inline-spec.ts
Normal file
32
blocksuite/affine/inlines/mention/src/inline-spec.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
|
||||
import { StdIdentifier } from '@blocksuite/block-std';
|
||||
import { InlineSpecExtension } from '@blocksuite/block-std/inline';
|
||||
import { html } from 'lit';
|
||||
import { z } from 'zod';
|
||||
|
||||
export const MentionInlineSpecExtension =
|
||||
InlineSpecExtension<AffineTextAttributes>('mention', provider => {
|
||||
const std = provider.get(StdIdentifier);
|
||||
return {
|
||||
name: 'mention',
|
||||
schema: z
|
||||
.object({
|
||||
member: z.string(),
|
||||
notification: z.string(),
|
||||
})
|
||||
.optional()
|
||||
.nullable()
|
||||
.catch(undefined),
|
||||
match: delta => {
|
||||
return !!delta.attributes?.mention?.member;
|
||||
},
|
||||
renderer: ({ delta, selected }) => {
|
||||
return html`<affine-mention
|
||||
.delta=${delta}
|
||||
.std=${std}
|
||||
.selected=${selected}
|
||||
></affine-mention>`;
|
||||
},
|
||||
embed: true,
|
||||
};
|
||||
});
|
||||
17
blocksuite/affine/inlines/mention/tsconfig.json
Normal file
17
blocksuite/affine/inlines/mention/tsconfig.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"outDir": "./dist",
|
||||
"tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
|
||||
},
|
||||
"include": ["./src"],
|
||||
"references": [
|
||||
{ "path": "../../components" },
|
||||
{ "path": "../../model" },
|
||||
{ "path": "../../shared" },
|
||||
{ "path": "../../../framework/block-std" },
|
||||
{ "path": "../../../framework/global" },
|
||||
{ "path": "../../../framework/store" }
|
||||
]
|
||||
}
|
||||
@@ -14,13 +14,14 @@
|
||||
"@blocksuite/affine-inline-footnote": "workspace:*",
|
||||
"@blocksuite/affine-inline-latex": "workspace:*",
|
||||
"@blocksuite/affine-inline-link": "workspace:*",
|
||||
"@blocksuite/affine-inline-mention": "workspace:*",
|
||||
"@blocksuite/affine-inline-reference": "workspace:*",
|
||||
"@blocksuite/affine-model": "workspace:*",
|
||||
"@blocksuite/affine-rich-text": "workspace:*",
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { FootNoteInlineSpecExtension } from '@blocksuite/affine-inline-footnote';
|
||||
import { LatexInlineSpecExtension } from '@blocksuite/affine-inline-latex';
|
||||
import { LinkInlineSpecExtension } from '@blocksuite/affine-inline-link';
|
||||
import { MentionInlineSpecExtension } from '@blocksuite/affine-inline-mention';
|
||||
import { ReferenceInlineSpecExtension } from '@blocksuite/affine-inline-reference';
|
||||
import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
|
||||
import { InlineManagerExtension } from '@blocksuite/block-std/inline';
|
||||
@@ -30,5 +31,6 @@ export const DefaultInlineManagerExtension =
|
||||
ReferenceInlineSpecExtension.identifier,
|
||||
LinkInlineSpecExtension.identifier,
|
||||
FootNoteInlineSpecExtension.identifier,
|
||||
MentionInlineSpecExtension.identifier,
|
||||
],
|
||||
});
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { inlineFootnoteExtensions } from '@blocksuite/affine-inline-footnote';
|
||||
import { inlineLatexExtensions } from '@blocksuite/affine-inline-latex';
|
||||
import { inlineLinkExtensions } from '@blocksuite/affine-inline-link';
|
||||
import { inlineMentionExtensions } from '@blocksuite/affine-inline-mention';
|
||||
import { inlineReferenceExtensions } from '@blocksuite/affine-inline-reference';
|
||||
import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
|
||||
import {
|
||||
@@ -109,4 +110,5 @@ export const InlineSpecExtensions: ExtensionType[] = [
|
||||
...inlineReferenceExtensions,
|
||||
...inlineLatexExtensions,
|
||||
...inlineFootnoteExtensions,
|
||||
...inlineMentionExtensions,
|
||||
];
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
{ "path": "../footnote" },
|
||||
{ "path": "../latex" },
|
||||
{ "path": "../link" },
|
||||
{ "path": "../mention" },
|
||||
{ "path": "../reference" },
|
||||
{ "path": "../../model" },
|
||||
{ "path": "../../rich-text" },
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
"@blocksuite/affine-model": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -73,6 +73,10 @@ export interface AffineTextAttributes {
|
||||
color?: string | null;
|
||||
latex?: string | null;
|
||||
footnote?: FootNote | null;
|
||||
mention?: {
|
||||
member: string;
|
||||
notification: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
export type AffineInlineEditor = InlineEditor<AffineTextAttributes>;
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@preact/signals-core": "^1.8.0",
|
||||
"@toeverything/theme": "^1.1.12",
|
||||
"lit": "^3.2.0",
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/context": "^1.1.2",
|
||||
"@preact/signals-core": "^1.8.0",
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@preact/signals-core": "^1.8.0",
|
||||
"@toeverything/theme": "^1.1.12",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@blocksuite/store": "workspace:*",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@preact/signals-core": "^1.8.0",
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.6",
|
||||
"@blocksuite/icons": "^2.2.8",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@preact/signals-core": "^1.8.0",
|
||||
"@toeverything/theme": "^1.1.12",
|
||||
|
||||
Reference in New Issue
Block a user