chore: merge blocksuite source code (#9213)

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

@@ -0,0 +1,3 @@
+export * from './markdown.js';
+export * from './notion-html.js';
+export * from './plain-text.js';

blocksuite/blocks/src/latex-block/adapters/markdown.ts

@@ -0,0 +1,55 @@
+import { LatexBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockMarkdownAdapterExtension,
+  type BlockMarkdownAdapterMatcher,
+  type MarkdownAST,
+} from '@blocksuite/affine-shared/adapters';
+import { nanoid } from '@blocksuite/store';
+
+const isLatexNode = (node: MarkdownAST) => node.type === 'math';
+
+export const latexBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
+  flavour: LatexBlockSchema.model.flavour,
+  toMatch: o => isLatexNode(o.node),
+  fromMatch: o => o.node.flavour === LatexBlockSchema.model.flavour,
+  toBlockSnapshot: {
+    enter: (o, context) => {
+      const latex = 'value' in o.node ? o.node.value : '';
+      const { walkerContext } = context;
+      walkerContext
+        .openNode(
+          {
+            type: 'block',
+            id: nanoid(),
+            flavour: 'affine:latex',
+            props: {
+              latex,
+            },
+            children: [],
+          },
+          'children'
+        )
+        .closeNode();
+    },
+  },
+  fromBlockSnapshot: {
+    enter: (o, context) => {
+      const latex =
+        'latex' in o.node.props ? (o.node.props.latex as string) : '';
+      const { walkerContext } = context;
+      walkerContext
+        .openNode(
+          {
+            type: 'math',
+            value: latex,
+          },
+          'children'
+        )
+        .closeNode();
+    },
+  },
+};
+
+export const LatexBlockMarkdownAdapterExtension = BlockMarkdownAdapterExtension(
+  latexBlockMarkdownAdapterMatcher
+);

blocksuite/blocks/src/latex-block/adapters/notion-html.ts

@@ -0,0 +1,50 @@
+import { LatexBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockNotionHtmlAdapterExtension,
+  type BlockNotionHtmlAdapterMatcher,
+  HastUtils,
+} from '@blocksuite/affine-shared/adapters';
+import { nanoid } from '@blocksuite/store';
+
+export const latexBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher =
+  {
+    flavour: LatexBlockSchema.model.flavour,
+    toMatch: o => {
+      return (
+        HastUtils.isElement(o.node) &&
+        o.node.tagName === 'figure' &&
+        !!HastUtils.querySelector(o.node, '.equation-container')
+      );
+    },
+    fromMatch: () => false,
+    toBlockSnapshot: {
+      enter: (o, context) => {
+        if (!HastUtils.isElement(o.node)) {
+          return;
+        }
+        const { walkerContext } = context;
+        const latex = HastUtils.getTextContent(
+          HastUtils.querySelector(o.node, 'annotation')
+        );
+        walkerContext
+          .openNode(
+            {
+              type: 'block',
+              id: nanoid(),
+              flavour: LatexBlockSchema.model.flavour,
+              props: {
+                latex,
+              },
+              children: [],
+            },
+            'children'
+          )
+          .closeNode();
+        walkerContext.skipAllChildren();
+      },
+    },
+    fromBlockSnapshot: {},
+  };
+
+export const LatexBlockNotionHtmlAdapterExtension =
+  BlockNotionHtmlAdapterExtension(latexBlockNotionHtmlAdapterMatcher);

blocksuite/blocks/src/latex-block/adapters/plain-text.ts

@@ -0,0 +1,29 @@
+import { LatexBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockPlainTextAdapterExtension,
+  type BlockPlainTextAdapterMatcher,
+} from '@blocksuite/affine-shared/adapters';
+
+const latexPrefix = 'LaTex, with value: ';
+
+export const latexBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher = {
+  flavour: LatexBlockSchema.model.flavour,
+  toMatch: () => false,
+  fromMatch: o => o.node.flavour === LatexBlockSchema.model.flavour,
+  toBlockSnapshot: {},
+  fromBlockSnapshot: {
+    enter: (o, context) => {
+      const latex =
+        'latex' in o.node.props ? (o.node.props.latex as string) : '';
+
+      const { textBuffer } = context;
+      if (latex) {
+        textBuffer.content += `${latexPrefix}${latex}`;
+        textBuffer.content += '\n';
+      }
+    },
+  },
+};
+
+export const LatexBlockPlainTextAdapterExtension =
+  BlockPlainTextAdapterExtension(latexBlockPlainTextAdapterMatcher);

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

@@ -0,0 +1,57 @@
+import type { LatexProps } from '@blocksuite/affine-model';
+import type { BlockCommands, Command } from '@blocksuite/block-std';
+import { assertInstanceOf } from '@blocksuite/global/utils';
+
+import { LatexBlockComponent } from './latex-block.js';
+
+export const insertLatexBlockCommand: Command<
+  'selectedModels',
+  'insertedLatexBlockId',
+  {
+    latex?: string;
+    place?: 'after' | 'before';
+    removeEmptyLine?: boolean;
+  }
+> = (ctx, next) => {
+  const { selectedModels, latex, place, removeEmptyLine, std } = ctx;
+  if (!selectedModels?.length) return;
+
+  const targetModel =
+    place === 'before'
+      ? selectedModels[0]
+      : selectedModels[selectedModels.length - 1];
+
+  const latexBlockProps: Partial<LatexProps> & {
+    flavour: 'affine:latex';
+  } = {
+    flavour: 'affine:latex',
+    latex: latex ?? '',
+  };
+
+  const result = std.doc.addSiblingBlocks(
+    targetModel,
+    [latexBlockProps],
+    place
+  );
+  if (result.length === 0) return;
+
+  if (removeEmptyLine && targetModel.text?.length === 0) {
+    std.doc.deleteBlock(targetModel);
+  }
+
+  next({
+    insertedLatexBlockId: std.host.updateComplete.then(async () => {
+      if (!latex) {
+        const blockComponent = std.view.getBlock(result[0]);
+        assertInstanceOf(blockComponent, LatexBlockComponent);
+        await blockComponent.updateComplete;
+        blockComponent.toggleEditor();
+      }
+      return result[0];
+    }),
+  });
+};
+
+export const commands: BlockCommands = {
+  insertLatexBlock: insertLatexBlockCommand,
+};

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

@@ -0,0 +1,24 @@
+import type { insertLatexBlockCommand } from './commands.js';
+
+export function effects() {
+  // TODO(@L-Sun): move other effects to this file
+}
+
+declare global {
+  namespace BlockSuite {
+    interface CommandContext {
+      insertedLatexBlockId?: Promise<string>;
+    }
+
+    interface Commands {
+      /**
+       * insert a LaTeX block after or before the current block selection
+       * @param latex the LaTeX content. A input dialog will be shown if not provided
+       * @param place where to insert the LaTeX block
+       * @param removeEmptyLine remove the current block if it is empty
+       * @returns the id of the inserted LaTeX block
+       */
+      insertLatexBlock: typeof insertLatexBlockCommand;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,151 @@
+import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
+import { createLitPortal } from '@blocksuite/affine-components/portal';
+import type { LatexBlockModel } from '@blocksuite/affine-model';
+import type { Placement } from '@floating-ui/dom';
+import { effect } from '@preact/signals-core';
+import katex from 'katex';
+import { html, render } from 'lit';
+import { query } from 'lit/decorators.js';
+
+import { latexBlockStyles } from './styles.js';
+
+export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel> {
+  static override styles = latexBlockStyles;
+
+  private _editorAbortController: AbortController | null = null;
+
+  get editorPlacement(): Placement {
+    return 'bottom';
+  }
+
+  get isBlockSelected() {
+    const blockSelection = this.selection.filter('block');
+    return blockSelection.some(
+      selection => selection.blockId === this.model.id
+    );
+  }
+
+  override firstUpdated(props: Map<string, unknown>) {
+    super.firstUpdated(props);
+
+    const { disposables } = this;
+
+    this._editorAbortController?.abort();
+    this._editorAbortController = new AbortController();
+    disposables.add(() => {
+      this._editorAbortController?.abort();
+    });
+
+    const katexContainer = this._katexContainer;
+    if (!katexContainer) return;
+
+    disposables.add(
+      effect(() => {
+        const latex = this.model.latex$.value;
+
+        katexContainer.replaceChildren();
+        // @ts-expect-error FIXME: ts error
+        delete katexContainer['_$litPart$'];
+
+        if (latex.length === 0) {
+          render(
+            html`<span class="latex-block-empty-placeholder">Equation</span>`,
+            katexContainer
+          );
+        } else {
+          try {
+            katex.render(latex, katexContainer, {
+              displayMode: true,
+              output: 'mathml',
+            });
+          } catch {
+            katexContainer.replaceChildren();
+            // @ts-expect-error FIXME: ts error
+            delete katexContainer['_$litPart$'];
+            render(
+              html`<span class="latex-block-error-placeholder"
+                >Error equation</span
+              >`,
+              katexContainer
+            );
+          }
+        }
+      })
+    );
+
+    this.disposables.addFromEvent(this, 'click', () => {
+      if (this.isBlockSelected) {
+        this.toggleEditor();
+      } else {
+        this.selectBlock();
+      }
+    });
+  }
+
+  removeEditor(portal: HTMLDivElement) {
+    portal.remove();
+  }
+
+  override renderBlock() {
+    return html`
+      <div contenteditable="false" class="latex-block-container">
+        <div class="katex"></div>
+      </div>
+    `;
+  }
+
+  selectBlock() {
+    this.host.command.exec('selectBlock', {
+      focusBlock: this,
+    });
+  }
+
+  toggleEditor() {
+    const katexContainer = this._katexContainer;
+    if (!katexContainer) return;
+
+    this._editorAbortController?.abort();
+    this._editorAbortController = new AbortController();
+
+    this.selection.setGroup('note', []);
+
+    const portal = createLitPortal({
+      template: html`<latex-editor-menu
+        .std=${this.std}
+        .latexSignal=${this.model.latex$}
+        .abortController=${this._editorAbortController}
+      ></latex-editor-menu>`,
+      container: this.host,
+      computePosition: {
+        referenceElement: this,
+        placement: this.editorPlacement,
+        autoUpdate: {
+          animationFrame: true,
+        },
+      },
+      closeOnClickAway: true,
+      abortController: this._editorAbortController,
+      shadowDom: false,
+      portalStyles: {
+        zIndex: 'var(--affine-z-index-popover)',
+      },
+    });
+
+    this._editorAbortController.signal.addEventListener(
+      'abort',
+      () => {
+        this.removeEditor(portal);
+      },
+      { once: true }
+    );
+  }
+
+  @query('.latex-block-container')
+  private accessor _katexContainer!: HTMLDivElement;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-latex': LatexBlockComponent;
+  }
+}

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

@@ -0,0 +1,13 @@
+import {
+  BlockViewExtension,
+  CommandExtension,
+  type ExtensionType,
+} from '@blocksuite/block-std';
+import { literal } from 'lit/static-html.js';
+
+import { commands } from './commands.js';
+
+export const LatexBlockSpec: ExtensionType[] = [
+  BlockViewExtension('affine:latex', literal`affine-latex`),
+  CommandExtension(commands),
+];

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

@@ -0,0 +1,40 @@
+import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { css } from 'lit';
+
+export const latexBlockStyles = css`
+  .latex-block-container {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 10px 24px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    overflow-x: auto;
+    user-select: none;
+  }
+
+  .latex-block-container:hover {
+    background: ${unsafeCSSVar('hoverColor')};
+  }
+
+  .latex-block-error-placeholder {
+    color: ${unsafeCSSVarV2('text/highlight/fg/red')};
+    font-family: Inter;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: normal;
+    user-select: none;
+  }
+
+  .latex-block-empty-placeholder {
+    color: ${unsafeCSSVarV2('text/secondary')};
+    font-family: Inter;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: normal;
+    user-select: none;
+  }
+`;