@formicoidea/labre-core 0.23.0

package/src/_pkgs/affine-block-code/code-toolbar/components/lang-button.ts

@@ -0,0 +1,168 @@
+import {
+  type FilterableListItem,
+  type FilterableListOptions,
+  showPopFilterableList,
+} from '../../../affine-components/filterable-list/index.js';
+import { ArrowDownIcon } from '../../../affine-components/icons/index.js';
+import {
+  DocModeProvider,
+  TelemetryProvider,
+} from '../../../affine-shared/services/index.js';
+import { unsafeCSSVarV2 } from '../../../affine-shared/theme/index.js';
+import { SignalWatcher, WithDisposable } from '../../../global/lit/index.js';
+import { noop } from '../../../global/utils/index.js';
+import { css, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { html } from 'lit/static-html.js';
+
+import type { CodeBlockComponent } from '../..';
+
+export class LanguageListButton extends WithDisposable(
+  SignalWatcher(LitElement)
+) {
+  static override styles = css`
+    .lang-button {
+      display: flex;
+      gap: 4px;
+      padding: 2px 4px;
+      height: 28px;
+    }
+
+    .lang-button:hover {
+      background: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
+    }
+
+    .lang-button[hover] {
+      background: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
+    }
+
+    .lang-button-icon {
+      display: flex;
+      align-items: center;
+      color: ${unsafeCSSVarV2('icon/primary')};
+
+      svg {
+        height: 16px;
+        width: 16px;
+      }
+    }
+  `;
+
+  private _abortController?: AbortController;
+
+  private readonly _clickLangBtn = () => {
+    if (this.blockComponent.store.readonly) return;
+    if (this._abortController) {
+      // Close the language list if it's already opened.
+      this._abortController.abort();
+      return;
+    }
+    this._abortController = new AbortController();
+    this._abortController.signal.addEventListener('abort', () => {
+      this.onActiveStatusChange(false);
+      this._abortController = undefined;
+    });
+    this.onActiveStatusChange(true);
+
+    const options: FilterableListOptions = {
+      placeholder: 'Search for a language',
+      onSelect: item => {
+        const sortedBundledLanguages = this._sortedBundledLanguages;
+        const index = sortedBundledLanguages.indexOf(item);
+        if (index !== -1) {
+          sortedBundledLanguages.splice(index, 1);
+          sortedBundledLanguages.unshift(item);
+        }
+        this.blockComponent.store.transact(() => {
+          this.blockComponent.model.props.language$.value = item.name;
+        });
+
+        const std = this.blockComponent.std;
+        const mode =
+          std.getOptional(DocModeProvider)?.getEditorMode() ?? 'page';
+        const telemetryService = std.getOptional(TelemetryProvider);
+        if (!telemetryService) return;
+        telemetryService.track('codeBlockLanguageSelect', {
+          page: mode,
+          segment: 'code block',
+          module: 'language selector',
+          control: item.name,
+        });
+      },
+      active: item => item.name === this.blockComponent.model.props.language,
+      items: this._sortedBundledLanguages,
+    };
+
+    showPopFilterableList({
+      options,
+      referenceElement: this._langButton,
+      container: this.blockComponent.host,
+      abortController: this._abortController,
+      // stacking-context(editor-host)
+      portalStyles: {
+        zIndex: 'var(--affine-z-index-popover)',
+      },
+    });
+  };
+
+  private _sortedBundledLanguages: FilterableListItem[] = [];
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    const langList = localStorage.getItem('blocksuite:code-block:lang-list');
+    if (langList) {
+      this._sortedBundledLanguages = JSON.parse(langList);
+    } else {
+      this._sortedBundledLanguages = this.blockComponent.langs.map(lang => ({
+        label: lang.name,
+        name: lang.id,
+        aliases: lang.aliases,
+      }));
+    }
+
+    this.disposables.add(() => {
+      localStorage.setItem(
+        'blocksuite:code-block:lang-list',
+        JSON.stringify(this._sortedBundledLanguages)
+      );
+    });
+  }
+
+  override render() {
+    const textStyles = styleMap({
+      fontFamily: 'Inter',
+      fontSize: 'var(--affine-font-xs)',
+      fontStyle: 'normal',
+      fontWeight: '500',
+      lineHeight: '20px',
+      padding: '0 4px',
+    });
+
+    return html`<icon-button
+      class="lang-button"
+      data-testid="lang-button"
+      width="auto"
+      .text=${html`<div style=${textStyles}>
+        ${this.blockComponent.languageName$.value}
+      </div>`}
+      height="24px"
+      @click=${this._clickLangBtn}
+      ?disabled=${this.blockComponent.store.readonly}
+    >
+      <span class="lang-button-icon" slot="suffix">
+        ${!this.blockComponent.store.readonly ? ArrowDownIcon : nothing}
+      </span>
+    </icon-button> `;
+  }
+
+  @query('.lang-button')
+  private accessor _langButton!: HTMLElement;
+
+  @property({ attribute: false })
+  accessor blockComponent!: CodeBlockComponent;
+
+  @property({ attribute: false })
+  accessor onActiveStatusChange: (active: boolean) => void = noop;
+}

package/src/_pkgs/affine-block-code/code-toolbar/components/preview-button.ts

@@ -0,0 +1,112 @@
+import {
+  DocModeProvider,
+  TelemetryProvider,
+} from '../../../affine-shared/services/index.js';
+import { unsafeCSSVarV2 } from '../../../affine-shared/theme/index.js';
+import { SignalWatcher, WithDisposable } from '../../../global/lit/index.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import type { CodeBlockComponent } from '../../code-block';
+import { CodeBlockPreviewIdentifier } from '../../code-preview-extension';
+
+export class PreviewButton extends WithDisposable(SignalWatcher(LitElement)) {
+  static override styles = css`
+    :host {
+      margin-right: auto;
+    }
+
+    .preview-toggle-container {
+      display: flex;
+      padding: 2px;
+      align-items: flex-start;
+      gap: 4px;
+      border-radius: 4px;
+      background: ${unsafeCSSVarV2('segment/background')};
+    }
+
+    .toggle-button {
+      display: flex;
+      padding: 0px 4px;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      border-radius: 4px;
+      color: ${unsafeCSSVarV2('text/primary')};
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px;
+    }
+
+    .toggle-button:hover {
+      background: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
+    }
+
+    .toggle-button.active {
+      background: ${unsafeCSSVarV2('segment/button')};
+      box-shadow:
+        var(--Shadow-buttonShadow-1-x, 0px) var(--Shadow-buttonShadow-1-y, 0px)
+          var(--Shadow-buttonShadow-1-blur, 1px) 0px
+          var(--Shadow-buttonShadow-1-color, rgba(0, 0, 0, 0.12)),
+        var(--Shadow-buttonShadow-2-x, 0px) var(--Shadow-buttonShadow-2-y, 1px)
+          var(--Shadow-buttonShadow-2-blur, 5px) 0px
+          var(--Shadow-buttonShadow-2-color, rgba(0, 0, 0, 0.12));
+    }
+  `;
+
+  private readonly _toggle = (value: boolean) => {
+    this.blockComponent.setPreviewState(value);
+
+    const std = this.blockComponent.std;
+    const mode = std.getOptional(DocModeProvider)?.getEditorMode() ?? 'page';
+    const telemetryService = std.getOptional(TelemetryProvider);
+    if (!telemetryService) return;
+    telemetryService.track('htmlBlockTogglePreview', {
+      page: mode,
+      segment: 'code block',
+      module: 'code toolbar container',
+      control: 'preview toggle button',
+    });
+  };
+
+  get preview() {
+    return this.blockComponent.preview$.value;
+  }
+
+  override render() {
+    const lang = this.blockComponent.model.props.language$.value ?? '';
+    const previewContext = this.blockComponent.std.getOptional(
+      CodeBlockPreviewIdentifier(lang)
+    );
+    if (!previewContext) return nothing;
+
+    return html`
+      <div class="preview-toggle-container">
+        <div
+          class=${classMap({
+            'toggle-button': true,
+            active: !this.preview,
+          })}
+          @click=${() => this._toggle(false)}
+        >
+          Code
+        </div>
+        <div
+          class=${classMap({
+            'toggle-button': true,
+            active: this.preview,
+          })}
+          @click=${() => this._toggle(true)}
+        >
+          Preview
+        </div>
+      </div>
+    `;
+  }
+
+  @property({ attribute: false })
+  accessor blockComponent!: CodeBlockComponent;
+}

package/src/_pkgs/affine-block-code/code-toolbar/config.ts

@@ -0,0 +1,284 @@
+import {
+  CancelWrapIcon,
+  CaptionIcon,
+  CopyIcon,
+  DeleteIcon,
+  DuplicateIcon,
+  WrapIcon,
+} from '../../affine-components/icons/index.js';
+import type { MenuItemGroup } from '../../affine-components/toolbar/index.js';
+import { CommentProviderIdentifier } from '../../affine-shared/services/index.js';
+import { isInsidePageEditor } from '../../affine-shared/utils/index.js';
+import { noop, sleep } from '../../global/utils/index.js';
+import { CommentIcon, NumberedListIcon } from '@blocksuite/icons/lit';
+import { BlockSelection } from '../../std/index.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import { CodeBlockConfigExtension } from '../code-block-config.js';
+import type { CodeBlockToolbarContext } from './context.js';
+import { duplicateCodeBlock } from './utils.js';
+
+export const PRIMARY_GROUPS: MenuItemGroup<CodeBlockToolbarContext>[] = [
+  {
+    type: 'primary',
+    items: [
+      {
+        type: 'change-lang',
+        generate: ({ blockComponent, setActive }) => {
+          const state = { active: false };
+          return {
+            action: noop,
+            render: () =>
+              html`<language-list-button
+                .blockComponent=${blockComponent}
+                .onActiveStatusChange=${async (active: boolean) => {
+                  state.active = active;
+                  if (!active) {
+                    await sleep(1000);
+                    if (state.active) return;
+                  }
+                  setActive(active);
+                }}
+              >
+              </language-list-button>`,
+          };
+        },
+      },
+      {
+        type: 'preview',
+        generate: ({ blockComponent }) => {
+          return {
+            action: noop,
+            render: () => html`
+              <preview-button .blockComponent=${blockComponent}>
+              </preview-button>
+            `,
+          };
+        },
+      },
+      {
+        type: 'copy-code',
+        label: 'Copy code',
+        icon: CopyIcon,
+        generate: ({ blockComponent }) => {
+          return {
+            action: () => {
+              blockComponent.copyCode();
+            },
+            render: item => html`
+              <editor-icon-button
+                class="code-toolbar-button copy-code"
+                aria-label=${ifDefined(item.label)}
+                .tooltip=${item.label}
+                .tooltipOffset=${4}
+                .iconSize=${'16px'}
+                .iconContainerPadding=${4}
+                @click=${(e: MouseEvent) => {
+                  e.stopPropagation();
+                  item.action();
+                }}
+              >
+                ${item.icon}
+              </editor-icon-button>
+            `,
+          };
+        },
+      },
+      {
+        type: 'caption',
+        label: 'Caption',
+        icon: CaptionIcon,
+        when: ({ doc }) => !doc.readonly,
+        generate: ({ blockComponent }) => {
+          return {
+            action: () => {
+              blockComponent.captionEditor?.show();
+            },
+            render: item => html`
+              <editor-icon-button
+                class="code-toolbar-button caption"
+                aria-label=${ifDefined(item.label)}
+                .tooltip=${item.label}
+                .tooltipOffset=${4}
+                .iconSize=${'16px'}
+                .iconContainerPadding=${4}
+                @click=${(e: MouseEvent) => {
+                  e.stopPropagation();
+                  item.action();
+                }}
+              >
+                ${item.icon}
+              </editor-icon-button>
+            `,
+          };
+        },
+      },
+      {
+        type: 'comment',
+        label: 'Comment',
+        tooltip: 'Comment',
+        icon: CommentIcon({
+          width: '20',
+          height: '20',
+        }),
+        when: ({ std }) => !!std.getOptional(CommentProviderIdentifier),
+        generate: ({ blockComponent }) => {
+          return {
+            action: () => {
+              const commentProvider = blockComponent.std.getOptional(
+                CommentProviderIdentifier
+              );
+              if (!commentProvider) return;
+
+              commentProvider.addComment([
+                new BlockSelection({
+                  blockId: blockComponent.model.id,
+                }),
+              ]);
+            },
+            render: item =>
+              html`<editor-icon-button
+                class="code-toolbar-button comment"
+                aria-label=${ifDefined(item.label)}
+                .tooltip=${item.label}
+                .tooltipOffset=${4}
+                .iconSize=${'16px'}
+                .iconContainerPadding=${4}
+                @click=${(e: MouseEvent) => {
+                  e.stopPropagation();
+                  item.action();
+                }}
+              >
+                ${item.icon}
+              </editor-icon-button>`,
+          };
+        },
+      },
+    ],
+  },
+];
+
+export const toggleGroup: MenuItemGroup<CodeBlockToolbarContext> = {
+  type: 'toggle',
+  items: [
+    {
+      type: 'wrap',
+      generate: ({ blockComponent }) => {
+        return {
+          action: () => {},
+          render: () => {
+            const wrapped = blockComponent.model.props.wrap;
+            const label = wrapped ? 'Cancel wrap' : 'Wrap';
+            const icon = wrapped ? CancelWrapIcon : WrapIcon;
+            return html`
+              <editor-menu-action
+                @click=${() => {
+                  blockComponent.setWrap(!wrapped);
+                }}
+                aria-label=${label}
+              >
+                ${icon}
+                <span class="label">${label}</span>
+                <toggle-switch
+                  style="margin-left: auto;"
+                  .on="${wrapped}"
+                ></toggle-switch>
+              </editor-menu-action>
+            `;
+          },
+        };
+      },
+    },
+    {
+      type: 'line-number',
+      when: ({ std }) =>
+        std.getOptional(CodeBlockConfigExtension.identifier)?.showLineNumbers ??
+        true,
+      generate: ({ blockComponent }) => {
+        return {
+          action: () => {},
+          render: () => {
+            const lineNumber = blockComponent.model.props.lineNumber ?? true;
+            const label = lineNumber ? 'Cancel line number' : 'Line number';
+            return html`
+              <editor-menu-action
+                @click=${() => {
+                  blockComponent.store.updateBlock(blockComponent.model, {
+                    lineNumber: !lineNumber,
+                  });
+                }}
+                aria-label=${label}
+              >
+                ${NumberedListIcon()}
+                <span class="label">${label}</span>
+                <toggle-switch
+                  style="margin-left: auto;"
+                  .on="${lineNumber}"
+                ></toggle-switch>
+              </editor-menu-action>
+            `;
+          },
+        };
+      },
+    },
+  ],
+};
+
+// Clipboard Group
+export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
+  type: 'clipboard',
+  items: [
+    {
+      type: 'duplicate',
+      label: 'Duplicate',
+      icon: DuplicateIcon,
+      when: ({ doc }) => !doc.readonly,
+      action: ({ host, blockComponent, close }) => {
+        const codeId = duplicateCodeBlock(blockComponent.model);
+
+        host.updateComplete
+          .then(() => {
+            host.selection.setGroup('note', [
+              host.selection.create(BlockSelection, {
+                blockId: codeId,
+              }),
+            ]);
+
+            if (isInsidePageEditor(host)) {
+              const duplicateElement = host.view.getBlock(codeId);
+              if (duplicateElement) {
+                duplicateElement.scrollIntoView({ block: 'nearest' });
+              }
+            }
+          })
+          .catch(console.error);
+
+        close();
+      },
+    },
+  ],
+};
+
+// Delete Group
+export const deleteGroup: MenuItemGroup<CodeBlockToolbarContext> = {
+  type: 'delete',
+  items: [
+    {
+      type: 'delete',
+      label: 'Delete',
+      icon: DeleteIcon,
+      when: ({ doc }) => !doc.readonly,
+      action: ({ doc, blockComponent, close }) => {
+        doc.deleteBlock(blockComponent.model);
+        close();
+      },
+    },
+  ],
+};
+
+export const MORE_GROUPS: MenuItemGroup<CodeBlockToolbarContext>[] = [
+  toggleGroup,
+  clipboardGroup,
+  deleteGroup,
+];

package/src/_pkgs/affine-block-code/code-toolbar/context.ts

@@ -0,0 +1,46 @@
+import { MenuContext } from '../../affine-components/toolbar/index.js';
+
+import type { CodeBlockComponent } from '../code-block';
+
+export class CodeBlockToolbarContext extends MenuContext {
+  override close = () => {
+    this.abortController.abort();
+  };
+
+  get doc() {
+    return this.blockComponent.store;
+  }
+
+  get host() {
+    return this.blockComponent.host;
+  }
+
+  get selectedBlockModels() {
+    if (this.blockComponent.model) return [this.blockComponent.model];
+    return [];
+  }
+
+  get std() {
+    return this.blockComponent.std;
+  }
+
+  constructor(
+    public blockComponent: CodeBlockComponent,
+    public abortController: AbortController,
+    public setActive: (active: boolean) => void
+  ) {
+    super();
+  }
+
+  isEmpty() {
+    return false;
+  }
+
+  isMultiple() {
+    return false;
+  }
+
+  isSingle() {
+    return true;
+  }
+}