chore: migrate oxlint & oxfmt (#15464)

#### PR Dependency Tree


* **PR #15464** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Chores**
* Replaced the project’s formatting and linting workflow with Oxfmt and
Oxlint.
* Added shared formatting and linting configuration, editor integration,
and updated automated checks.
* Updated generated files, scripts, and lint guidance to use the new
tooling.

* **Style**
* Reformatted templates, source code, examples, and configuration files
for consistent readability.
  * No user-facing functionality or rendering behavior changed.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/gfx/connector/src/connector-manager.ts

@@ -963,7 +963,7 @@ export class ConnectionOverlay extends Overlay {
     this._clearRect();
 
     let result: Connection | null = null;
-    // oxlint-disable-next-line @typescript-eslint/prefer-for-of
+    // oxlint-disable-next-line typescript/prefer-for-of
     for (let i = 0; i < connectables.length; i++) {
       const connectable = connectables[i];
       // first check if in excluedIds

blocksuite/affine/gfx/connector/src/text/edgeless-connector-label-editor.ts

@@ -357,22 +357,26 @@ export class EdgelessConnectorLabelEditor extends WithDisposable(
         <rich-text
           .yText=${connector.text}
           .enableFormat=${false}
-          style=${isEmpty
-            ? styleMap({
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                padding: `${VERTICAL_PADDING}px ${HORIZONTAL_PADDING}px`,
-              })
-            : nothing}
+          style=${
+            isEmpty
+              ? styleMap({
+                  position: 'absolute',
+                  left: 0,
+                  top: 0,
+                  padding: `${VERTICAL_PADDING}px ${HORIZONTAL_PADDING}px`,
+                })
+              : nothing
+          }
         ></rich-text>
-        ${isEmpty
-          ? html`
-              <span class="edgeless-connector-label-editor-placeholder">
-                Add text
-              </span>
-            `
-          : nothing}
+        ${
+          isEmpty
+            ? html`
+                <span class="edgeless-connector-label-editor-placeholder">
+                  Add text
+                </span>
+              `
+            : nothing
+        }
       </div>
     `;
   }

blocksuite/affine/gfx/connector/src/toolbar/connector-tool-button.ts

@@ -53,12 +53,14 @@ export class EdgelessConnectorToolButton extends QuickToolMixin(
     return html`
       <edgeless-tool-icon-button
         class="edgeless-connector-button"
-        .tooltip=${this.popper
-          ? ''
-          : html`<affine-tooltip-content-with-shortcut
-              data-tip="${getConnectorModeName(mode)}"
-              data-shortcut="${'C'}"
-            ></affine-tooltip-content-with-shortcut>`}
+        .tooltip=${
+          this.popper
+            ? ''
+            : html`<affine-tooltip-content-with-shortcut
+                data-tip="${getConnectorModeName(mode)}"
+                data-shortcut="${'C'}"
+              ></affine-tooltip-content-with-shortcut>`
+        }
         .tooltipOffset=${17}
         .active=${active}
         .iconContainerPadding=${6}

blocksuite/affine/gfx/mindmap/src/toolbar/mindmap-menu.ts

@@ -278,14 +278,16 @@ export class EdgelessMindmapMenu extends EdgelessToolbarToolMixin(
     return html`<edgeless-slide-menu .height=${'64px'}>
       <div class="text-and-mindmap">
         <div class="media-item">
-          ${isDraggingMedia
-            ? html`<button
-                class="next"
-                style="transform: translateY(${showNextText ? 0 : 64}px)"
-              >
-                ${mediaItem.icon}
-              </button>`
-            : nothing}
+          ${
+            isDraggingMedia
+              ? html`<button
+                  class="next"
+                  style="transform: translateY(${showNextText ? 0 : 64}px)"
+                >
+                  ${mediaItem.icon}
+                </button>`
+              : nothing
+          }
           <button
             style="opacity: ${isDraggingMedia ? 0 : 1}"
             @mousedown=${(e: MouseEvent) =>
@@ -309,14 +311,16 @@ export class EdgelessMindmapMenu extends EdgelessToolbarToolMixin(
         </div>
         <div class="thin-divider"></div>
         <div class="text-item">
-          ${isDraggingText
-            ? html`<button
-                class="next"
-                style="transform: translateY(${showNextText ? 0 : 64}px)"
-              >
-                ${textItem.icon}
-              </button>`
-            : nothing}
+          ${
+            isDraggingText
+              ? html`<button
+                  class="next"
+                  style="transform: translateY(${showNextText ? 0 : 64}px)"
+                >
+                  ${textItem.icon}
+                </button>`
+              : nothing
+          }
           <button
             style="opacity: ${isDraggingText ? 0 : 1}"
             @mousedown=${(e: MouseEvent) =>
@@ -350,14 +354,16 @@ export class EdgelessMindmapMenu extends EdgelessToolbarToolMixin(
           const isActive = this._style$.value === mindMap.style;
           return html`
             <div class="mindmap-item" data-is-active=${isActive}>
-              ${isBeingDragged
-                ? html`<button
-                    style="transform: translateY(${showNext ? 0 : 64}px)"
-                    class="next"
-                  >
-                    ${mindMap.icon}
-                  </button>`
-                : nothing}
+              ${
+                isBeingDragged
+                  ? html`<button
+                      style="transform: translateY(${showNext ? 0 : 64}px)"
+                      class="next"
+                    >
+                      ${mindMap.icon}
+                    </button>`
+                  : nothing
+              }
               <button
                 style="opacity: ${isBeingDragged ? 0 : 1}"
                 @mousedown=${(e: MouseEvent) => {
@@ -387,11 +393,13 @@ export class EdgelessMindmapMenu extends EdgelessToolbarToolMixin(
             </div>
           `;
         })}
-        ${this.std.store
-          .get(FeatureFlagService)
-          .getFlag('enable_mind_map_import')
-          ? this._importMindMapEntry()
-          : nothing}
+        ${
+          this.std.store
+            .get(FeatureFlagService)
+            .getFlag('enable_mind_map_import')
+            ? this._importMindMapEntry()
+            : nothing
+        }
       </div>
     </edgeless-slide-menu>`;
   }

blocksuite/affine/gfx/mindmap/src/toolbar/mindmap-tool-button.ts

@@ -374,18 +374,20 @@ export class EdgelessMindmapToolButton extends EdgelessToolbarToolMixin(
                 pointerEvents: draggingElement ? 'none' : 'auto',
               });
 
-              return html`${isBeingDragged
-                  ? html`<div
-                      class=${classMap({
-                        'basket-tool-item': true,
-                        next: true,
-                        coming: !!dragOut && !cancelled,
-                      })}
-                      style=${nextStyle}
-                    >
-                      ${tool.icon}
-                    </div>`
-                  : nothing}
+              return html`${
+                  isBeingDragged
+                    ? html`<div
+                        class=${classMap({
+                          'basket-tool-item': true,
+                          next: true,
+                          coming: !!dragOut && !cancelled,
+                        })}
+                        style=${nextStyle}
+                      >
+                        ${tool.icon}
+                      </div>`
+                    : nothing
+                }
 
                 <div
                   style=${currentStyle}

blocksuite/affine/gfx/note/src/components/note-shadow-panel.ts

@@ -99,9 +99,11 @@ export class EdgelessNoteShadowPanel extends WithDisposable(LitElement) {
       (shadow, index) =>
         html`<style>
             .item-icon svg rect:first-of-type {
-              fill: ${this.background.startsWith('--')
-                ? `var(${this.background})`
-                : this.background};
+              fill: ${
+                this.background.startsWith('--')
+                  ? `var(${this.background})`
+                  : this.background
+              };
             }
           </style>
           <div

blocksuite/affine/gfx/note/src/toolbar/note-senior-button.ts

@@ -184,12 +184,14 @@ export class EdgelessNoteSeniorButton extends EdgelessToolbarToolMixin(
 
     return html`<edgeless-toolbar-button
       class="edgeless-note-button"
-      .tooltip=${this.popper
-        ? ''
-        : html`<affine-tooltip-content-with-shortcut
-            data-tip="${'Note'}"
-            data-shortcut="${'N'}"
-          ></affine-tooltip-content-with-shortcut>`}
+      .tooltip=${
+        this.popper
+          ? ''
+          : html`<affine-tooltip-content-with-shortcut
+              data-tip="${'Note'}"
+              data-shortcut="${'N'}"
+            ></affine-tooltip-content-with-shortcut>`
+      }
       .tooltipOffset=${5}
     >
       <div

blocksuite/affine/gfx/note/src/toolbar/note-tool-button.ts

@@ -89,12 +89,14 @@ export class EdgelessNoteToolButton extends QuickToolMixin(LitElement) {
     return html`
       <edgeless-tool-icon-button
         class="edgeless-note-button"
-        .tooltip=${this._noteMenu
-          ? ''
-          : html`<affine-tooltip-content-with-shortcut
-              data-tip="${'Note'}"
-              data-shortcut="${'N'}"
-            ></affine-tooltip-content-with-shortcut>`}
+        .tooltip=${
+          this._noteMenu
+            ? ''
+            : html`<affine-tooltip-content-with-shortcut
+                data-tip="${'Note'}"
+                data-shortcut="${'N'}"
+              ></affine-tooltip-content-with-shortcut>`
+        }
         .tooltipOffset=${17}
         .active=${active}
         .iconContainerPadding=${6}

blocksuite/affine/gfx/shape/src/components/shape-panel.ts

@@ -47,9 +47,9 @@ export class EdgelessShapePanel extends LitElement {
             this._onSelect(name);
           }}
         >
-          ${this.shapeStyle === ShapeStyle.General
-            ? generalIcon
-            : scribbledIcon}
+          ${
+            this.shapeStyle === ShapeStyle.General ? generalIcon : scribbledIcon
+          }
         </edgeless-tool-icon-button>`
     );
   }

blocksuite/affine/gfx/shape/src/draggable/shape-draggable.ts

@@ -308,18 +308,20 @@ export class EdgelessToolbarShapeDraggable extends EdgelessToolbarToolMixin(
             opacity: isBeingDragged ? 0 : 1,
           });
           const nextStyle = styleMap(baseStyle);
-          return html`${isBeingDragged
-              ? html`<div
-                  style=${nextStyle}
-                  class=${classMap({
-                    shape: true,
-                    next: true,
-                    coming: !!dragOut && !cancelled,
-                  })}
-                >
-                  ${shape.svg}
-                </div>`
-              : nothing}
+          return html`${
+              isBeingDragged
+                ? html`<div
+                    style=${nextStyle}
+                    class=${classMap({
+                      shape: true,
+                      next: true,
+                      coming: !!dragOut && !cancelled,
+                    })}
+                  >
+                    ${shape.svg}
+                  </div>`
+                : nothing
+            }
             <div
               style=${currStyle}
               class=${classMap({

blocksuite/affine/gfx/shape/src/draggable/shape-menu.ts

@@ -180,9 +180,11 @@ export class EdgelessShapeMenu extends SignalWatcher(
                     .iconSize=${'20px'}
                     @click=${() => this.onChange(name)}
                   >
-                    ${shapeStyle === ShapeStyle.General
-                      ? generalIcon
-                      : scribbledIcon}
+                    ${
+                      shapeStyle === ShapeStyle.General
+                        ? generalIcon
+                        : scribbledIcon
+                    }
                   </edgeless-tool-icon-button>
                 `;
               }

blocksuite/affine/gfx/shape/src/draggable/shape-tool-button.ts

@@ -67,12 +67,14 @@ export class EdgelessShapeToolButton extends EdgelessToolbarToolMixin(
     return html`
       <edgeless-toolbar-button
         class="edgeless-shape-button"
-        .tooltip=${this.popper
-          ? ''
-          : html`<affine-tooltip-content-with-shortcut
-              data-tip="${'Shape'}"
-              data-shortcut="${'S'}"
-            ></affine-tooltip-content-with-shortcut>`}
+        .tooltip=${
+          this.popper
+            ? ''
+            : html`<affine-tooltip-content-with-shortcut
+                data-tip="${'Shape'}"
+                data-shortcut="${'S'}"
+              ></affine-tooltip-content-with-shortcut>`
+        }
         .tooltipOffset=${5}
         .active=${active}
       >

blocksuite/affine/gfx/shape/src/draggable/shape-tool-element.ts

@@ -258,11 +258,13 @@ export class EdgelessShapeToolElement extends WithDisposable(LitElement) {
       >
         ${this.shape.svg}
       </div>
-      ${this.order === 1
-        ? html`<div id="backup-shape-element" class="shape">
-            ${this.shape.svg}
-          </div>`
-        : null}
+      ${
+        this.order === 1
+          ? html`<div id="backup-shape-element" class="shape">
+              ${this.shape.svg}
+            </div>`
+          : null
+      }
     `;
   }
 

blocksuite/affine/gfx/shape/src/text/edgeless-shape-text-editor.ts

@@ -501,21 +501,23 @@ export class EdgelessShapeTextEditor extends WithDisposable(ShadowlessElement) {
 
     return html` <style>
         edgeless-shape-text-editor v-text [data-v-text] {
-          overflow-wrap: ${constrainedAutoWidth
-            ? 'anywhere'
-            : autoWidth
-              ? 'normal'
-              : 'anywhere'};
-          word-break: ${constrainedAutoWidth
-            ? 'break-word'
-            : autoWidth
-              ? 'normal'
-              : 'break-word'} !important;
-          white-space: ${constrainedAutoWidth
-            ? 'pre-wrap'
-            : autoWidth
-              ? 'pre'
-              : 'pre-wrap'} !important;
+          overflow-wrap: ${
+            constrainedAutoWidth
+              ? 'anywhere'
+              : autoWidth
+                ? 'normal'
+                : 'anywhere'
+          };
+          word-break: ${
+            constrainedAutoWidth
+              ? 'break-word'
+              : autoWidth
+                ? 'normal'
+                : 'break-word'
+          } !important;
+          white-space: ${
+            constrainedAutoWidth ? 'pre-wrap' : autoWidth ? 'pre' : 'pre-wrap'
+          } !important;
         }
 
         edgeless-shape-text-editor .inline-editor {

blocksuite/affine/gfx/template/src/toolbar/builtin-templates.ts

@@ -1,4 +1,4 @@
-/* oxlint-disable @typescript-eslint/await-thenable */
+/* oxlint-disable typescript/await-thenable */
 import type {
   Template,
   TemplateCategory,

blocksuite/affine/gfx/template/src/toolbar/template-panel.ts

@@ -406,9 +406,9 @@ export class EdgelessTemplatePanel extends WithDisposable(LitElement) {
             cate => cate,
             cate => {
               return html`<div
-                class="category-entry ${_currentCategory === cate
-                  ? 'selected'
-                  : ''}"
+                class="category-entry ${
+                  _currentCategory === cate ? 'selected' : ''
+                }"
                 @click=${() => {
                   this._currentCategory = cate;
                   this._updateTemplates();
@@ -422,73 +422,81 @@ export class EdgelessTemplatePanel extends WithDisposable(LitElement) {
         <div class="template-viewport">
           <div class="template-scrollcontent" data-scrollable>
             <div class="template-list">
-              ${this._loading
-                ? html`<affine-template-loading
-                    style=${styleMap({
-                      position: 'absolute',
-                      left: '50%',
-                      top: '50%',
-                    })}
-                  ></affine-template-loading>`
-                : repeat(
-                    _templates,
-                    template => template.name,
-                    template => {
-                      const preview = template.preview
-                        ? template.preview.startsWith('<svg')
-                          ? html`<img
-                              src="${toSvgPreviewDataUrl(template.preview)}"
-                              class="template-preview"
-                              loading="lazy"
-                            />`
-                          : html`<img
-                              src="${template.preview}"
-                              class="template-preview"
-                              loading="lazy"
-                            />`
-                        : defaultPreview;
+              ${
+                this._loading
+                  ? html`<affine-template-loading
+                      style=${styleMap({
+                        position: 'absolute',
+                        left: '50%',
+                        top: '50%',
+                      })}
+                    ></affine-template-loading>`
+                  : repeat(
+                      _templates,
+                      template => template.name,
+                      template => {
+                        const preview = template.preview
+                          ? template.preview.startsWith('<svg')
+                            ? html`<img
+                                src="${toSvgPreviewDataUrl(template.preview)}"
+                                class="template-preview"
+                                loading="lazy"
+                              />`
+                            : html`<img
+                                src="${template.preview}"
+                                class="template-preview"
+                                loading="lazy"
+                              />`
+                          : defaultPreview;
 
-                      const isBeingDragged =
-                        draggingElement &&
-                        draggingElement.data.name === template.name;
-                      return html`
-                        <div
-                          class=${`template-item ${
-                            template === this._loadingTemplate ? 'loading' : ''
-                          }`}
-                          style=${styleMap({
-                            opacity: isBeingDragged ? '0' : '1',
-                          })}
-                          data-hover-text="Add"
-                          @mousedown=${(e: MouseEvent) =>
-                            this.draggableController.onMouseDown(e, {
-                              data: template,
-                              preview,
+                        const isBeingDragged =
+                          draggingElement &&
+                          draggingElement.data.name === template.name;
+                        return html`
+                          <div
+                            class=${`template-item ${
+                              template === this._loadingTemplate
+                                ? 'loading'
+                                : ''
+                            }`}
+                            style=${styleMap({
+                              opacity: isBeingDragged ? '0' : '1',
                             })}
-                          @touchstart=${(e: TouchEvent) => {
-                            this.draggableController.onTouchStart(e, {
-                              data: template,
-                              preview,
-                            });
-                          }}
-                        >
-                          ${preview}
-                          ${template === this._loadingTemplate
-                            ? html`<affine-template-loading></affine-template-loading>`
-                            : nothing}
-                          ${template.name
-                            ? html`<affine-tooltip
-                                .offset=${12}
-                                .autoHide=${true}
-                                tip-position="top"
-                              >
-                                ${template.name}
-                              </affine-tooltip>`
-                            : nothing}
-                        </div>
-                      `;
-                    }
-                  )}
+                            data-hover-text="Add"
+                            @mousedown=${(e: MouseEvent) =>
+                              this.draggableController.onMouseDown(e, {
+                                data: template,
+                                preview,
+                              })}
+                            @touchstart=${(e: TouchEvent) => {
+                              this.draggableController.onTouchStart(e, {
+                                data: template,
+                                preview,
+                              });
+                            }}
+                          >
+                            ${preview}
+                            ${
+                              template === this._loadingTemplate
+                                ? html`<affine-template-loading></affine-template-loading>`
+                                : nothing
+                            }
+                            ${
+                              template.name
+                                ? html`<affine-tooltip
+                                    .offset=${12}
+                                    .autoHide=${true}
+                                    tip-position="top"
+                                  >
+                                    ${template.name}
+                                  </affine-tooltip>`
+                                : nothing
+                            }
+                          </div>
+                        `;
+                      }
+                    )
+              }
             </div>
           </div>
           <overlay-scrollbar></overlay-scrollbar>

blocksuite/affine/gfx/text/src/edgeless-text-editor.ts

@@ -455,21 +455,25 @@ export class EdgelessTextEditor extends WithDisposable(ShadowlessElement) {
         .yText=${text}
         .enableFormat=${false}
         .enableAutoScrollHorizontally=${false}
-        style=${isEmpty
-          ? styleMap({
-              position: 'absolute',
-              left: 0,
-              top: 0,
-              padding: `${EdgelessTextEditor.PADDING_VERTICAL}px
+        style=${
+          isEmpty
+            ? styleMap({
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                padding: `${EdgelessTextEditor.PADDING_VERTICAL}px
         ${EdgelessTextEditor.PADDING_HORIZONTAL}px`,
-            })
-          : nothing}
+              })
+            : nothing
+        }
       ></rich-text>
-      ${isEmpty
-        ? html`<span class="edgeless-text-editor-placeholder">
-            Type from here
-          </span>`
-        : nothing}
+      ${
+        isEmpty
+          ? html`<span class="edgeless-text-editor-placeholder">
+              Type from here
+            </span>`
+          : nothing
+      }
     </div>`;
   }
 

blocksuite/affine/gfx/text/src/element-renderer/utils.ts

@@ -173,7 +173,7 @@ const RS_LTR_CHARS =
   'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF' +
   '\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF';
 const RS_RTL_CHARS = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC';
-// eslint-disable-next-line no-misleading-character-class
+// oxlint-disable-next-line no-misleading-character-class
 const RE_RTL_CHECK = new RegExp(`^[^${RS_LTR_CHARS}]*[${RS_RTL_CHARS}]`);
 export function isRTL(text: string) {
   return RE_RTL_CHECK.test(text);