snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

blocksuite/affine/inlines/latex/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@blocksuite/affine-inline-latex",
+  "description": "Inline latex for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "yarn run -T tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/std": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@preact/signals-core": "^1.8.0",
+    "katex": "^0.16.27",
+    "lit": "^3.2.0",
+    "remark-math": "^6.0.0",
+    "shiki": "^3.19.0",
+    "yjs": "^13.6.27",
+    "zod": "^3.25.76"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./view": "./src/view.ts",
+    "./store": "./src/store.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.27.5"
+}

blocksuite/affine/inlines/latex/src/adapters/index.ts

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

blocksuite/affine/inlines/latex/src/adapters/markdown/inline-delta.ts

@@ -0,0 +1,21 @@
+import { InlineDeltaToMarkdownAdapterExtension } from '@blocksuite/affine-shared/adapters';
+import type { PhrasingContent } from 'mdast';
+
+export const latexDeltaToMarkdownAdapterMatcher =
+  InlineDeltaToMarkdownAdapterExtension({
+    name: 'inlineLatex',
+    match: delta => !!delta.attributes?.latex,
+    toAST: delta => {
+      const mdast: PhrasingContent = {
+        type: 'text',
+        value: delta.insert,
+      };
+      if (delta.attributes?.latex) {
+        return {
+          type: 'inlineMath',
+          value: delta.attributes.latex,
+        };
+      }
+      return mdast;
+    },
+  });

blocksuite/affine/inlines/latex/src/adapters/markdown/markdown-inline.ts

@@ -0,0 +1,12 @@
+import { MarkdownASTToDeltaExtension } from '@blocksuite/affine-shared/adapters';
+
+export const markdownInlineMathToDeltaMatcher = MarkdownASTToDeltaExtension({
+  name: 'inlineMath',
+  match: ast => ast.type === 'inlineMath',
+  toDelta: ast => {
+    if (!('value' in ast)) {
+      return [];
+    }
+    return [{ insert: ' ', attributes: { latex: ast.value } }];
+  },
+});

blocksuite/affine/inlines/latex/src/adapters/plain-text/inline-delta.ts

@@ -0,0 +1,21 @@
+import {
+  InlineDeltaToPlainTextAdapterExtension,
+  type TextBuffer,
+} from '@blocksuite/affine-shared/adapters';
+
+export const latexDeltaMarkdownAdapterMatch =
+  InlineDeltaToPlainTextAdapterExtension({
+    name: 'inlineLatex',
+    match: delta => !!delta.attributes?.latex,
+    toAST: delta => {
+      const node: TextBuffer = {
+        content: delta.insert,
+      };
+      if (!delta.attributes?.latex) {
+        return node;
+      }
+      return {
+        content: delta.attributes?.latex,
+      };
+    },
+  });

blocksuite/affine/inlines/latex/src/command.ts

@@ -0,0 +1,93 @@
+import {
+  DocModeProvider,
+  TelemetryProvider,
+} from '@blocksuite/affine-shared/services';
+import type { AffineInlineEditor } from '@blocksuite/affine-shared/types';
+import type { Command, TextSelection } from '@blocksuite/std';
+import type { InlineRange } from '@blocksuite/std/inline';
+
+function openInlineLatexEditor(
+  inlineEditor: AffineInlineEditor,
+  index: number
+) {
+  inlineEditor
+    .waitForUpdate()
+    .then(async () => {
+      await inlineEditor.waitForUpdate();
+
+      const textPoint = inlineEditor.getTextPoint(index);
+      if (!textPoint) return;
+      const [text] = textPoint;
+      const latexNode = text.parentElement?.closest('affine-latex-node');
+      if (!latexNode) return;
+      latexNode.toggleEditor();
+    })
+    .catch(console.error);
+}
+
+function getSingleBlockInlineRange(
+  textSelection: TextSelection
+): InlineRange | null {
+  if (textSelection.to) {
+    return null;
+  }
+
+  return {
+    index: textSelection.from.index,
+    length: textSelection.from.length,
+  };
+}
+
+export const insertInlineLatex: Command<{
+  currentTextSelection?: TextSelection;
+  textSelection?: TextSelection;
+}> = (ctx, next) => {
+  const textSelection = ctx.textSelection ?? ctx.currentTextSelection;
+  if (!textSelection) return;
+
+  const blockComponent = ctx.std.view.getBlock(textSelection.from.blockId);
+  if (!blockComponent) return;
+
+  const richText = blockComponent.querySelector('rich-text');
+  if (!richText) return;
+
+  const inlineEditor = richText.inlineEditor;
+  if (!inlineEditor) return;
+
+  const inlineRange = getSingleBlockInlineRange(textSelection);
+  if (!inlineRange) return;
+
+  const latex = textSelection.isCollapsed()
+    ? ''
+    : inlineEditor.yTextString.slice(
+        inlineRange.index,
+        inlineRange.index + inlineRange.length
+      );
+
+  inlineEditor.insertText(inlineRange, ' ', { latex });
+  inlineEditor.setInlineRange({
+    index: inlineRange.index,
+    length: 1,
+  });
+
+  const mode = ctx.std.get(DocModeProvider).getEditorMode() ?? 'page';
+  const ifEdgelessText = blockComponent.closest('affine-edgeless-text');
+  ctx.std.getOptional(TelemetryProvider)?.track('Latex', {
+    from:
+      mode === 'page'
+        ? 'doc'
+        : ifEdgelessText
+          ? 'edgeless text'
+          : 'edgeless note',
+    page: mode === 'page' ? 'doc' : 'edgeless',
+    segment: mode === 'page' ? 'doc' : 'whiteboard',
+    module: 'inline equation',
+    control: 'create inline equation',
+  });
+
+  if (textSelection.isCollapsed()) {
+    openInlineLatexEditor(inlineEditor, inlineRange.index + 1);
+  }
+
+  next();
+};

blocksuite/affine/inlines/latex/src/effects.ts

@@ -0,0 +1,17 @@
+import { LatexEditorMenu } from './latex-node/latex-editor-menu';
+import { LatexEditorUnit } from './latex-node/latex-editor-unit';
+import { AffineLatexNode } from './latex-node/latex-node';
+
+export function effects() {
+  customElements.define('latex-editor-menu', LatexEditorMenu);
+  customElements.define('latex-editor-unit', LatexEditorUnit);
+  customElements.define('affine-latex-node', AffineLatexNode);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-latex-node': AffineLatexNode;
+    'latex-editor-unit': LatexEditorUnit;
+    'latex-editor-menu': LatexEditorMenu;
+  }
+}

blocksuite/affine/inlines/latex/src/index.ts

@@ -0,0 +1,9 @@
+import type * as RichTextEffects from '@blocksuite/affine-rich-text/effects';
+import type RemarkMath from 'remark-math';
+
+export * from './adapters';
+export * from './command';
+export * from './inline-spec';
+export * from './markdown';
+
+declare type _GLOBAL_ = typeof RichTextEffects | typeof RemarkMath;

blocksuite/affine/inlines/latex/src/inline-spec.ts

@@ -0,0 +1,40 @@
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { StdIdentifier } from '@blocksuite/std';
+import { InlineSpecExtension } from '@blocksuite/std/inline';
+import { html } from 'lit';
+import { z } from 'zod';
+
+export const LatexInlineSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>('latex', provider => {
+    const std = provider.get(StdIdentifier);
+    return {
+      name: 'latex',
+      schema: z.object({
+        latex: z.string().optional().nullable().catch(undefined),
+      }),
+      match: delta => typeof delta.attributes?.latex === 'string',
+      renderer: ({ delta, selected, editor, startOffset, endOffset }) => {
+        return html`<affine-latex-node
+          .std=${std}
+          .delta=${delta}
+          .selected=${selected}
+          .editor=${editor}
+          .startOffset=${startOffset}
+          .endOffset=${endOffset}
+        ></affine-latex-node>`;
+      },
+      embed: true,
+    };
+  });
+
+export const LatexEditorUnitSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>({
+    name: 'latex-editor-unit',
+    schema: z.object({
+      'latex-editor-unit': z.undefined(),
+    }),
+    match: () => true,
+    renderer: ({ delta }) => {
+      return html`<latex-editor-unit .delta=${delta}></latex-editor-unit>`;
+    },
+  });

blocksuite/affine/inlines/latex/src/latex-node/latex-editor-menu.ts

@@ -0,0 +1,210 @@
+import { ColorScheme } from '@blocksuite/affine-model';
+import type { RichText } from '@blocksuite/affine-rich-text';
+import { ThemeProvider } from '@blocksuite/affine-shared/services';
+import { unsafeCSSVar } from '@blocksuite/affine-shared/theme';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
+import { noop } from '@blocksuite/global/utils';
+import { DoneIcon } from '@blocksuite/icons/lit';
+import { type BlockStdScope, ShadowlessElement } from '@blocksuite/std';
+import { InlineManagerExtension } from '@blocksuite/std/inline';
+import { effect, type Signal, signal } from '@preact/signals-core';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { codeToTokensBase, type ThemedToken } from 'shiki';
+import * as Y from 'yjs';
+
+import { LatexEditorUnitSpecExtension } from '../inline-spec';
+
+export const LatexEditorInlineManagerExtension =
+  InlineManagerExtension<AffineTextAttributes>({
+    id: 'latex-inline-editor',
+    enableMarkdown: false,
+    specs: [LatexEditorUnitSpecExtension.identifier],
+  });
+
+export class LatexEditorMenu extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
+  static override styles = css`
+    .latex-editor-container {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-template-rows: auto auto;
+      grid-template-areas:
+        'editor-box confirm-box'
+        'hint-box hint-box';
+
+      padding: 8px;
+      border-radius: 8px;
+      border: 0.5px solid ${unsafeCSSVar('borderColor')};
+      background: ${unsafeCSSVar('backgroundOverlayPanelColor')};
+
+      /* light/toolbarShadow */
+      box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.14);
+    }
+
+    .latex-editor {
+      grid-area: editor-box;
+      width: 280px;
+      padding: 4px 10px;
+
+      border-radius: 4px;
+      background: ${unsafeCSSVar('white10')};
+
+      /* light/activeShadow */
+      box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.3);
+
+      font-family: ${unsafeCSSVar('fontCodeFamily')};
+      border: 1px solid transparent;
+
+      max-height: 400px;
+      overflow-y: auto;
+    }
+    .latex-editor:focus-within {
+      border: 1px solid ${unsafeCSSVar('blue700')};
+    }
+
+    .latex-editor-confirm {
+      grid-area: confirm-box;
+      display: flex;
+      align-items: flex-end;
+      padding-left: 10px;
+    }
+
+    .latex-editor-hint {
+      grid-area: hint-box;
+      padding-top: 6px;
+
+      color: ${unsafeCSSVar('placeholderColor')};
+
+      /* MobileTypeface/caption */
+      font-family: 'SF Pro Text';
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 16px; /* 133.333% */
+      letter-spacing: -0.24px;
+    }
+  `;
+
+  highlightTokens$: Signal<ThemedToken[][]> = signal([]);
+
+  yText!: Y.Text;
+
+  get inlineManager() {
+    return this.std.get(LatexEditorInlineManagerExtension.identifier);
+  }
+
+  get richText() {
+    return this.querySelector<RichText>('rich-text');
+  }
+
+  private readonly _getVerticalScrollContainer = () => {
+    return this.querySelector('.latex-editor');
+  };
+
+  private _updateHighlightTokens(text: string) {
+    const editorTheme = this.std.get(ThemeProvider).theme;
+    const theme = editorTheme === ColorScheme.Dark ? 'dark-plus' : 'light-plus';
+
+    codeToTokensBase(text, {
+      lang: 'latex',
+      theme,
+    })
+      .then(token => {
+        this.highlightTokens$.value = token;
+      })
+      .catch(console.error);
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    const doc = new Y.Doc();
+    this.yText = doc.getText('latex');
+    this.yText.insert(0, this.latexSignal.value);
+
+    const yTextObserver = () => {
+      const text = this.yText.toString();
+      this.latexSignal.value = text;
+
+      this._updateHighlightTokens(text);
+    };
+    this.yText.observe(yTextObserver);
+    this.disposables.add(() => {
+      this.yText.unobserve(yTextObserver);
+    });
+
+    this.disposables.add(
+      effect(() => {
+        noop(this.highlightTokens$.value);
+        this.richText?.inlineEditor?.render();
+      })
+    );
+
+    this.disposables.add(
+      this.std.get(ThemeProvider).theme$.subscribe(() => {
+        this._updateHighlightTokens(this.yText.toString());
+      })
+    );
+
+    this.disposables.addFromEvent(this, 'keydown', e => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.abortController.abort();
+      }
+    });
+
+    this.disposables.addFromEvent(this, 'pointerdown', e => {
+      e.stopPropagation();
+    });
+    this.disposables.addFromEvent(this, 'pointerup', e => {
+      e.stopPropagation();
+    });
+
+    this.updateComplete
+      .then(async () => {
+        await this.richText?.updateComplete;
+
+        setTimeout(() => {
+          this.richText?.inlineEditor?.focusEnd();
+        });
+      })
+      .catch(console.error);
+  }
+
+  override render() {
+    return html`<div class="latex-editor-container">
+      <div class="latex-editor">
+        <div class="latex-editor-content">
+          <rich-text
+            .yText=${this.yText}
+            .attributesSchema=${this.inlineManager.getSchema()}
+            .attributeRenderer=${this.inlineManager.getRenderer()}
+            .verticalScrollContainerGetter=${this._getVerticalScrollContainer}
+          ></rich-text>
+        </div>
+      </div>
+      <div class="latex-editor-confirm">
+        <span @click=${() => this.abortController.abort()}
+          >${DoneIcon({
+            width: '24',
+            height: '24',
+          })}</span
+        >
+      </div>
+      <div class="latex-editor-hint">Shift Enter to line break</div>
+    </div>`;
+  }
+
+  @property({ attribute: false })
+  accessor abortController!: AbortController;
+
+  @property({ attribute: false })
+  accessor latexSignal!: Signal<string>;
+
+  @property({ attribute: false })
+  accessor std!: BlockStdScope;
+}

blocksuite/affine/inlines/latex/src/latex-node/latex-editor-unit.ts

@@ -0,0 +1,55 @@
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { ShadowlessElement } from '@blocksuite/std';
+import { ZERO_WIDTH_FOR_EMPTY_LINE } from '@blocksuite/std/inline';
+import type { DeltaInsert } from '@blocksuite/store';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+export class LatexEditorUnit extends ShadowlessElement {
+  get latexMenu() {
+    return this.closest('latex-editor-menu');
+  }
+
+  get vElement() {
+    return this.closest('v-element');
+  }
+
+  override render() {
+    const plainContent = html`<span
+      ><v-text .str=${this.delta.insert}></v-text
+    ></span>`;
+
+    const latexMenu = this.latexMenu;
+    const vElement = this.vElement;
+    if (!latexMenu || !vElement) {
+      return plainContent;
+    }
+
+    const lineIndex = this.vElement.lineIndex;
+    const tokens = latexMenu.highlightTokens$.value[lineIndex] ?? [];
+    if (
+      tokens.length === 0 ||
+      tokens.reduce((acc, token) => acc + token.content, '') !==
+        this.delta.insert
+    ) {
+      return plainContent;
+    }
+
+    return html`<span
+      >${tokens.map(token => {
+        return html`<v-text
+          .str=${token.content}
+          style=${styleMap({
+            color: token.color,
+          })}
+        ></v-text>`;
+      })}</span
+    >`;
+  }
+
+  @property({ attribute: false })
+  accessor delta: DeltaInsert<AffineTextAttributes> = {
+    insert: ZERO_WIDTH_FOR_EMPTY_LINE,
+  };
+}

blocksuite/affine/inlines/latex/src/latex-node/latex-node.ts

@@ -0,0 +1,285 @@
+import { createLitPortal } from '@blocksuite/affine-components/portal';
+import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
+import {
+  type BlockComponent,
+  type BlockStdScope,
+  ShadowlessElement,
+} from '@blocksuite/std';
+import {
+  type InlineEditor,
+  ZERO_WIDTH_FOR_EMBED_NODE,
+  ZERO_WIDTH_FOR_EMPTY_LINE,
+} from '@blocksuite/std/inline';
+import type { DeltaInsert } from '@blocksuite/store';
+import { signal } from '@preact/signals-core';
+import katex from 'katex';
+import { css, html, type PropertyValues, render } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export class AffineLatexNode extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
+  static override styles = css`
+    affine-latex-node {
+      display: inline-block;
+    }
+
+    affine-latex-node .affine-latex {
+      white-space: nowrap;
+      word-break: break-word;
+      color: ${unsafeCSSVar('textPrimaryColor')};
+      fill: var(--affine-icon-color);
+      border-radius: 4px;
+      text-decoration: none;
+      cursor: pointer;
+      user-select: none;
+      padding: 1px 2px 1px 0;
+      display: grid;
+      grid-template-columns: auto 0;
+      place-items: center;
+      padding: 0 4px;
+      margin: 0 2px;
+    }
+    affine-latex-node .affine-latex:hover {
+      background: ${unsafeCSSVar('hoverColor')};
+    }
+    affine-latex-node .affine-latex[data-selected='true'] {
+      background: ${unsafeCSSVar('hoverColor')};
+    }
+
+    affine-latex-node .error-placeholder {
+      display: flex;
+      padding: 2px 4px;
+      justify-content: center;
+      align-items: flex-start;
+      gap: 10px;
+
+      border-radius: 4px;
+      background: ${unsafeCSSVarV2('chip/label/red')};
+
+      color: ${unsafeCSSVarV2('text/highlight/fg/red')};
+      font-family: Inter;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: normal;
+    }
+
+    affine-latex-node .placeholder {
+      display: flex;
+      padding: 2px 4px;
+      justify-content: center;
+      align-items: flex-start;
+
+      border-radius: 4px;
+      background: ${unsafeCSSVarV2('layer/background/secondary')};
+
+      color: ${unsafeCSSVarV2('text/secondary')};
+      font-family: Inter;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: normal;
+    }
+  `;
+
+  private _editorAbortController: AbortController | null = null;
+
+  private _isEditorOpen = false;
+
+  readonly latex$ = signal('');
+
+  readonly latexEditorSignal = signal('');
+
+  get deltaLatex() {
+    return this.delta.attributes?.latex as string;
+  }
+
+  get latexContainer() {
+    return this.querySelector<HTMLElement>('.latex-container');
+  }
+
+  override connectedCallback() {
+    const result = super.connectedCallback();
+
+    this.latex$.value = this.deltaLatex;
+    this.latexEditorSignal.value = this.deltaLatex;
+
+    this.disposables.add(
+      this.latex$.subscribe(latex => {
+        this.latexEditorSignal.value = latex;
+        if (latex !== this.deltaLatex) {
+          this.editor.formatText(
+            {
+              index: this.startOffset,
+              length: this.endOffset - this.startOffset,
+            },
+            {
+              latex,
+            }
+          );
+        }
+      })
+    );
+
+    this.disposables.add(
+      this.latexEditorSignal.subscribe(latex => {
+        this.updateComplete
+          .then(() => {
+            const latexContainer = this.latexContainer;
+            if (!latexContainer) return;
+
+            latexContainer.replaceChildren();
+            // @ts-expect-error lit hack won't fix
+            delete latexContainer['_$litPart$'];
+
+            if (latex.length === 0) {
+              render(
+                html`<span class="placeholder">Equation</span>`,
+                latexContainer
+              );
+            } else {
+              try {
+                katex.render(latex, latexContainer, {
+                  displayMode: false,
+                });
+              } catch {
+                latexContainer.replaceChildren();
+                // @ts-expect-error lit hack won't fix
+                delete latexContainer['_$litPart$'];
+                render(
+                  html`<span class="error-placeholder">Error equation</span>`,
+                  latexContainer
+                );
+              }
+            }
+          })
+          .catch(console.error);
+      })
+    );
+
+    this._editorAbortController?.abort();
+    this._editorAbortController = new AbortController();
+    this.disposables.add(() => {
+      this._editorAbortController?.abort();
+    });
+
+    this.disposables.addFromEvent(this, 'click', e => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (this.readonly) {
+        return;
+      }
+      this.toggleEditor();
+    });
+
+    return result;
+  }
+
+  protected override updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (!changedProperties.has('delta') || this._isEditorOpen) {
+      return;
+    }
+
+    const latex = this.deltaLatex;
+    if (this.latex$.peek() !== latex) {
+      this.latex$.value = latex;
+    }
+    if (this.latexEditorSignal.peek() !== latex) {
+      this.latexEditorSignal.value = latex;
+    }
+  }
+
+  override render() {
+    return html`<span class="affine-latex" data-selected=${this.selected}
+      ><div class="latex-container"></div>
+      <v-text .str=${ZERO_WIDTH_FOR_EMBED_NODE}></v-text
+    ></span>`;
+  }
+
+  toggleEditor() {
+    const blockComponent = this.closest<BlockComponent>('[data-block-id]');
+    if (!blockComponent) return;
+
+    this._editorAbortController?.abort();
+    this._editorAbortController = new AbortController();
+
+    blockComponent.selection.setGroup('note', []);
+
+    const { portal } = createLitPortal({
+      template: html`<latex-editor-menu
+        .std=${this.std}
+        .latexSignal=${this.latexEditorSignal}
+        .abortController=${this._editorAbortController}
+      ></latex-editor-menu>`,
+      container: blockComponent.host,
+      computePosition: {
+        referenceElement: this,
+        placement: 'bottom-start',
+        autoUpdate: {
+          animationFrame: true,
+        },
+      },
+      closeOnClickAway: true,
+      abortController: this._editorAbortController,
+      shadowDom: false,
+      portalStyles: {
+        zIndex: 'var(--affine-z-index-popover)',
+      },
+    });
+
+    this._isEditorOpen = true;
+    this._editorAbortController.signal.addEventListener(
+      'abort',
+      () => {
+        this._isEditorOpen = false;
+        portal.remove();
+        const latex = this.latexEditorSignal.peek();
+        this.latex$.value = latex;
+
+        if (latex !== this.deltaLatex) {
+          this.editor.formatText(
+            {
+              index: this.startOffset,
+              length: this.endOffset - this.startOffset,
+            },
+            {
+              latex,
+            }
+          );
+          this.editor.setInlineRange({
+            index: this.endOffset,
+            length: 0,
+          });
+        }
+      },
+      { once: true }
+    );
+  }
+
+  get readonly() {
+    return this.std.store.readonly;
+  }
+
+  @property({ attribute: false })
+  accessor delta: DeltaInsert<AffineTextAttributes> = {
+    insert: ZERO_WIDTH_FOR_EMPTY_LINE,
+  };
+
+  @property({ attribute: false })
+  accessor editor!: InlineEditor<AffineTextAttributes>;
+
+  @property({ attribute: false })
+  accessor endOffset!: number;
+
+  @property({ attribute: false })
+  accessor selected = false;
+
+  @property({ attribute: false })
+  accessor startOffset!: number;
+
+  @property({ attribute: false })
+  accessor std!: BlockStdScope;
+}

blocksuite/affine/inlines/latex/src/markdown.ts

@@ -0,0 +1,180 @@
+import {
+  DocModeProvider,
+  TelemetryProvider,
+} from '@blocksuite/affine-shared/services';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import type { BlockComponent } from '@blocksuite/std';
+import { InlineMarkdownExtension } from '@blocksuite/std/inline';
+
+export const LatexExtension = InlineMarkdownExtension<AffineTextAttributes>({
+  name: 'latex',
+
+  pattern:
+    /(?:\$\$)(?<content>[^$]+)(?:\$\$)\s$|(?<blockPrefix>\$\$\$\$)\s$|(?<inlinePrefix>\$\$)\s$/g,
+  action: ({ inlineEditor, prefixText, inlineRange, pattern, undoManager }) => {
+    const match = pattern.exec(prefixText);
+    if (!match || !match.groups) return;
+    const content = match.groups['content'];
+    const inlinePrefix = match.groups['inlinePrefix'];
+    const blockPrefix = match.groups['blockPrefix'];
+
+    if (!inlineEditor.rootElement) return;
+    const blockComponent =
+      inlineEditor.rootElement.closest<BlockComponent>('[data-block-id]');
+    if (!blockComponent) return;
+
+    const doc = blockComponent.store;
+    const std = blockComponent.std;
+    const parentComponent = blockComponent.parentComponent;
+    if (!parentComponent) return;
+    const index = parentComponent.model.children.indexOf(blockComponent.model);
+    if (index === -1) return;
+    const mode = std.get(DocModeProvider).getEditorMode() ?? 'page';
+    const ifEdgelessText = blockComponent.closest('affine-edgeless-text');
+
+    if (blockPrefix === '$$$$') {
+      undoManager.stopCapturing();
+
+      inlineEditor.deleteText({
+        index: inlineRange.index - 5,
+        length: 5,
+      });
+
+      const id = doc.addBlock(
+        'affine:latex',
+        {
+          latex: '',
+        },
+        parentComponent.model,
+        index + 1
+      );
+      blockComponent.host.updateComplete
+        .then(() => {
+          const latexBlock = blockComponent.std.view.getBlock(id);
+          if (!latexBlock || latexBlock.flavour !== 'affine:latex') return;
+
+          //FIXME(@Flrande): wait for refactor
+          // @ts-expect-error BS-2241
+          latexBlock.toggleEditor();
+        })
+        .catch(console.error);
+
+      std.getOptional(TelemetryProvider)?.track('Latex', {
+        from:
+          mode === 'page'
+            ? 'doc'
+            : ifEdgelessText
+              ? 'edgeless text'
+              : 'edgeless note',
+        page: mode === 'page' ? 'doc' : 'edgeless',
+        segment: mode === 'page' ? 'doc' : 'whiteboard',
+        module: 'equation',
+        control: 'create equation',
+      });
+
+      return;
+    }
+
+    if (inlinePrefix === '$$') {
+      undoManager.stopCapturing();
+
+      inlineEditor.deleteText({
+        index: inlineRange.index - 3,
+        length: 3,
+      });
+      inlineEditor.insertText(
+        {
+          index: inlineRange.index - 3,
+          length: 0,
+        },
+        ' '
+      );
+      inlineEditor.formatText(
+        {
+          index: inlineRange.index - 3,
+          length: 1,
+        },
+        {
+          latex: '',
+        }
+      );
+
+      inlineEditor
+        .waitForUpdate()
+        .then(async () => {
+          await inlineEditor.waitForUpdate();
+
+          const textPoint = inlineEditor.getTextPoint(
+            inlineRange.index - 3 + 1
+          );
+          if (!textPoint) return;
+
+          const [text] = textPoint;
+          const latexNode = text.parentElement?.closest('affine-latex-node');
+          if (!latexNode) return;
+
+          latexNode.toggleEditor();
+        })
+        .catch(console.error);
+
+      std.getOptional(TelemetryProvider)?.track('Latex', {
+        from:
+          mode === 'page'
+            ? 'doc'
+            : ifEdgelessText
+              ? 'edgeless text'
+              : 'edgeless note',
+        page: mode === 'page' ? 'doc' : 'edgeless',
+        segment: mode === 'page' ? 'doc' : 'whiteboard',
+        module: 'inline equation',
+        control: 'create inline equation',
+      });
+
+      return;
+    }
+
+    if (!content || content.length === 0) return;
+
+    undoManager.stopCapturing();
+
+    const startIndex = inlineRange.index - 1 - 2 - content.length - 2;
+    inlineEditor.deleteText({
+      index: startIndex,
+      length: 2 + content.length + 2 + 1,
+    });
+    inlineEditor.insertText(
+      {
+        index: startIndex,
+        length: 0,
+      },
+      ' '
+    );
+    inlineEditor.formatText(
+      {
+        index: startIndex,
+        length: 1,
+      },
+      {
+        latex: String.raw`${content}`,
+      }
+    );
+
+    inlineEditor.setInlineRange({
+      index: startIndex + 1,
+      length: 0,
+    });
+
+    std.getOptional(TelemetryProvider)?.track('Latex', {
+      from:
+        mode === 'page'
+          ? 'doc'
+          : ifEdgelessText
+            ? 'edgeless text'
+            : 'edgeless note',
+      page: mode === 'page' ? 'doc' : 'edgeless',
+      segment: mode === 'page' ? 'doc' : 'whiteboard',
+      module: 'inline equation',
+      control: 'create inline equation',
+    });
+  },
+});

blocksuite/affine/inlines/latex/src/store.ts

@@ -0,0 +1,21 @@
+import {
+  type StoreExtensionContext,
+  StoreExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import {
+  latexDeltaMarkdownAdapterMatch,
+  latexDeltaToMarkdownAdapterMatcher,
+  markdownInlineMathToDeltaMatcher,
+} from './adapters';
+
+export class LatexStoreExtension extends StoreExtensionProvider {
+  override name = 'affine-latex-inline';
+
+  override setup(context: StoreExtensionContext) {
+    super.setup(context);
+    context.register(latexDeltaMarkdownAdapterMatch);
+    context.register(latexDeltaToMarkdownAdapterMatcher);
+    context.register(markdownInlineMathToDeltaMatcher);
+  }
+}

blocksuite/affine/inlines/latex/src/view.ts

@@ -0,0 +1,29 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import {
+  LatexEditorUnitSpecExtension,
+  LatexInlineSpecExtension,
+} from './inline-spec';
+import { LatexEditorInlineManagerExtension } from './latex-node/latex-editor-menu';
+
+export class LatexViewExtension extends ViewExtensionProvider {
+  override name = 'affine-latex-inline';
+
+  override effect(): void {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register([
+      LatexInlineSpecExtension,
+      LatexEditorUnitSpecExtension,
+      LatexEditorInlineManagerExtension,
+    ]);
+  }
+}

blocksuite/affine/inlines/latex/tsconfig.json

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