feat(editor): footnote inline package (#11049)

This commit is contained in:
Saul-Mirone
2025-03-20 16:18:22 +00:00
parent e5e429e7b2
commit 57388e4cf7
29 changed files with 272 additions and 124 deletions

View File

@@ -35,6 +35,7 @@
"@blocksuite/affine-fragment-outline": "workspace:*",
"@blocksuite/affine-gfx-text": "workspace:*",
"@blocksuite/affine-gfx-turbo-renderer": "workspace:*",
"@blocksuite/affine-inline-footnote": "workspace:*",
"@blocksuite/affine-inline-link": "workspace:*",
"@blocksuite/affine-inline-preset": "workspace:*",
"@blocksuite/affine-inline-reference": "workspace:*",
@@ -97,6 +98,7 @@
"./inlines/link": "./src/inlines/link.ts",
"./inlines/reference": "./src/inlines/reference.ts",
"./inlines/preset": "./src/inlines/preset.ts",
"./inlines/footnote": "./src/inlines/footnote.ts",
"./widgets/drag-handle": "./src/widgets/drag-handle.ts",
"./widgets/edgeless-auto-connect": "./src/widgets/edgeless-auto-connect.ts",
"./widgets/frame-title": "./src/widgets/frame-title.ts",

View File

@@ -45,6 +45,7 @@ import { effects as componentViewDropdownMenuEffects } from '@blocksuite/affine-
import { effects as fragmentDocTitleEffects } from '@blocksuite/affine-fragment-doc-title/effects';
import { effects as fragmentFramePanelEffects } from '@blocksuite/affine-fragment-frame-panel/effects';
import { effects as fragmentOutlineEffects } from '@blocksuite/affine-fragment-outline/effects';
import { effects as inlineFootnoteEffects } from '@blocksuite/affine-inline-footnote/effects';
import { effects as inlineLinkEffects } from '@blocksuite/affine-inline-link/effects';
import { effects as inlinePresetEffects } from '@blocksuite/affine-inline-preset/effects';
import { effects as inlineReferenceEffects } from '@blocksuite/affine-inline-reference/effects';
@@ -119,6 +120,7 @@ export function effects() {
inlineReferenceEffects();
inlinePresetEffects();
inlineLinkEffects();
inlineFootnoteEffects();
blockNoteEffects();
blockAttachmentEffects();

View File

@@ -0,0 +1 @@
export * from '@blocksuite/affine-inline-footnote';

View File

@@ -32,6 +32,7 @@
{ "path": "../fragments/fragment-outline" },
{ "path": "../gfx/text" },
{ "path": "../gfx/turbo-renderer" },
{ "path": "../inlines/footnote" },
{ "path": "../inlines/link" },
{ "path": "../inlines/preset" },
{ "path": "../inlines/reference" },

View File

@@ -0,0 +1,46 @@
{
"name": "@blocksuite/affine-inline-footnote",
"description": "Inline footnote for BlockSuite.",
"type": "module",
"scripts": {
"build": "tsc"
},
"sideEffects": false,
"keywords": [],
"author": "toeverything",
"license": "MIT",
"dependencies": {
"@blocksuite/affine-components": "workspace:*",
"@blocksuite/affine-inline-reference": "workspace:*",
"@blocksuite/affine-model": "workspace:*",
"@blocksuite/affine-shared": "workspace:*",
"@blocksuite/block-std": "workspace:*",
"@blocksuite/global": "workspace:*",
"@blocksuite/icons": "^2.2.6",
"@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"
}

View File

@@ -0,0 +1,2 @@
export * from './markdown/inline-delta';
export * from './markdown/markdown-inline';

View File

@@ -0,0 +1,45 @@
import {
FOOTNOTE_DEFINITION_PREFIX,
InlineDeltaToMarkdownAdapterExtension,
} from '@blocksuite/affine-shared/adapters';
import type { PhrasingContent } from 'mdast';
export const footnoteReferenceDeltaToMarkdownAdapterMatcher =
InlineDeltaToMarkdownAdapterExtension({
name: 'footnote-reference',
match: delta => !!delta.attributes?.footnote,
toAST: (delta, context) => {
const mdast: PhrasingContent = {
type: 'text',
value: delta.insert,
};
const footnote = delta.attributes?.footnote;
if (!footnote) {
return mdast;
}
const footnoteDefinitionKey = `${FOOTNOTE_DEFINITION_PREFIX}${footnote.label}`;
const { configs } = context;
// FootnoteReference should be paired with FootnoteDefinition
// If the footnoteDefinition is not in the configs, set it to configs
// We should add the footnoteDefinition markdown ast nodes to tree after all the footnoteReference markdown ast nodes are added
if (!configs.has(footnoteDefinitionKey)) {
// clone the footnote reference
const clonedFootnoteReference = { ...footnote.reference };
// If the footnote reference contains url, encode it
if (clonedFootnoteReference.url) {
clonedFootnoteReference.url = encodeURIComponent(
clonedFootnoteReference.url
);
}
configs.set(
footnoteDefinitionKey,
JSON.stringify(clonedFootnoteReference)
);
}
return {
type: 'footnoteReference',
label: footnote.label,
identifier: footnote.label,
};
},
});

View File

@@ -0,0 +1,42 @@
import { FootNoteReferenceParamsSchema } from '@blocksuite/affine-model';
import {
FOOTNOTE_DEFINITION_PREFIX,
MarkdownASTToDeltaExtension,
} from '@blocksuite/affine-shared/adapters';
export const markdownFootnoteReferenceToDeltaMatcher =
MarkdownASTToDeltaExtension({
name: 'footnote-reference',
match: ast => ast.type === 'footnoteReference',
toDelta: (ast, context) => {
if (ast.type !== 'footnoteReference') {
return [];
}
try {
const { configs } = context;
const footnoteDefinitionKey = `${FOOTNOTE_DEFINITION_PREFIX}${ast.identifier}`;
const footnoteDefinition = configs.get(footnoteDefinitionKey);
if (!footnoteDefinition) {
return [];
}
const footnoteDefinitionJson = JSON.parse(footnoteDefinition);
// If the footnote definition contains url, decode it
if (footnoteDefinitionJson.url) {
footnoteDefinitionJson.url = decodeURIComponent(
footnoteDefinitionJson.url
);
}
const footnoteReference = FootNoteReferenceParamsSchema.parse(
footnoteDefinitionJson
);
const footnote = {
label: ast.identifier,
reference: footnoteReference,
};
return [{ insert: ' ', attributes: { footnote } }];
} catch (error) {
console.warn('Error parsing footnote reference', error);
return [];
}
},
});

View File

@@ -0,0 +1,17 @@
import { AffineFootnoteNode } from './footnote-node/footnote-node';
import { FootNotePopup } from './footnote-node/footnote-popup';
import { FootNotePopupChip } from './footnote-node/footnote-popup-chip';
export function effects() {
customElements.define('affine-footnote-node', AffineFootnoteNode);
customElements.define('footnote-popup', FootNotePopup);
customElements.define('footnote-popup-chip', FootNotePopupChip);
}
declare global {
interface HTMLElementTagNameMap {
'affine-footnote-node': AffineFootnoteNode;
'footnote-popup': FootNotePopup;
'footnote-popup-chip': FootNotePopupChip;
}
}

View File

@@ -0,0 +1,7 @@
import type { ExtensionType } from '@blocksuite/store';
import { FootNoteInlineSpecExtension } from './inline-spec';
export const inlineFootnoteExtensions: ExtensionType[] = [
FootNoteInlineSpecExtension,
];

View File

@@ -1,2 +1,5 @@
export * from './adapters';
export * from './exts';
export * from './footnote-node/footnote-config.js';
export { AffineFootnoteNode } from './footnote-node/footnote-node.js';
export * from './inline-spec';

View File

@@ -0,0 +1,29 @@
import { FootNoteSchema } from '@blocksuite/affine-model';
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 { FootNoteNodeConfigIdentifier } from './footnote-node/footnote-config';
export const FootNoteInlineSpecExtension =
InlineSpecExtension<AffineTextAttributes>('footnote', provider => {
const std = provider.get(StdIdentifier);
const config =
provider.getOptional(FootNoteNodeConfigIdentifier) ?? undefined;
return {
name: 'footnote',
schema: FootNoteSchema.optional().nullable().catch(undefined),
match: delta => {
return !!delta.attributes?.footnote;
},
renderer: ({ delta }) => {
return html`<affine-footnote-node
.delta=${delta}
.std=${std}
.config=${config}
></affine-footnote-node>`;
},
embed: true,
};
});

View File

@@ -0,0 +1,18 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist",
"tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
},
"include": ["./src"],
"references": [
{ "path": "../../components" },
{ "path": "../reference" },
{ "path": "../../model" },
{ "path": "../../shared" },
{ "path": "../../../framework/block-std" },
{ "path": "../../../framework/global" },
{ "path": "../../../framework/store" }
]
}

View File

@@ -11,6 +11,7 @@
"license": "MIT",
"dependencies": {
"@blocksuite/affine-components": "workspace:*",
"@blocksuite/affine-inline-footnote": "workspace:*",
"@blocksuite/affine-inline-link": "workspace:*",
"@blocksuite/affine-inline-reference": "workspace:*",
"@blocksuite/affine-model": "workspace:*",

View File

@@ -1,9 +1,7 @@
import { footnoteReferenceDeltaToMarkdownAdapterMatcher } from '@blocksuite/affine-inline-footnote';
import { linkDeltaToMarkdownAdapterMatcher } from '@blocksuite/affine-inline-link';
import { referenceDeltaToMarkdownAdapterMatcher } from '@blocksuite/affine-inline-reference';
import {
FOOTNOTE_DEFINITION_PREFIX,
InlineDeltaToMarkdownAdapterExtension,
} from '@blocksuite/affine-shared/adapters';
import { InlineDeltaToMarkdownAdapterExtension } from '@blocksuite/affine-shared/adapters';
import type { PhrasingContent } from 'mdast';
import type RemarkMath from 'remark-math';
@@ -77,46 +75,6 @@ export const latexDeltaToMarkdownAdapterMatcher =
},
});
export const footnoteReferenceDeltaToMarkdownAdapterMatcher =
InlineDeltaToMarkdownAdapterExtension({
name: 'footnote-reference',
match: delta => !!delta.attributes?.footnote,
toAST: (delta, context) => {
const mdast: PhrasingContent = {
type: 'text',
value: delta.insert,
};
const footnote = delta.attributes?.footnote;
if (!footnote) {
return mdast;
}
const footnoteDefinitionKey = `${FOOTNOTE_DEFINITION_PREFIX}${footnote.label}`;
const { configs } = context;
// FootnoteReference should be paired with FootnoteDefinition
// If the footnoteDefinition is not in the configs, set it to configs
// We should add the footnoteDefinition markdown ast nodes to tree after all the footnoteReference markdown ast nodes are added
if (!configs.has(footnoteDefinitionKey)) {
// clone the footnote reference
const clonedFootnoteReference = { ...footnote.reference };
// If the footnote reference contains url, encode it
if (clonedFootnoteReference.url) {
clonedFootnoteReference.url = encodeURIComponent(
clonedFootnoteReference.url
);
}
configs.set(
footnoteDefinitionKey,
JSON.stringify(clonedFootnoteReference)
);
}
return {
type: 'footnoteReference',
label: footnote.label,
identifier: footnote.label,
};
},
});
export const InlineDeltaToMarkdownAdapterExtensions = [
referenceDeltaToMarkdownAdapterMatcher,
linkDeltaToMarkdownAdapterMatcher,

View File

@@ -1,9 +1,6 @@
import { markdownFootnoteReferenceToDeltaMatcher } from '@blocksuite/affine-inline-footnote';
import { markdownLinkToDeltaMatcher } from '@blocksuite/affine-inline-link';
import { FootNoteReferenceParamsSchema } from '@blocksuite/affine-model';
import {
FOOTNOTE_DEFINITION_PREFIX,
MarkdownASTToDeltaExtension,
} from '@blocksuite/affine-shared/adapters';
import { MarkdownASTToDeltaExtension } from '@blocksuite/affine-shared/adapters';
export const markdownTextToDeltaMatcher = MarkdownASTToDeltaExtension({
name: 'text',
@@ -92,43 +89,6 @@ export const markdownInlineMathToDeltaMatcher = MarkdownASTToDeltaExtension({
},
});
export const markdownFootnoteReferenceToDeltaMatcher =
MarkdownASTToDeltaExtension({
name: 'footnote-reference',
match: ast => ast.type === 'footnoteReference',
toDelta: (ast, context) => {
if (ast.type !== 'footnoteReference') {
return [];
}
try {
const { configs } = context;
const footnoteDefinitionKey = `${FOOTNOTE_DEFINITION_PREFIX}${ast.identifier}`;
const footnoteDefinition = configs.get(footnoteDefinitionKey);
if (!footnoteDefinition) {
return [];
}
const footnoteDefinitionJson = JSON.parse(footnoteDefinition);
// If the footnote definition contains url, decode it
if (footnoteDefinitionJson.url) {
footnoteDefinitionJson.url = decodeURIComponent(
footnoteDefinitionJson.url
);
}
const footnoteReference = FootNoteReferenceParamsSchema.parse(
footnoteDefinitionJson
);
const footnote = {
label: ast.identifier,
reference: footnoteReference,
};
return [{ insert: ' ', attributes: { footnote } }];
} catch (error) {
console.warn('Error parsing footnote reference', error);
return [];
}
},
});
export const MarkdownInlineToDeltaAdapterExtensions = [
markdownTextToDeltaMatcher,
markdownInlineCodeToDeltaMatcher,

View File

@@ -1,3 +1,4 @@
import { FootNoteInlineSpecExtension } from '@blocksuite/affine-inline-footnote';
import { LinkInlineSpecExtension } from '@blocksuite/affine-inline-link';
import { ReferenceInlineSpecExtension } from '@blocksuite/affine-inline-reference';
import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
@@ -8,7 +9,6 @@ import {
BoldInlineSpecExtension,
CodeInlineSpecExtension,
ColorInlineSpecExtension,
FootNoteInlineSpecExtension,
ItalicInlineSpecExtension,
LatexInlineSpecExtension,
StrikeInlineSpecExtension,

View File

@@ -1,7 +1,4 @@
import { AffineText } from './nodes/affine-text';
import { AffineFootnoteNode } from './nodes/footnote-node/footnote-node';
import { FootNotePopup } from './nodes/footnote-node/footnote-popup';
import { FootNotePopupChip } from './nodes/footnote-node/footnote-popup-chip';
import { LatexEditorMenu } from './nodes/latex-node/latex-editor-menu';
import { LatexEditorUnit } from './nodes/latex-node/latex-editor-unit';
import { AffineLatexNode } from './nodes/latex-node/latex-node';
@@ -11,17 +8,11 @@ export function effects() {
customElements.define('latex-editor-menu', LatexEditorMenu);
customElements.define('latex-editor-unit', LatexEditorUnit);
customElements.define('affine-latex-node', AffineLatexNode);
customElements.define('affine-footnote-node', AffineFootnoteNode);
customElements.define('footnote-popup', FootNotePopup);
customElements.define('footnote-popup-chip', FootNotePopupChip);
}
declare global {
interface HTMLElementTagNameMap {
'affine-latex-node': AffineLatexNode;
'affine-footnote-node': AffineFootnoteNode;
'footnote-popup': FootNotePopup;
'footnote-popup-chip': FootNotePopupChip;
'affine-text': AffineText;
'latex-editor-unit': LatexEditorUnit;
'latex-editor-menu': LatexEditorMenu;

View File

@@ -9,4 +9,3 @@ export * from './exts';
export * from './inline-spec';
export * from './keymap';
export * from './markdown';
export * from './nodes';

View File

@@ -1,6 +1,6 @@
import { inlineFootnoteExtensions } from '@blocksuite/affine-inline-footnote';
import { inlineLinkExtensions } from '@blocksuite/affine-inline-link';
import { inlineReferenceExtensions } from '@blocksuite/affine-inline-reference';
import { FootNoteSchema } from '@blocksuite/affine-model';
import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
import { StdIdentifier } from '@blocksuite/block-std';
import {
@@ -11,8 +11,6 @@ import type { ExtensionType } from '@blocksuite/store';
import { html } from 'lit';
import { z } from 'zod';
import { FootNoteNodeConfigIdentifier } from './nodes/footnote-node/footnote-config.js';
export type AffineInlineRootElement = InlineRootElement<AffineTextAttributes>;
export const BoldInlineSpecExtension =
@@ -130,28 +128,6 @@ export const LatexEditorUnitSpecExtension =
},
});
export const FootNoteInlineSpecExtension =
InlineSpecExtension<AffineTextAttributes>('footnote', provider => {
const std = provider.get(StdIdentifier);
const config =
provider.getOptional(FootNoteNodeConfigIdentifier) ?? undefined;
return {
name: 'footnote',
schema: FootNoteSchema.optional().nullable().catch(undefined),
match: delta => {
return !!delta.attributes?.footnote;
},
renderer: ({ delta }) => {
return html`<affine-footnote-node
.delta=${delta}
.std=${std}
.config=${config}
></affine-footnote-node>`;
},
embed: true,
};
});
export const InlineSpecExtensions: ExtensionType[] = [
BoldInlineSpecExtension,
ItalicInlineSpecExtension,
@@ -164,5 +140,5 @@ export const InlineSpecExtensions: ExtensionType[] = [
...inlineLinkExtensions,
...inlineReferenceExtensions,
LatexEditorUnitSpecExtension,
FootNoteInlineSpecExtension,
...inlineFootnoteExtensions,
];

View File

@@ -8,6 +8,7 @@
"include": ["./src"],
"references": [
{ "path": "../../components" },
{ "path": "../footnote" },
{ "path": "../link" },
{ "path": "../reference" },
{ "path": "../../model" },

View File

@@ -1,4 +1,4 @@
import { FootNoteNodeConfigExtension } from '@blocksuite/affine/inlines/preset';
import { FootNoteNodeConfigExtension } from '@blocksuite/affine/inlines/footnote';
import type { SpecBuilder } from '@blocksuite/affine/shared/utils';
// Disable hover effect for footnote node

View File

@@ -30,6 +30,7 @@ export const PackageList = [
'blocksuite/affine/fragments/fragment-outline',
'blocksuite/affine/gfx/text',
'blocksuite/affine/gfx/turbo-renderer',
'blocksuite/affine/inlines/footnote',
'blocksuite/affine/inlines/link',
'blocksuite/affine/inlines/preset',
'blocksuite/affine/inlines/reference',
@@ -455,6 +456,19 @@ export const PackageList = [
'blocksuite/framework/store',
],
},
{
location: 'blocksuite/affine/inlines/footnote',
name: '@blocksuite/affine-inline-footnote',
workspaceDependencies: [
'blocksuite/affine/components',
'blocksuite/affine/inlines/reference',
'blocksuite/affine/model',
'blocksuite/affine/shared',
'blocksuite/framework/block-std',
'blocksuite/framework/global',
'blocksuite/framework/store',
],
},
{
location: 'blocksuite/affine/inlines/link',
name: '@blocksuite/affine-inline-link',
@@ -473,6 +487,7 @@ export const PackageList = [
name: '@blocksuite/affine-inline-preset',
workspaceDependencies: [
'blocksuite/affine/components',
'blocksuite/affine/inlines/footnote',
'blocksuite/affine/inlines/link',
'blocksuite/affine/inlines/reference',
'blocksuite/affine/model',
@@ -989,6 +1004,7 @@ export type PackageName =
| '@blocksuite/affine-fragment-outline'
| '@blocksuite/affine-gfx-text'
| '@blocksuite/affine-gfx-turbo-renderer'
| '@blocksuite/affine-inline-footnote'
| '@blocksuite/affine-inline-link'
| '@blocksuite/affine-inline-preset'
| '@blocksuite/affine-inline-reference'

View File

@@ -77,6 +77,7 @@
{ "path": "./blocksuite/affine/fragments/fragment-outline" },
{ "path": "./blocksuite/affine/gfx/text" },
{ "path": "./blocksuite/affine/gfx/turbo-renderer" },
{ "path": "./blocksuite/affine/inlines/footnote" },
{ "path": "./blocksuite/affine/inlines/link" },
{ "path": "./blocksuite/affine/inlines/preset" },
{ "path": "./blocksuite/affine/inlines/reference" },

View File

@@ -3010,6 +3010,34 @@ __metadata:
languageName: unknown
linkType: soft
"@blocksuite/affine-inline-footnote@workspace:*, @blocksuite/affine-inline-footnote@workspace:blocksuite/affine/inlines/footnote":
version: 0.0.0-use.local
resolution: "@blocksuite/affine-inline-footnote@workspace:blocksuite/affine/inlines/footnote"
dependencies:
"@blocksuite/affine-components": "workspace:*"
"@blocksuite/affine-inline-reference": "workspace:*"
"@blocksuite/affine-model": "workspace:*"
"@blocksuite/affine-shared": "workspace:*"
"@blocksuite/block-std": "workspace:*"
"@blocksuite/global": "workspace:*"
"@blocksuite/icons": "npm:^2.2.6"
"@blocksuite/store": "workspace:*"
"@floating-ui/dom": "npm:^1.6.13"
"@lit/context": "npm:^1.1.2"
"@preact/signals-core": "npm:^1.8.0"
"@toeverything/theme": "npm:^1.1.12"
"@types/lodash-es": "npm:^4.17.12"
collapse-white-space: "npm:^2.1.0"
date-fns: "npm:^4.0.0"
lit: "npm:^3.2.0"
lit-html: "npm:^3.2.1"
lodash-es: "npm:^4.17.21"
rxjs: "npm:^7.8.1"
yjs: "npm:^13.6.21"
zod: "npm:^3.23.8"
languageName: unknown
linkType: soft
"@blocksuite/affine-inline-link@workspace:*, @blocksuite/affine-inline-link@workspace:blocksuite/affine/inlines/link":
version: 0.0.0-use.local
resolution: "@blocksuite/affine-inline-link@workspace:blocksuite/affine/inlines/link"
@@ -3043,6 +3071,7 @@ __metadata:
resolution: "@blocksuite/affine-inline-preset@workspace:blocksuite/affine/inlines/preset"
dependencies:
"@blocksuite/affine-components": "workspace:*"
"@blocksuite/affine-inline-footnote": "workspace:*"
"@blocksuite/affine-inline-link": "workspace:*"
"@blocksuite/affine-inline-reference": "workspace:*"
"@blocksuite/affine-model": "workspace:*"
@@ -3369,6 +3398,7 @@ __metadata:
"@blocksuite/affine-fragment-outline": "workspace:*"
"@blocksuite/affine-gfx-text": "workspace:*"
"@blocksuite/affine-gfx-turbo-renderer": "workspace:*"
"@blocksuite/affine-inline-footnote": "workspace:*"
"@blocksuite/affine-inline-link": "workspace:*"
"@blocksuite/affine-inline-preset": "workspace:*"
"@blocksuite/affine-inline-reference": "workspace:*"