feat: extract latex block (#9327)

blocksuite/affine/block-latex/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@blocksuite/affine-block-latex",
+  "description": "Latex block for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "test:unit": "nx vite:test --run --passWithNoTests",
+    "test:unit:coverage": "nx vite:test --run --coverage",
+    "test:e2e": "playwright test"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-note": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/inline": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@floating-ui/dom": "^1.6.10",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.1",
+    "@types/katex": "^0.16.7",
+    "@types/mdast": "^4.0.4",
+    "katex": "^0.16.11",
+    "lit": "^3.2.0",
+    "minimatch": "^10.0.1",
+    "remark-math": "^6.0.0",
+    "zod": "^3.23.8"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ]
+}

blocksuite/affine/block-latex/src/effects.ts

@@ -1,7 +1,8 @@
-import type { insertLatexBlockCommand } from './commands.js';
+import type { insertLatexBlockCommand } from './commands';
+import { LatexBlockComponent } from './latex-block';
 
 export function effects() {
-  // TODO(@L-Sun): move other effects to this file
+  customElements.define('affine-latex', LatexBlockComponent);
 }
 
 declare global {

blocksuite/affine/block-latex/src/index.ts

@@ -0,0 +1,13 @@
+import type * as NoteType from '@blocksuite/affine-block-note/effects';
+import type * as CommandsType from '@blocksuite/affine-shared/commands';
+import type * as RemarkMathType from 'remark-math';
+
+export * from './adapters';
+export * from './latex-block';
+export * from './latex-spec';
+
+// Global types
+declare type _Global =
+  | typeof NoteType
+  | typeof CommandsType
+  | typeof RemarkMathType;

blocksuite/affine/block-latex/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src/",
+    "outDir": "./dist/",
+    "noEmit": false
+  },
+  "include": ["./src"],
+  "references": [
+    {
+      "path": "../../framework/global"
+    },
+    {
+      "path": "../../framework/store"
+    },
+    {
+      "path": "../../framework/block-std"
+    },
+    {
+      "path": "../../framework/inline"
+    },
+    {
+      "path": "../model"
+    },
+    {
+      "path": "../components"
+    },
+    {
+      "path": "../shared"
+    },
+    {
+      "path": "../block-note"
+    }
+  ]
+}

blocksuite/blocks/package.json

@@ -19,6 +19,7 @@
     "@blocksuite/affine-block-embed": "workspace:*",
     "@blocksuite/affine-block-frame": "workspace:*",
     "@blocksuite/affine-block-image": "workspace:*",
+    "@blocksuite/affine-block-latex": "workspace:*",
     "@blocksuite/affine-block-list": "workspace:*",
     "@blocksuite/affine-block-note": "workspace:*",
     "@blocksuite/affine-block-paragraph": "workspace:*",

blocksuite/blocks/src/_common/adapters/markdown/block-matcher.ts

@@ -8,13 +8,13 @@ import {
   embedYoutubeBlockMarkdownAdapterMatcher,
 } from '@blocksuite/affine-block-embed';
 import { imageBlockMarkdownAdapterMatcher } from '@blocksuite/affine-block-image';
+import { latexBlockMarkdownAdapterMatcher } from '@blocksuite/affine-block-latex';
 import { listBlockMarkdownAdapterMatcher } from '@blocksuite/affine-block-list';
 import { paragraphBlockMarkdownAdapterMatcher } from '@blocksuite/affine-block-paragraph';
 
 import { codeBlockMarkdownAdapterMatcher } from '../../../code-block/adapters/markdown.js';
 import { databaseBlockMarkdownAdapterMatcher } from '../../../database-block/adapters/markdown.js';
 import { dividerBlockMarkdownAdapterMatcher } from '../../../divider-block/adapters/markdown.js';
-import { latexBlockMarkdownAdapterMatcher } from '../../../latex-block/adapters/markdown.js';
 import { rootBlockMarkdownAdapterMatcher } from '../../../root-block/adapters/markdown.js';
 
 export const defaultBlockMarkdownAdapterMatchers = [

blocksuite/blocks/src/_common/adapters/notion-html/block-matcher.ts

@@ -7,6 +7,7 @@ import {
   EmbedYoutubeBlockNotionHtmlAdapterExtension,
 } from '@blocksuite/affine-block-embed';
 import { ImageBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-image';
+import { LatexBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-latex';
 import { ListBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-list';
 import { ParagraphBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-paragraph';
 import type { ExtensionType } from '@blocksuite/block-std';
@@ -14,7 +15,6 @@ import type { ExtensionType } from '@blocksuite/block-std';
 import { CodeBlockNotionHtmlAdapterExtension } from '../../../code-block/adapters/notion-html.js';
 import { DatabaseBlockNotionHtmlAdapterExtension } from '../../../database-block/adapters/notion-html.js';
 import { DividerBlockNotionHtmlAdapterExtension } from '../../../divider-block/adapters/notion-html.js';
-import { LatexBlockNotionHtmlAdapterExtension } from '../../../latex-block/adapters/notion-html.js';
 import { RootBlockNotionHtmlAdapterExtension } from '../../../root-block/adapters/notion-html.js';
 
 export const defaultBlockNotionHtmlAdapterMatchers: ExtensionType[] = [

blocksuite/blocks/src/_common/adapters/plain-text/block-matcher.ts

@@ -7,6 +7,7 @@ import {
   embedSyncedDocBlockPlainTextAdapterMatcher,
   embedYoutubeBlockPlainTextAdapterMatcher,
 } from '@blocksuite/affine-block-embed';
+import { latexBlockPlainTextAdapterMatcher } from '@blocksuite/affine-block-latex';
 import { listBlockPlainTextAdapterMatcher } from '@blocksuite/affine-block-list';
 import { paragraphBlockPlainTextAdapterMatcher } from '@blocksuite/affine-block-paragraph';
 import type { BlockPlainTextAdapterMatcher } from '@blocksuite/affine-shared/adapters';
@@ -14,7 +15,6 @@ import type { BlockPlainTextAdapterMatcher } from '@blocksuite/affine-shared/ada
 import { codeBlockPlainTextAdapterMatcher } from '../../../code-block/adapters/plain-text.js';
 import { databaseBlockPlainTextAdapterMatcher } from '../../../database-block/adapters/plain-text.js';
 import { dividerBlockPlainTextAdapterMatcher } from '../../../divider-block/adapters/plain-text.js';
-import { latexBlockPlainTextAdapterMatcher } from '../../../latex-block/adapters/plain-text.js';
 
 export const defaultBlockPlainTextAdapterMatchers: BlockPlainTextAdapterMatcher[] =
   [

blocksuite/blocks/src/_specs/group/edgeless.ts

@@ -1,8 +1,8 @@
 import { FrameBlockSpec } from '@blocksuite/affine-block-frame';
+import { LatexBlockSpec } from '@blocksuite/affine-block-latex';
 import { EdgelessSurfaceBlockSpec } from '@blocksuite/affine-block-surface';
 
 import { EdgelessTextBlockSpec } from '../../edgeless-text-block/index.js';
-import { LatexBlockSpec } from '../../latex-block/latex-spec.js';
 import { EdgelessRootBlockSpec } from '../../root-block/edgeless/edgeless-root-spec.js';
 import { EdgelessSurfaceRefBlockSpec } from '../../surface-ref-block/surface-ref-spec.js';
 

blocksuite/blocks/src/_specs/preset/edgeless-specs.ts

@@ -1,4 +1,5 @@
 import { FrameBlockSpec } from '@blocksuite/affine-block-frame';
+import { LatexBlockSpec } from '@blocksuite/affine-block-latex';
 import {
   ConnectionOverlay,
   EdgelessSurfaceBlockSpec,
@@ -7,7 +8,6 @@ import { FontLoaderService } from '@blocksuite/affine-shared/services';
 import type { ExtensionType } from '@blocksuite/block-std';
 
 import { EdgelessTextBlockSpec } from '../../edgeless-text-block/edgeless-text-spec.js';
-import { LatexBlockSpec } from '../../latex-block/latex-spec.js';
 import { EdgelessRootBlockSpec } from '../../root-block/edgeless/edgeless-root-spec.js';
 import {
   EdgelessFrameManager,

blocksuite/blocks/src/_specs/preset/page-specs.ts

@@ -1,8 +1,8 @@
+import { LatexBlockSpec } from '@blocksuite/affine-block-latex';
 import { PageSurfaceBlockSpec } from '@blocksuite/affine-block-surface';
 import { FontLoaderService } from '@blocksuite/affine-shared/services';
 import type { ExtensionType } from '@blocksuite/block-std';
 
-import { LatexBlockSpec } from '../../latex-block/latex-spec.js';
 import { PageRootBlockSpec } from '../../root-block/page/page-root-spec.js';
 import { PageSurfaceRefBlockSpec } from '../../surface-ref-block/surface-ref-spec.js';
 import { CommonFirstPartyBlockSpecs } from '../common.js';

blocksuite/blocks/src/_specs/preset/preview-specs.ts

@@ -1,4 +1,5 @@
 import { FrameBlockSpec } from '@blocksuite/affine-block-frame';
+import { LatexBlockSpec } from '@blocksuite/affine-block-latex';
 import {
   EdgelessSurfaceBlockSpec,
   PageSurfaceBlockSpec,
@@ -19,7 +20,6 @@ import {
 import { literal } from 'lit/static-html.js';
 
 import { EdgelessTextBlockSpec } from '../../edgeless-text-block/index.js';
-import { LatexBlockSpec } from '../../latex-block/latex-spec.js';
 import { PreviewEdgelessRootBlockSpec } from '../../root-block/edgeless/edgeless-root-spec.js';
 import { PageRootService } from '../../root-block/page/page-root-service.js';
 import {

blocksuite/blocks/src/effects.ts

@@ -3,6 +3,7 @@ import { effects as blockBookmarkEffects } from '@blocksuite/affine-block-bookma
 import { effects as blockEmbedEffects } from '@blocksuite/affine-block-embed/effects';
 import { effects as blockFrameEffects } from '@blocksuite/affine-block-frame/effects';
 import { effects as blockImageEffects } from '@blocksuite/affine-block-image/effects';
+import { effects as blockLatexEffects } from '@blocksuite/affine-block-latex/effects';
 import { effects as blockListEffects } from '@blocksuite/affine-block-list/effects';
 import { effects as blockNoteEffects } from '@blocksuite/affine-block-note/effects';
 import { effects as blockParagraphEffects } from '@blocksuite/affine-block-paragraph/effects';
@@ -65,8 +66,6 @@ import {
 import { DividerBlockComponent } from './divider-block/index.js';
 import type { insertEdgelessTextCommand } from './edgeless-text-block/commands/insert-edgeless-text.js';
 import { EdgelessTextBlockComponent } from './edgeless-text-block/index.js';
-import { effects as blockLatexEffects } from './latex-block/effects.js';
-import { LatexBlockComponent } from './latex-block/index.js';
 import { EdgelessAutoCompletePanel } from './root-block/edgeless/components/auto-complete/auto-complete-panel.js';
 import { EdgelessAutoComplete } from './root-block/edgeless/components/auto-complete/edgeless-auto-complete.js';
 import { EdgelessToolIconButton } from './root-block/edgeless/components/buttons/tool-icon-button.js';
@@ -298,7 +297,6 @@ export function effects() {
   customElements.define('center-peek', CenterPeek);
   customElements.define('database-datasource-note-renderer', NoteRenderer);
   customElements.define('database-datasource-block-renderer', BlockRenderer);
-  customElements.define('affine-latex', LatexBlockComponent);
   customElements.define('affine-page-root', PageRootBlockComponent);
   customElements.define('affine-preview-root', PreviewRootBlockComponent);
   customElements.define('affine-code', CodeBlockComponent);

blocksuite/blocks/src/index.ts

@@ -21,7 +21,6 @@ export * from './data-view-block/index.js';
 export * from './database-block/index.js';
 export * from './divider-block/index.js';
 export * from './edgeless-text-block/index.js';
-export * from './latex-block/index.js';
 export { EdgelessTemplatePanel } from './root-block/edgeless/components/toolbar/template/template-panel.js';
 export type {
   Template,
@@ -50,6 +49,7 @@ export * from '@blocksuite/affine-block-bookmark';
 export * from '@blocksuite/affine-block-embed';
 export * from '@blocksuite/affine-block-frame';
 export * from '@blocksuite/affine-block-image';
+export * from '@blocksuite/affine-block-latex';
 export * from '@blocksuite/affine-block-list';
 export * from '@blocksuite/affine-block-note';
 export * from '@blocksuite/affine-block-paragraph';

blocksuite/blocks/src/latex-block/index.ts

@@ -1,3 +0,0 @@
-export * from './adapters/index.js';
-export * from './latex-block.js';
-export * from './latex-spec.js';

blocksuite/blocks/tsconfig.json

@@ -31,6 +31,9 @@
     {
       "path": "../affine/block-paragraph"
     },
+    {
+      "path": "../affine/block-latex"
+    },
     {
       "path": "../affine/block-list"
     },

tools/utils/src/workspace.gen.ts

@@ -81,6 +81,20 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/block-latex',
+    name: '@blocksuite/affine-block-latex',
+    workspaceDependencies: [
+      'blocksuite/affine/block-note',
+      'blocksuite/affine/components',
+      'blocksuite/affine/model',
+      'blocksuite/affine/shared',
+      'blocksuite/framework/block-std',
+      'blocksuite/framework/global',
+      'blocksuite/framework/inline',
+      'blocksuite/framework/store',
+    ],
+  },
   {
     location: 'blocksuite/affine/block-list',
     name: '@blocksuite/affine-block-list',
@@ -197,6 +211,7 @@ export const PackageList = [
       'blocksuite/affine/block-embed',
       'blocksuite/affine/block-frame',
       'blocksuite/affine/block-image',
+      'blocksuite/affine/block-latex',
       'blocksuite/affine/block-list',
       'blocksuite/affine/block-note',
       'blocksuite/affine/block-paragraph',
@@ -535,6 +550,7 @@ export type PackageName =
   | '@blocksuite/affine-block-embed'
   | '@blocksuite/affine-block-frame'
   | '@blocksuite/affine-block-image'
+  | '@blocksuite/affine-block-latex'
   | '@blocksuite/affine-block-list'
   | '@blocksuite/affine-block-note'
   | '@blocksuite/affine-block-paragraph'

tsconfig.project.json

@@ -12,6 +12,7 @@
     { "path": "./blocksuite/affine/block-embed" },
     { "path": "./blocksuite/affine/block-frame" },
     { "path": "./blocksuite/affine/block-image" },
+    { "path": "./blocksuite/affine/block-latex" },
     { "path": "./blocksuite/affine/block-list" },
     { "path": "./blocksuite/affine/block-note" },
     { "path": "./blocksuite/affine/block-paragraph" },

yarn.lock

@@ -3340,6 +3340,32 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-block-latex@workspace:*, @blocksuite/affine-block-latex@workspace:blocksuite/affine/block-latex":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-block-latex@workspace:blocksuite/affine/block-latex"
+  dependencies:
+    "@blocksuite/affine-block-note": "workspace:*"
+    "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/block-std": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@blocksuite/inline": "workspace:*"
+    "@blocksuite/store": "workspace:*"
+    "@floating-ui/dom": "npm:^1.6.10"
+    "@lit/context": "npm:^1.1.2"
+    "@preact/signals-core": "npm:^1.8.0"
+    "@toeverything/theme": "npm:^1.1.1"
+    "@types/katex": "npm:^0.16.7"
+    "@types/mdast": "npm:^4.0.4"
+    katex: "npm:^0.16.11"
+    lit: "npm:^3.2.0"
+    minimatch: "npm:^10.0.1"
+    remark-math: "npm:^6.0.0"
+    zod: "npm:^3.23.8"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine-block-list@workspace:*, @blocksuite/affine-block-list@workspace:blocksuite/affine/block-list":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-block-list@workspace:blocksuite/affine/block-list"
@@ -3559,6 +3585,7 @@ __metadata:
     "@blocksuite/affine-block-embed": "workspace:*"
     "@blocksuite/affine-block-frame": "workspace:*"
     "@blocksuite/affine-block-image": "workspace:*"
+    "@blocksuite/affine-block-latex": "workspace:*"
     "@blocksuite/affine-block-list": "workspace:*"
     "@blocksuite/affine-block-note": "workspace:*"
     "@blocksuite/affine-block-paragraph": "workspace:*"