feat(editor): latex inline package (#11051)

blocksuite/affine/inlines/preset/package.json

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

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

@@ -1,11 +1,8 @@
 import { footnoteReferenceDeltaToMarkdownAdapterMatcher } from '@blocksuite/affine-inline-footnote';
+import { latexDeltaToMarkdownAdapterMatcher } from '@blocksuite/affine-inline-latex';
 import { linkDeltaToMarkdownAdapterMatcher } from '@blocksuite/affine-inline-link';
 import { referenceDeltaToMarkdownAdapterMatcher } from '@blocksuite/affine-inline-reference';
 import { InlineDeltaToMarkdownAdapterExtension } from '@blocksuite/affine-shared/adapters';
-import type { PhrasingContent } from 'mdast';
-import type RemarkMath from 'remark-math';
-
-declare type _GLOBAL_ = typeof RemarkMath;
 
 export const boldDeltaToMarkdownAdapterMatcher =
   InlineDeltaToMarkdownAdapterExtension({
@@ -56,25 +53,6 @@ export const inlineCodeDeltaToMarkdownAdapterMatcher =
     }),
   });
 
-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;
-    },
-  });
-
 export const InlineDeltaToMarkdownAdapterExtensions = [
   referenceDeltaToMarkdownAdapterMatcher,
   linkDeltaToMarkdownAdapterMatcher,

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

@@ -1,4 +1,5 @@
 import { markdownFootnoteReferenceToDeltaMatcher } from '@blocksuite/affine-inline-footnote';
+import { markdownInlineMathToDeltaMatcher } from '@blocksuite/affine-inline-latex';
 import { markdownLinkToDeltaMatcher } from '@blocksuite/affine-inline-link';
 import { MarkdownASTToDeltaExtension } from '@blocksuite/affine-shared/adapters';
 
@@ -78,17 +79,6 @@ export const markdownListToDeltaMatcher = MarkdownASTToDeltaExtension({
   toDelta: () => [],
 });
 
-export const markdownInlineMathToDeltaMatcher = MarkdownASTToDeltaExtension({
-  name: 'inlineMath',
-  match: ast => ast.type === 'inlineMath',
-  toDelta: ast => {
-    if (!('value' in ast)) {
-      return [];
-    }
-    return [{ insert: ' ', attributes: { latex: ast.value } }];
-  },
-});
-
 export const MarkdownInlineToDeltaAdapterExtensions = [
   markdownTextToDeltaMatcher,
   markdownInlineCodeToDeltaMatcher,

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

@@ -1,28 +1,8 @@
+import { latexDeltaMarkdownAdapterMatch } from '@blocksuite/affine-inline-latex';
 import { linkDeltaMarkdownAdapterMatch } from '@blocksuite/affine-inline-link';
 import { referenceDeltaMarkdownAdapterMatch } from '@blocksuite/affine-inline-reference';
-import {
-  InlineDeltaToPlainTextAdapterExtension,
-  type TextBuffer,
-} from '@blocksuite/affine-shared/adapters';
 import type { ExtensionType } from '@blocksuite/store';
 
-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,
-      };
-    },
-  });
-
 export const InlineDeltaToPlainTextAdapterExtensions: ExtensionType[] = [
   referenceDeltaMarkdownAdapterMatch,
   linkDeltaMarkdownAdapterMatch,

blocksuite/affine/inlines/preset/src/command/index.ts

@@ -9,7 +9,6 @@ export { deleteTextCommand } from './delete-text.js';
 export { formatBlockCommand } from './format-block.js';
 export { formatNativeCommand } from './format-native.js';
 export { formatTextCommand } from './format-text.js';
-export { insertInlineLatex } from './insert-inline-latex.js';
 export {
   getTextStyle,
   isTextStyleActive,

blocksuite/affine/inlines/preset/src/command/insert-inline-latex.ts

@@ -1,55 +0,0 @@
-import type { Command, TextSelection } from '@blocksuite/block-std';
-
-export const insertInlineLatex: Command<{
-  currentTextSelection?: TextSelection;
-  textSelection?: TextSelection;
-}> = (ctx, next) => {
-  const textSelection = ctx.textSelection ?? ctx.currentTextSelection;
-  if (!textSelection || !textSelection.isCollapsed()) 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;
-
-  inlineEditor.insertText(
-    {
-      index: textSelection.from.index,
-      length: 0,
-    },
-    ' '
-  );
-  inlineEditor.formatText(
-    {
-      index: textSelection.from.index,
-      length: 1,
-    },
-    {
-      latex: '',
-    }
-  );
-  inlineEditor.setInlineRange({
-    index: textSelection.from.index,
-    length: 1,
-  });
-
-  inlineEditor
-    .waitForUpdate()
-    .then(async () => {
-      await inlineEditor.waitForUpdate();
-
-      const textPoint = inlineEditor.getTextPoint(textSelection.from.index + 1);
-      if (!textPoint) return;
-      const [text] = textPoint;
-      const latexNode = text.parentElement?.closest('affine-latex-node');
-      if (!latexNode) return;
-      latexNode.toggleEditor();
-    })
-    .catch(console.error);
-
-  next();
-};

blocksuite/affine/inlines/preset/src/default-inline-manager.ts

@@ -1,4 +1,5 @@
 import { FootNoteInlineSpecExtension } from '@blocksuite/affine-inline-footnote';
+import { LatexInlineSpecExtension } from '@blocksuite/affine-inline-latex';
 import { LinkInlineSpecExtension } from '@blocksuite/affine-inline-link';
 import { ReferenceInlineSpecExtension } from '@blocksuite/affine-inline-reference';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
@@ -10,7 +11,6 @@ import {
   CodeInlineSpecExtension,
   ColorInlineSpecExtension,
   ItalicInlineSpecExtension,
-  LatexInlineSpecExtension,
   StrikeInlineSpecExtension,
   UnderlineInlineSpecExtension,
 } from './inline-spec';

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

@@ -1,20 +1,11 @@
 import { AffineText } from './nodes/affine-text';
-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';
 
 export function effects() {
   customElements.define('affine-text', AffineText);
-  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;
     'affine-text': AffineText;
-    'latex-editor-unit': LatexEditorUnit;
-    'latex-editor-menu': LatexEditorMenu;
   }
 }

blocksuite/affine/inlines/preset/src/exts.ts

@@ -2,12 +2,10 @@ import { InlineAdapterExtensions } from './adapters/extensions';
 import { DefaultInlineManagerExtension } from './default-inline-manager';
 import { InlineSpecExtensions } from './inline-spec';
 import { MarkdownExtensions } from './markdown';
-import { LatexEditorInlineManagerExtension } from './nodes/latex-node/latex-editor-menu';
 
 export const inlinePresetExtensions = [
   DefaultInlineManagerExtension,
   ...MarkdownExtensions,
-  LatexEditorInlineManagerExtension,
   ...InlineSpecExtensions,
   ...InlineAdapterExtensions,
 ];

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

@@ -1,8 +1,8 @@
 import { inlineFootnoteExtensions } from '@blocksuite/affine-inline-footnote';
+import { inlineLatexExtensions } from '@blocksuite/affine-inline-latex';
 import { inlineLinkExtensions } from '@blocksuite/affine-inline-link';
 import { inlineReferenceExtensions } from '@blocksuite/affine-inline-reference';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
-import { StdIdentifier } from '@blocksuite/block-std';
 import {
   type InlineRootElement,
   InlineSpecExtension,
@@ -97,37 +97,6 @@ export const ColorInlineSpecExtension =
     },
   });
 
-export const LatexInlineSpecExtension =
-  InlineSpecExtension<AffineTextAttributes>('latex', provider => {
-    const std = provider.get(StdIdentifier);
-    return {
-      name: 'latex',
-      schema: 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.undefined(),
-    match: () => true,
-    renderer: ({ delta }) => {
-      return html`<latex-editor-unit .delta=${delta}></latex-editor-unit>`;
-    },
-  });
-
 export const InlineSpecExtensions: ExtensionType[] = [
   BoldInlineSpecExtension,
   ItalicInlineSpecExtension,
@@ -136,9 +105,8 @@ export const InlineSpecExtensions: ExtensionType[] = [
   CodeInlineSpecExtension,
   BackgroundInlineSpecExtension,
   ColorInlineSpecExtension,
-  LatexInlineSpecExtension,
   ...inlineLinkExtensions,
   ...inlineReferenceExtensions,
-  LatexEditorUnitSpecExtension,
+  ...inlineLatexExtensions,
   ...inlineFootnoteExtensions,
 ];

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

@@ -1,5 +1,6 @@
+import { LatexExtension } from '@blocksuite/affine-inline-latex';
+import { LinkExtension } from '@blocksuite/affine-inline-link';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
-import type { BlockComponent } from '@blocksuite/block-std';
 import { InlineMarkdownExtension } from '@blocksuite/block-std/inline';
 import type { ExtensionType } from '@blocksuite/store';
 
@@ -363,236 +364,6 @@ export const CodeExtension = InlineMarkdownExtension<AffineTextAttributes>({
   },
 });
 
-export const LinkExtension = InlineMarkdownExtension<AffineTextAttributes>({
-  name: 'link',
-  pattern: /.*\[(.+?)\]\((.+?)\)$/,
-  action: ({ inlineEditor, prefixText, inlineRange, pattern, undoManager }) => {
-    const match = prefixText.match(pattern);
-    if (!match) return;
-
-    const linkText = match[1];
-    const linkUrl = match[2];
-    const annotatedText = match[0].slice(-linkText.length - linkUrl.length - 4);
-    const startIndex = inlineRange.index - annotatedText.length;
-
-    inlineEditor.insertText(
-      {
-        index: inlineRange.index,
-        length: 0,
-      },
-      ' '
-    );
-    inlineEditor.setInlineRange({
-      index: inlineRange.index + 1,
-      length: 0,
-    });
-
-    undoManager.stopCapturing();
-
-    // aaa[bbb](baidu.com) + space
-
-    // delete (baidu.com) + space
-    inlineEditor.deleteText({
-      index: startIndex + 1 + linkText.length + 1,
-      length: 1 + linkUrl.length + 1 + 1,
-    });
-    // delete [ and ]
-    inlineEditor.deleteText({
-      index: startIndex + 1 + linkText.length,
-      length: 1,
-    });
-    inlineEditor.deleteText({
-      index: startIndex,
-      length: 1,
-    });
-
-    inlineEditor.formatText(
-      {
-        index: startIndex,
-        length: linkText.length,
-      },
-      {
-        link: linkUrl,
-      }
-    );
-
-    inlineEditor.setInlineRange({
-      index: startIndex + linkText.length,
-      length: 0,
-    });
-  },
-});
-
-export const LatexExtension = InlineMarkdownExtension<AffineTextAttributes>({
-  name: 'latex',
-
-  pattern:
-    /(?:\$\$)(?<content>[^$]+)(?:\$\$)$|(?<blockPrefix>\$\$\$\$)|(?<inlinePrefix>\$\$)$/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 (blockPrefix === '$$$$') {
-      inlineEditor.insertText(
-        {
-          index: inlineRange.index,
-          length: 0,
-        },
-        ' '
-      );
-      inlineEditor.setInlineRange({
-        index: inlineRange.index + 1,
-        length: 0,
-      });
-
-      undoManager.stopCapturing();
-
-      if (!inlineEditor.rootElement) return;
-      const blockComponent =
-        inlineEditor.rootElement.closest<BlockComponent>('[data-block-id]');
-      if (!blockComponent) return;
-
-      const doc = blockComponent.doc;
-      const parentComponent = blockComponent.parentComponent;
-      if (!parentComponent) return;
-
-      const index = parentComponent.model.children.indexOf(
-        blockComponent.model
-      );
-      if (index === -1) return;
-
-      inlineEditor.deleteText({
-        index: inlineRange.index - 4,
-        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);
-
-      return;
-    }
-
-    if (inlinePrefix === '$$') {
-      inlineEditor.insertText(
-        {
-          index: inlineRange.index,
-          length: 0,
-        },
-        ' '
-      );
-      inlineEditor.setInlineRange({
-        index: inlineRange.index + 1,
-        length: 0,
-      });
-
-      undoManager.stopCapturing();
-
-      inlineEditor.deleteText({
-        index: inlineRange.index - 2,
-        length: 3,
-      });
-      inlineEditor.insertText(
-        {
-          index: inlineRange.index - 2,
-          length: 0,
-        },
-        ' '
-      );
-      inlineEditor.formatText(
-        {
-          index: inlineRange.index - 2,
-          length: 1,
-        },
-        {
-          latex: '',
-        }
-      );
-
-      inlineEditor
-        .waitForUpdate()
-        .then(async () => {
-          await inlineEditor.waitForUpdate();
-
-          const textPoint = inlineEditor.getTextPoint(
-            inlineRange.index - 2 + 1
-          );
-          if (!textPoint) return;
-
-          const [text] = textPoint;
-          const latexNode = text.parentElement?.closest('affine-latex-node');
-          if (!latexNode) return;
-
-          latexNode.toggleEditor();
-        })
-        .catch(console.error);
-
-      return;
-    }
-
-    if (!content || content.length === 0) return;
-
-    inlineEditor.insertText(
-      {
-        index: inlineRange.index,
-        length: 0,
-      },
-      ' '
-    );
-    inlineEditor.setInlineRange({
-      index: inlineRange.index + 1,
-      length: 0,
-    });
-
-    undoManager.stopCapturing();
-
-    const startIndex = inlineRange.index - 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,
-    });
-  },
-});
-
 export const MarkdownExtensions: ExtensionType[] = [
   BoldItalicMarkdown,
   BoldMarkdown,

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

@@ -1,199 +0,0 @@
-import { ColorScheme } from '@blocksuite/affine-model';
-import { ThemeProvider } from '@blocksuite/affine-shared/services';
-import { unsafeCSSVar } from '@blocksuite/affine-shared/theme';
-import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
-import { type BlockStdScope, ShadowlessElement } from '@blocksuite/block-std';
-import { InlineManagerExtension } from '@blocksuite/block-std/inline';
-import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
-import { noop } from '@blocksuite/global/utils';
-import { DoneIcon } from '@blocksuite/icons/lit';
-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;
-    }
-    .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('rich-text');
-  }
-
-  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">
-        <rich-text
-          .yText=${this.yText}
-          .attributesSchema=${this.inlineManager.getSchema()}
-          .attributeRenderer=${this.inlineManager.getRenderer()}
-        ></rich-text>
-      </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/preset/src/nodes/latex-node/latex-editor-unit.ts

@@ -1,55 +0,0 @@
-import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
-import { ShadowlessElement } from '@blocksuite/block-std';
-import { ZERO_WIDTH_SPACE } from '@blocksuite/block-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_SPACE,
-  };
-}

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

@@ -1,264 +0,0 @@
-import { createLitPortal } from '@blocksuite/affine-components/portal';
-import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
-import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
-import {
-  type BlockComponent,
-  type BlockStdScope,
-  ShadowlessElement,
-} from '@blocksuite/block-std';
-import {
-  type InlineEditor,
-  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 { signal } from '@preact/signals-core';
-import katex from 'katex';
-import { css, html, 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;
-
-  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: true,
-                  output: 'mathml',
-                });
-              } 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;
-  }
-
-  override render() {
-    return html`<span class="affine-latex" data-selected=${this.selected}
-      ><div class="latex-container"></div>
-      <v-text .str=${ZERO_WIDTH_NON_JOINER}></v-text
-    ></span>`;
-  }
-
-  toggleEditor() {
-    const blockComponent = this.closest<BlockComponent>('[data-block-id]');
-    if (!blockComponent) return;
-
-    this._editorAbortController?.abort();
-    this._editorAbortController = new AbortController();
-
-    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._editorAbortController.signal.addEventListener(
-      'abort',
-      () => {
-        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_SPACE,
-  };
-
-  @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/preset/tsconfig.json

@@ -9,6 +9,7 @@
   "references": [
     { "path": "../../components" },
     { "path": "../footnote" },
+    { "path": "../latex" },
     { "path": "../link" },
     { "path": "../reference" },
     { "path": "../../model" },