chore: sync affine blocksuite to packages (#9144)

Co-authored-by: Saul-Mirone <[email protected]>

Author: L-Sun

packages/affine/blocks/attachment/src/attachment-block.ts

@@ -22,7 +22,10 @@ import {
   FileSizeLimitProvider,
   TelemetryProvider,
 } from '@blocksuite/affine-shared/services';
-import { formatSize } from '@blocksuite/affine-shared/utils';
+import {
+  formatSize,
+  openSingleFileWith,
+} from '@blocksuite/affine-shared/utils';
 import {
   AttachmentIcon,
   ResetIcon,
@@ -31,7 +34,7 @@ import {
 } from '@blocksuite/icons/lit';
 import { BlockSelection } from '@blocksuite/std';
 import { nanoid, Slice } from '@blocksuite/store';
-import { computed, signal } from '@preact/signals-core';
+import { batch, computed, signal } from '@preact/signals-core';
 import { html, type TemplateResult } from 'lit';
 import { choose } from 'lit/directives/choose.js';
 import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
@@ -42,7 +45,7 @@ import { filter } from 'rxjs/operators';
 
 import { AttachmentEmbedProvider } from './embed';
 import { styles } from './styles';
-import { downloadAttachmentBlob, refreshData } from './utils';
+import { downloadAttachmentBlob, getFileType, refreshData } from './utils';
 
 type AttachmentResolvedStateInfo = ResolvedStateInfo & {
   kind?: TemplateResult;
@@ -129,12 +132,50 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
   // Refreshes the embed component.
   reload = () => {
-    if (this.model.props.embed) {
-      this._refreshKey$.value = nanoid();
-      return;
-    }
+    batch(() => {
+      if (this.model.props.embed$.value) {
+        this._refreshKey$.value = nanoid();
+        return;
+      }
+
+      this.refreshData();
+    });
+  };
+
+  // Replaces the current attachment.
+  replace = async () => {
+    const state = this.resourceController.state$.peek();
+    if (state.uploading) return;
 
-    this.refreshData();
+    const file = await openSingleFileWith();
+    if (!file) return;
+
+    const sourceId = await this.std.store.blobSync.set(file);
+    const type = await getFileType(file);
+    const { name, size } = file;
+
+    let embed = this.model.props.embed$.value ?? false;
+
+    this.std.store.captureSync();
+    this.std.store.transact(() => {
+      this.std.store.updateBlock(this.blockId, {
+        name,
+        size,
+        type,
+        sourceId,
+        embed: false,
+      });
+
+      const provider = this.std.get(AttachmentEmbedProvider);
+      embed &&= provider.embedded(this.model);
+
+      if (embed) {
+        provider.convertTo(this.model);
+      }
+
+      // Reloads
+      this.reload();
+    });
   };
 
   private _selectBlock() {
@@ -403,7 +444,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
   protected renderEmbedView = () => {
     const { model, blobUrl } = this;
-    if (!model.props.embed || !blobUrl) return null;
+    if (!model.props.embed$.value || !blobUrl) return null;
 
     const { std, _maxFileSize } = this;
     const provider = std.get(AttachmentEmbedProvider);

packages/affine/blocks/attachment/src/configs/toolbar.ts

@@ -24,6 +24,7 @@ import {
   DownloadIcon,
   DuplicateIcon,
   EditIcon,
+  ReplaceIcon,
   ResetIcon,
 } from '@blocksuite/icons/lit';
 import { BlockFlavourIdentifier } from '@blocksuite/std';
@@ -139,27 +140,42 @@ export const attachmentViewDropdownMenu = {
       });
     };
 
-    return html`${keyed(
-      model,
-      html`<affine-view-dropdown-menu
-        @toggle=${onToggle}
-        .actions=${actions.value}
-        .context=${ctx}
-        .viewType$=${viewType$}
-      ></affine-view-dropdown-menu>`
-    )}`;
+    return html`<affine-view-dropdown-menu
+      @toggle=${onToggle}
+      .actions=${actions.value}
+      .context=${ctx}
+      .viewType$=${viewType$}
+    ></affine-view-dropdown-menu>`;
   },
 } as const satisfies ToolbarActionGroup<ToolbarAction>;
 
+const replaceAction = {
+  id: 'c.replace',
+  tooltip: 'Replace attachment',
+  icon: ReplaceIcon(),
+  disabled(ctx) {
+    const block = ctx.getCurrentBlockByType(AttachmentBlockComponent);
+    if (!block) return true;
+
+    const { downloading = false, uploading = false } =
+      block.resourceController.state$.value;
+    return downloading || uploading;
+  },
+  run(ctx) {
+    const block = ctx.getCurrentBlockByType(AttachmentBlockComponent);
+    block?.replace().catch(console.error);
+  },
+} as const satisfies ToolbarAction;
+
 const downloadAction = {
-  id: 'c.download',
+  id: 'd.download',
   tooltip: 'Download',
   icon: DownloadIcon(),
   run(ctx) {
     const block = ctx.getCurrentBlockByType(AttachmentBlockComponent);
     block?.download();
   },
-  when: ctx => {
+  when(ctx) {
     const model = ctx.getCurrentModelByType(AttachmentBlockModel);
     if (!model) return false;
     // Current citation attachment block does not support download
@@ -168,7 +184,7 @@ const downloadAction = {
 } as const satisfies ToolbarAction;
 
 const captionAction = {
-  id: 'd.caption',
+  id: 'e.caption',
   tooltip: 'Caption',
   icon: CaptionIcon(),
   run(ctx) {
@@ -221,6 +237,7 @@ const builtinToolbarConfig = {
       },
     },
     attachmentViewDropdownMenu,
+    replaceAction,
     downloadAction,
     captionAction,
     {
@@ -354,13 +371,17 @@ const builtinSurfaceToolbarConfig = {
         )}`;
       },
     } satisfies ToolbarActionGroup<ToolbarAction>,
+    {
+      ...replaceAction,
+      id: 'd.replace',
+    },
     {
       ...downloadAction,
-      id: 'd.download',
+      id: 'e.download',
     },
     {
       ...captionAction,
-      id: 'e.caption',
+      id: 'f.caption',
     },
   ],
   when: ctx => ctx.getSurfaceModelsByType(AttachmentBlockModel).length === 1,

packages/affine/blocks/code/src/markdown.ts

@@ -0,0 +1,61 @@
+import {
+  type CodeBlockModel,
+  CodeBlockSchema,
+  ParagraphBlockModel,
+} from '@blocksuite/affine-model';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { matchModels } from '@blocksuite/affine-shared/utils';
+import type { BlockComponent } from '@blocksuite/std';
+import { InlineMarkdownExtension } from '@blocksuite/std/inline';
+
+export const CodeBlockMarkdownExtension =
+  InlineMarkdownExtension<AffineTextAttributes>({
+    name: 'code-block',
+    pattern: /^```([a-zA-Z0-9]*)\s$/,
+    action: ({ inlineEditor, inlineRange, prefixText, pattern }) => {
+      if (inlineEditor.yTextString.slice(0, inlineRange.index).includes('\n')) {
+        return;
+      }
+
+      const match = prefixText.match(pattern);
+      if (!match) return;
+
+      const language = match[1];
+
+      if (!inlineEditor.rootElement) return;
+      const blockComponent =
+        inlineEditor.rootElement.closest<BlockComponent>('[data-block-id]');
+      if (!blockComponent) return;
+
+      const { model, std, store } = blockComponent;
+
+      if (
+        matchModels(model, [ParagraphBlockModel]) &&
+        model.props.type === 'quote'
+      ) {
+        return;
+      }
+
+      const parent = store.getParent(model);
+      if (!parent) return;
+      const index = parent.children.indexOf(model);
+
+      store.captureSync();
+      const codeId = store.addBlock<CodeBlockModel>(
+        CodeBlockSchema.model.flavour,
+        { language },
+        parent,
+        index
+      );
+
+      if (model.text && model.text.length > prefixText.length) {
+        const text = model.text.clone();
+        store.addBlock('affine:paragraph', { text }, parent, index + 1);
+        text.delete(0, prefixText.length);
+      }
+      store.deleteBlock(model, { bringChildrenTo: parent });
+
+      focusTextModel(std, codeId);
+    },
+  });

packages/affine/blocks/code/src/styles.ts

@@ -33,6 +33,10 @@ export const codeBlockStyles = css`
     grid-template-columns: auto minmax(0, 1fr);
   }
 
+  .affine-code-block-container.disable-line-numbers v-line {
+    grid-template-columns: unset;
+  }
+
   .affine-code-block-container div:has(> v-line) {
     display: grid;
   }

packages/affine/blocks/code/src/view.ts

@@ -21,6 +21,7 @@ import { CodeKeymapExtension } from './code-keymap.js';
 import { AFFINE_CODE_TOOLBAR_WIDGET } from './code-toolbar/index.js';
 import { codeSlashMenuConfig } from './configs/slash-menu.js';
 import { effects } from './effects.js';
+import { CodeBlockMarkdownExtension } from './markdown.js';
 
 const codeToolbarWidget = WidgetViewExtension(
   'affine:code',
@@ -44,6 +45,7 @@ export class CodeBlockViewExtension extends ViewExtensionProvider {
       BlockViewExtension('affine:code', literal`affine-code`),
       SlashMenuConfigExtension('affine:code', codeSlashMenuConfig),
       CodeKeymapExtension,
+      CodeBlockMarkdownExtension,
       ...getCodeClipboardExtensions(),
     ]);
     context.register([

packages/affine/blocks/database/src/properties/rich-text/cell-renderer.ts

@@ -331,7 +331,6 @@ export class RichTextCell extends BaseCellRenderer<Text, string> {
         this.inlineEditor$.value?.selectAll();
       }
     };
-    this.addEventListener('keydown', selectAll);
     this.disposables.addFromEvent(this, 'keydown', selectAll);
     this.disposables.add(
       effect(() => {

packages/affine/blocks/database/src/properties/title/text.ts

@@ -209,10 +209,19 @@ export class HeaderAreaTextCell extends BaseCellRenderer<Text, string> {
       }
     };
 
-    this.addEventListener('keydown', selectAll);
     this.disposables.addFromEvent(this, 'keydown', selectAll);
   }
 
+  private readonly _handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape') {
+      if (event.key === 'Tab') {
+        event.preventDefault();
+        return;
+      }
+      event.stopPropagation();
+    }
+  };
+
   override firstUpdated(props: Map<string, unknown>) {
     super.firstUpdated(props);
     this.richText.value?.updateComplete
@@ -233,6 +242,12 @@ export class HeaderAreaTextCell extends BaseCellRenderer<Text, string> {
             'paste',
             this._onPaste
           );
+          const inlineEditor = this.inlineEditor;
+          if (inlineEditor) {
+            this.disposables.add(
+              inlineEditor.slots.keydown.subscribe(this._handleKeyDown)
+            );
+          }
         }
       })
       .catch(console.error);

packages/affine/blocks/divider/package.json

@@ -13,6 +13,7 @@
     "@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/std": "workspace:*",

packages/affine/blocks/divider/src/markdown.ts

@@ -0,0 +1,63 @@
+import {
+  type DividerBlockModel,
+  DividerBlockSchema,
+  ParagraphBlockModel,
+  ParagraphBlockSchema,
+} from '@blocksuite/affine-model';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { matchModels } from '@blocksuite/affine-shared/utils';
+import type { BlockComponent } from '@blocksuite/std';
+import { InlineMarkdownExtension } from '@blocksuite/std/inline';
+
+export const DividerMarkdownExtension =
+  InlineMarkdownExtension<AffineTextAttributes>({
+    name: 'divider',
+    pattern: /^(-{3,}|\*{3,}|_{3,})\s$/,
+    action: ({ inlineEditor, inlineRange }) => {
+      if (inlineEditor.yTextString.slice(0, inlineRange.index).includes('\n')) {
+        return;
+      }
+
+      if (!inlineEditor.rootElement) return;
+      const blockComponent =
+        inlineEditor.rootElement.closest<BlockComponent>('[data-block-id]');
+      if (!blockComponent) return;
+
+      const { model, std, store } = blockComponent;
+
+      if (
+        matchModels(model, [ParagraphBlockModel]) &&
+        model.props.type !== 'quote'
+      ) {
+        const parent = store.getParent(model);
+        if (!parent) return;
+        const index = parent.children.indexOf(model);
+
+        store.captureSync();
+        inlineEditor.deleteText({
+          index: 0,
+          length: inlineRange.index,
+        });
+        store.addBlock<DividerBlockModel>(
+          DividerBlockSchema.model.flavour,
+          {
+            children: model.children,
+          },
+          parent,
+          index
+        );
+
+        const nextBlock = parent.children.at(index + 1);
+        let id = nextBlock?.id;
+        if (!id) {
+          id = store.addBlock<ParagraphBlockModel>(
+            ParagraphBlockSchema.model.flavour,
+            {},
+            parent
+          );
+        }
+        focusTextModel(std, id);
+      }
+    },
+  });