@formicoidea/labre-core 0.43.1 → 0.45.0

package/dist/_pkgs/affine-gfx-shape/element-renderer/shape/index.js

@@ -1,5 +1,5 @@
 import { ElementRendererExtension, } from '../../../affine-block-surface/index.js';
-import { getFontMetrics, getFontString, getLineWidth, isRTL, measureTextInDOM, wrapTextDeltas, } from '../../../affine-gfx-text/index.js';
+import { getFontMetrics, getFontString, getLineWidth, isRTL, measureTextInDOM, paintTextDecoration, wrapTextDeltas, } from '../../../affine-gfx-text/index.js';
 import { DefaultTheme, TextAlign } from '../../../affine-model/index.js';
 import { Bound } from '../../../global/gfx/index.js';
 import { deltaInsertsToChunks } from '../../../std/inline/index.js';
@@ -33,6 +33,8 @@ function renderText(model, ctx, { color }) {
     const { x, y, text, fontFamily, fontWeight, textAlign, w, h, textVerticalAlign, padding, } = model;
     if (!text)
         return;
+    // A local preview shape has no stored decoration.
+    const textDecoration = 'textDecoration' in model ? model.textDecoration : undefined;
     // Contained mode shrinks the layout font size so the text fits the bounds.
     const fontSize = effectiveShapeFontSize(model);
     const [verticalPadding, horPadding] = padding;
@@ -69,9 +71,25 @@ function renderText(model, ctx, { color }) {
             if (ctx.canvas.dir !== (rtl ? 'rtl' : 'ltr')) {
                 ctx.canvas.setAttribute('dir', rtl ? 'rtl' : 'ltr');
             }
-            ctx.fillText(str, 
             // 0.5 is the dom editor padding to make the text align with the DOM text
-            horOffset + 0.5, lineIndex * lineHeight + vertOffset);
+            const textX = horOffset + 0.5;
+            const baselineY = lineIndex * lineHeight + vertOffset;
+            ctx.fillText(str, textX, baselineY);
+            if (textDecoration) {
+                // Already on the alphabetic baseline, at the size Contained mode
+                // shrank the text to.
+                paintTextDecoration(ctx, {
+                    decoration: textDecoration,
+                    lineText: str,
+                    font,
+                    x: textX,
+                    baselineY,
+                    fontFamily,
+                    fontSize,
+                    fontWeight,
+                    color,
+                });
+            }
             maxLineWidth = Math.max(maxLineWidth, getLineWidth(str, font));
             if (shouldTemporarilyAttach) {
                 ctx.canvas.remove();

package/dist/_pkgs/affine-gfx-shape/text/edgeless-shape-text-editor.js

@@ -33,6 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { DefaultTool, EdgelessCRUDIdentifier, TextUtils, } from '../../affine-block-surface/index.js';
+import { textDecorationLine } from '../../affine-gfx-text/index.js';
 import { MindmapElementModel, ShapeElementModel, TextFitMode, TextResizing, } from '../../affine-model/index.js';
 import { ThemeProvider } from '../../affine-shared/services/index.js';
 import { getSelectedRect, overlayScale, toOverlayCoord, } from '../../affine-shared/utils/index.js';
@@ -427,6 +428,7 @@ let EdgelessShapeTextEditor = (() => {
                 color,
                 padding: `${verticalPadding}px ${horiPadding}px`,
                 textAlign: this.element.textAlign,
+                textDecorationLine: textDecorationLine(this.element.textDecoration),
                 display: 'grid',
                 gridTemplateColumns: '100%',
                 alignItems: this.element.textVerticalAlign === 'center'

package/dist/_pkgs/affine-gfx-shape/toolbar/config.js

@@ -294,7 +294,7 @@ export const shapeToolbarConfig = {
         // id: `g.text`
         ...createTextActions(ShapeElementModel, 'shape', (ctx, model, props) => {
             // No need to adjust element bounds
-            if (props['textAlign']) {
+            if (props['textAlign'] || props['textDecoration']) {
                 ctx.std.get(EdgelessCRUDIdentifier).updateElement(model.id, props);
                 return;
             }

package/dist/_pkgs/affine-gfx-template/services/template-middlewares.d.ts

@@ -1,5 +1,14 @@
 import { Bound } from '../../global/gfx/index.js';
+import type { BlockStdScope } from '../../std/index.js';
 import type { TemplateJob } from './template.js';
+/**
+ * Everything a template inserts lands in the viewer's active layer (ADR 0031
+ * §6). The insertion bypasses both stamped paths — its elements are merged
+ * straight into the surface's elements map, its blocks go through
+ * `store.addBlock` — so the layer is stamped on the snapshot before it is
+ * written, with the same rule as every other creation.
+ */
+export declare const createActiveLayerMiddleware: (std: BlockStdScope) => (job: TemplateJob) => void;
 export declare const replaceIdMiddleware: (job: TemplateJob) => void;
 export declare const createInsertPlaceMiddleware: (targetPlace: Bound) => (job: TemplateJob) => void;
 export declare const createStickerMiddleware: (center: {

package/dist/_pkgs/affine-gfx-template/services/template-middlewares.js

@@ -1,6 +1,28 @@
-import { generateElementId, sortIndex } from '../../affine-block-surface/index.js';
+import { applyCreationLayer, generateElementId, sortIndex, } from '../../affine-block-surface/index.js';
 import { Bound } from '../../global/gfx/index.js';
 import { assertType } from '../../global/utils/index.js';
+/**
+ * Everything a template inserts lands in the viewer's active layer (ADR 0031
+ * §6). The insertion bypasses both stamped paths — its elements are merged
+ * straight into the surface's elements map, its blocks go through
+ * `store.addBlock` — so the layer is stamped on the snapshot before it is
+ * written, with the same rule as every other creation.
+ */
+export const createActiveLayerMiddleware = (std) => {
+    return (job) => {
+        job.slots.beforeInsert.subscribe(payload => {
+            if (payload.type !== 'block')
+                return;
+            const { props, flavour } = payload.data.blockJson;
+            if (flavour === 'affine:surface') {
+                Object.values(props.elements).forEach(element => applyCreationLayer(std, element));
+                return;
+            }
+            if (typeof props.xywh === 'string')
+                applyCreationLayer(std, props);
+        });
+    };
+};
 export const replaceIdMiddleware = (job) => {
     const regeneratedIdMap = new Map();
     job.slots.beforeInsert.subscribe(payload => {

package/dist/_pkgs/affine-gfx-template/services/template.js

@@ -5,7 +5,7 @@ import { assertType } from '../../global/utils/index.js';
 import { GfxControllerIdentifier } from '../../std/gfx/index.js';
 import { DocSnapshotSchema, } from '../../store/index.js';
 import { Subject } from 'rxjs';
-import { createInsertPlaceMiddleware, createRegenerateIndexMiddleware, createStickerMiddleware, replaceIdMiddleware, } from './template-middlewares.js';
+import { createActiveLayerMiddleware, createInsertPlaceMiddleware, createRegenerateIndexMiddleware, createStickerMiddleware, replaceIdMiddleware, } from './template-middlewares.js';
 /**
  * Those block contains other block's id
  * should defer the loading
@@ -243,6 +243,7 @@ export function createTemplateJob(std, type, center) {
         middlewares.push(createStickerMiddleware(center || viewport.center, () => layer.generateIndex()));
     }
     middlewares.push(replaceIdMiddleware);
+    middlewares.push(createActiveLayerMiddleware(std));
     return TemplateJob.create({
         model: surface,
         type,

package/dist/_pkgs/affine-gfx-text/edgeless-text-editor.js

@@ -46,7 +46,7 @@ import { css, html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import * as Y from 'yjs';
-import { getCursorByCoord, getLineHeight } from './element-renderer/utils.js';
+import { getCursorByCoord, getLineHeight, textDecorationLine, } from './element-renderer/utils.js';
 import { TEXT_EDITOR_PLACEHOLDER } from './translations.js';
 export function mountTextElementEditor(textElement, edgeless, focusCoord) {
     let cursorIndex = textElement.text.length;
@@ -366,6 +366,7 @@ let EdgelessTextEditor = (() => {
                 fontStyle,
                 color,
                 textAlign,
+                textDecorationLine: textDecorationLine(this.element.textDecoration),
                 lineHeight: `${lineHeight}px`,
                 boxSizing: 'content-box',
             })}

package/dist/_pkgs/affine-gfx-text/element-renderer/index.js

@@ -1,9 +1,9 @@
 import { ElementRendererExtension, } from '../../affine-block-surface/index.js';
 import { DefaultTheme } from '../../affine-model/index.js';
 import { deltaInsertsToChunks } from '../../std/inline/index.js';
-import { getFontString, getLineHeight, getTextWidth, isRTL, wrapTextDeltas, } from './utils.js';
+import { alphabeticBaselineOffset, getFontString, getLineHeight, getTextWidth, isRTL, paintTextDecoration, wrapTextDeltas, } from './utils.js';
 export const text = (model, ctx, matrix, renderer) => {
-    const { fontSize, fontWeight, fontStyle, fontFamily, textAlign, rotate } = model;
+    const { fontSize, fontWeight, fontStyle, fontFamily, textAlign, textDecoration, rotate, } = model;
     const [, , w, h] = model.deserializedXYWH;
     const cx = w / 2;
     const cy = h / 2;
@@ -38,7 +38,24 @@ export const text = (model, ctx, matrix, renderer) => {
             ctx.canvas.setAttribute('dir', rtl ? 'rtl' : 'ltr');
             // 0.5 comes from v-line padding
             const offset = textAlign === 'center' ? 0 : textAlign === 'right' ? -0.5 : 0.5;
-            ctx.fillText(str, horizontalOffset + beforeTextWidth + offset, (lineIndex + 1) * lineHeightPx);
+            const x = horizontalOffset + beforeTextWidth + offset;
+            const y = (lineIndex + 1) * lineHeightPx;
+            ctx.fillText(str, x, y);
+            if (textDecoration) {
+                paintTextDecoration(ctx, {
+                    decoration: textDecoration,
+                    lineText: str,
+                    font,
+                    x,
+                    // Painted on the ideographic baseline (the bottom of the font box);
+                    // the line hangs off the alphabetic one, a descent above it.
+                    baselineY: y + alphabeticBaselineOffset(font, 'ideographic'),
+                    fontFamily,
+                    fontSize,
+                    fontWeight,
+                    color,
+                });
+            }
             beforeTextWidth += getTextWidth(str, font);
             if (shouldTemporarilyAttach) {
                 ctx.canvas.remove();

package/dist/_pkgs/affine-gfx-text/element-renderer/utils.d.ts

@@ -1,4 +1,4 @@
-import type { FontFamily, FontStyle, FontWeight, TextElementModel } from '../../affine-model/index.js';
+import { type FontFamily, type FontStyle, type FontWeight, TextDecoration, type TextElementModel } from '../../affine-model/index.js';
 import type { Bound } from '../../global/gfx/index.js';
 import type * as Y from 'yjs';
 export type TextDelta = {
@@ -21,6 +21,71 @@ export declare function isRTL(text: string): boolean;
 export declare function splitIntoLines(text: string): string[];
 export declare function getLineWidth(text: string, font: string): number;
 export declare function getTextWidth(text: string, font: string): number;
+/**
+ * How far BELOW a `textBaseline` line the alphabetic baseline sits, measured
+ * rather than derived: Chromium puts `middle` at half the x-height, not half
+ * the font box, so no ratio of the font metrics gets it right. Negative when
+ * the alphabetic baseline is above the line (`ideographic`, the font box's
+ * bottom).
+ */
+export declare function alphabeticBaselineOffset(font: string, baseline: CanvasTextBaseline): number;
+/** The decoration tokens this build paints; any other token is skipped. */
+type KnownTextDecorationToken = 'underline' | 'overline';
+/**
+ * The tokens of a stored `textDecoration` this build knows (ADR 0030).
+ *
+ * Token by token on purpose: the stored value is an append-only CSS token
+ * list, so a token a newer client adds is dropped here one at a time and
+ * `'underline line-through'` still reads as underlined. Never a `switch` on the
+ * whole string, which would lose the underline with the unknown token.
+ */
+export declare function parseTextDecoration(value: string | undefined): {
+    underline: boolean;
+    overline: boolean;
+};
+/**
+ * The CSS `text-decoration-line` the DOM twins of a canvas text use — the
+ * known tokens only, so an unknown one cannot invalidate the declaration.
+ */
+export declare function textDecorationLine(value: string | undefined): string;
+/**
+ * The stored value after one toggle: `token` turned on or off, every other
+ * token kept — an unknown one included, so a toggle in this build never erases
+ * what a newer client wrote. Nothing left writes `None`, never `undefined`
+ * (ADR 0030 §2).
+ */
+export declare function toggleTextDecoration(value: string | undefined, token: KnownTextDecorationToken, on: boolean): TextDecoration;
+/**
+ * Strokes the underline and the overline of ONE painted run of a canvas text
+ * (ADR 0030 §3) — shared by the text, shape and connector-label renderers, and
+ * replayed as is by the SVG export, which runs those renderers on svgcanvas.
+ *
+ * - Width is the run's measured advance, never the element's box, with the
+ *   same measurement the wrap uses, offset by the `ctx.textAlign` the run was
+ *   painted with.
+ * - Offsets are ratios of the size the renderer paints with: canvas
+ *   `TextMetrics` exposes no underline position.
+ * - `fillRect`, not `stroke`: a rectangle ignores whatever `lineDash`,
+ *   `lineCap` or `lineWidth` a shape left on the context, and svgcanvas writes
+ *   it as one `<rect>`.
+ *
+ * Paints nothing at all — not even a `fillStyle` write — when the value holds
+ * no known token, so an undecorated text draws exactly the calls it drew
+ * before the field existed.
+ */
+export declare function paintTextDecoration(ctx: CanvasRenderingContext2D, { decoration, lineText, font, x, baselineY, fontFamily, fontSize, fontWeight, color, }: {
+    decoration: string | undefined;
+    lineText: string;
+    font: string;
+    /** The x passed to `fillText`, read with the context's `textAlign`. */
+    x: number;
+    /** The ALPHABETIC baseline of the run, whatever `textBaseline` painted it. */
+    baselineY: number;
+    fontFamily: string;
+    fontSize: number;
+    fontWeight: string;
+    color: string;
+}): void;
 export declare function wrapTextDeltas(text: Y.Text, font: string, w: number): TextDelta[];
 export declare const truncateTextByWidth: (text: string, font: string, width: number) => string;
 export declare function getTextCursorPosition(model: TextElementModel, coord: {
@@ -50,3 +115,4 @@ export declare const charWidth: {
     getCache: (font: string) => number[] | undefined;
 };
 export declare function wrapText(text: string, font: string, maxWidth: number): string;
+export {};

package/dist/_pkgs/affine-gfx-text/element-renderer/utils.js

@@ -1,4 +1,5 @@
 import { TextUtils } from '../../affine-block-surface/index.js';
+import { TextDecoration, } from '../../affine-model/index.js';
 import { getPointsFromBoundWithRotation, rotatePoints, } from '../../global/gfx/index.js';
 import { deltaInsertsToChunks } from '../../std/inline/index.js';
 const { getFontFacesByFontFamily, wrapFontFamily } = TextUtils;
@@ -107,6 +108,106 @@ export function getTextWidth(text, font) {
     });
     return width;
 }
+/**
+ * How far BELOW a `textBaseline` line the alphabetic baseline sits, measured
+ * rather than derived: Chromium puts `middle` at half the x-height, not half
+ * the font box, so no ratio of the font metrics gets it right. Negative when
+ * the alphabetic baseline is above the line (`ideographic`, the font box's
+ * bottom).
+ */
+export function alphabeticBaselineOffset(font, baseline) {
+    const ctx = getMeasureCtx();
+    if (font !== ctx.font)
+        ctx.font = font;
+    const previous = ctx.textBaseline;
+    ctx.textBaseline = baseline;
+    const { alphabeticBaseline } = ctx.measureText('x');
+    ctx.textBaseline = previous;
+    return -(alphabeticBaseline ?? 0) || 0;
+}
+/**
+ * The tokens of a stored `textDecoration` this build knows (ADR 0030).
+ *
+ * Token by token on purpose: the stored value is an append-only CSS token
+ * list, so a token a newer client adds is dropped here one at a time and
+ * `'underline line-through'` still reads as underlined. Never a `switch` on the
+ * whole string, which would lose the underline with the unknown token.
+ */
+export function parseTextDecoration(value) {
+    const tokens = value ? value.split(/\s+/) : [];
+    return {
+        underline: tokens.includes('underline'),
+        overline: tokens.includes('overline'),
+    };
+}
+/**
+ * The CSS `text-decoration-line` the DOM twins of a canvas text use — the
+ * known tokens only, so an unknown one cannot invalidate the declaration.
+ */
+export function textDecorationLine(value) {
+    const { underline, overline } = parseTextDecoration(value);
+    const line = [underline && 'underline', overline && 'overline']
+        .filter(Boolean)
+        .join(' ');
+    return line || 'none';
+}
+/**
+ * The stored value after one toggle: `token` turned on or off, every other
+ * token kept — an unknown one included, so a toggle in this build never erases
+ * what a newer client wrote. Nothing left writes `None`, never `undefined`
+ * (ADR 0030 §2).
+ */
+export function toggleTextDecoration(value, token, on) {
+    const tokens = new Set((value ?? '')
+        .split(/\s+/)
+        .filter(t => t && t !== TextDecoration.None && t !== token));
+    if (on)
+        tokens.add(token);
+    const known = ['underline', 'overline'].filter(t => tokens.has(t));
+    const unknown = [...tokens].filter(t => t !== 'underline' && t !== 'overline');
+    const next = [...known, ...unknown].join(' ');
+    return (next || TextDecoration.None);
+}
+/**
+ * Strokes the underline and the overline of ONE painted run of a canvas text
+ * (ADR 0030 §3) — shared by the text, shape and connector-label renderers, and
+ * replayed as is by the SVG export, which runs those renderers on svgcanvas.
+ *
+ * - Width is the run's measured advance, never the element's box, with the
+ *   same measurement the wrap uses, offset by the `ctx.textAlign` the run was
+ *   painted with.
+ * - Offsets are ratios of the size the renderer paints with: canvas
+ *   `TextMetrics` exposes no underline position.
+ * - `fillRect`, not `stroke`: a rectangle ignores whatever `lineDash`,
+ *   `lineCap` or `lineWidth` a shape left on the context, and svgcanvas writes
+ *   it as one `<rect>`.
+ *
+ * Paints nothing at all — not even a `fillStyle` write — when the value holds
+ * no known token, so an undecorated text draws exactly the calls it drew
+ * before the field existed.
+ */
+export function paintTextDecoration(ctx, { decoration, lineText, font, x, baselineY, fontFamily, fontSize, fontWeight, color, }) {
+    const { underline, overline } = parseTextDecoration(decoration);
+    if (!underline && !overline)
+        return;
+    const width = getLineWidth(lineText, font);
+    if (!(width > 0))
+        return;
+    const left = ctx.textAlign === 'center'
+        ? x - width / 2
+        : ctx.textAlign === 'right'
+            ? x - width
+            : x;
+    const thickness = Math.max(1, fontSize / 16);
+    ctx.fillStyle = color;
+    if (underline) {
+        ctx.fillRect(left, baselineY + Math.max(1, fontSize * 0.08), width, thickness);
+    }
+    if (overline) {
+        const { fontBoundingBoxAscent } = getFontMetrics(fontFamily, fontSize, fontWeight);
+        ctx.fillRect(left, baselineY - fontBoundingBoxAscent, width, thickness);
+    }
+}
 export function wrapTextDeltas(text, font, w) {
     if (!text)
         return [];

package/dist/_pkgs/affine-gfx-text/toolbar/actions.d.ts

@@ -15,6 +15,17 @@ export declare function createTextActions<K extends abstract new (...args: any)
 }, {
     readonly id: "c.font-style";
     readonly content: (ctx: ToolbarContext) => import("lit-html").TemplateResult<1> | null;
+}, {
+    readonly id: "c.text-decoration";
+    readonly when: boolean;
+    readonly actions: {
+        id: "a.underline" | "b.overline";
+        icon: import("lit-html").TemplateResult<1>;
+        tooltipWording: import("../../affine-shared/services/index.js").ChromeWording;
+        when: (ctx: ToolbarContext) => boolean;
+        active: (ctx: ToolbarContext) => boolean;
+        run: (ctx: ToolbarContext) => void;
+    }[];
 }, {
     readonly id: "d.font-size";
     readonly when: boolean;

package/dist/_pkgs/affine-gfx-text/toolbar/actions.js

@@ -1,15 +1,16 @@
 import { EdgelessCRUDIdentifier, TextUtils } from '../../affine-block-surface/index.js';
 import { frameworkPaletteGroups, packColor, } from '../../affine-components/color-picker/index.js';
+import { OverlineIcon, UnderlineIcon } from '../../affine-components/icons/index.js';
 import { EditorChevronDown } from '../../affine-components/toolbar/index.js';
 import { DefaultTheme, FontFamily, FontStyle, FontWeight, resolveColor, TextAlign, } from '../../affine-model/index.js';
-import { translateKey, } from '../../affine-shared/services/index.js';
+import { TEXT_FORMAT_OVERLINE, TEXT_FORMAT_UNDERLINE, translateKey, } from '../../affine-shared/services/index.js';
 import { getMostCommonResolvedValue, getMostCommonValue, } from '../../affine-shared/utils/index.js';
 import { renderMenu, resolveMenuItemLabel, } from '../../affine-widget-edgeless-toolbar/index.js';
 import { TextAlignCenterIcon, TextAlignLeftIcon, TextAlignRightIcon, } from '@blocksuite/icons/lit';
 import { signal } from '@preact/signals-core';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
-import { isFontStyleSupported, isFontWeightSupported, } from '../element-renderer/utils.js';
+import { isFontStyleSupported, isFontWeightSupported, parseTextDecoration, toggleTextDecoration, } from '../element-renderer/utils.js';
 import { TEXT_ALIGN_CENTER, TEXT_ALIGN_LEFT, TEXT_ALIGN_RIGHT, TEXT_TOOLBAR_ALIGNMENT, TEXT_TOOLBAR_ALIGNMENT_MENU_ARIA, TEXT_TOOLBAR_FONT, TEXT_TOOLBAR_FONT_STYLE, TEXT_TOOLBAR_FONT_STYLE_ITALIC, TEXT_TOOLBAR_FONT_WEIGHT_BOLD, TEXT_TOOLBAR_FONT_WEIGHT_LIGHT, TEXT_TOOLBAR_FONT_WEIGHT_REGULAR, TEXT_TOOLBAR_FONT_WEIGHT_SEMIBOLD, TEXT_TOOLBAR_FONT_SIZE, TEXT_TOOLBAR_TEXT_COLOR, } from '../translations.js';
 const FONT_WEIGHT_LIST = [
     {
@@ -71,6 +72,24 @@ const TEXT_ALIGN_LIST = [
         icon: TextAlignRightIcon(),
     },
 ];
+/**
+ * The decoration toggles, in the order they sit on the row (the toolbar orders
+ * a group's children by id).
+ */
+const TEXT_DECORATION_TOGGLES = [
+    {
+        id: 'a.underline',
+        token: 'underline',
+        icon: UnderlineIcon,
+        wording: TEXT_FORMAT_UNDERLINE,
+    },
+    {
+        id: 'b.overline',
+        token: 'overline',
+        icon: OverlineIcon,
+        wording: TEXT_FORMAT_OVERLINE,
+    },
+];
 export function createTextActions(klass, type, update = (ctx, model, props) => ctx.std.get(EdgelessCRUDIdentifier).updateElement(model.id, props), mapInto = model => model, stash = (model, type, field) => model[type](field)) {
     return [
         {
@@ -250,6 +269,38 @@ export function createTextActions(klass, type, update = (ctx, model, props) => c
         `;
             },
         },
+        {
+            // Two element-level toggles, drawn like the format bar's underline:
+            // the decoration applies to the whole text, never to one run (ADR 0030
+            // §1, §6). `affine:edgeless-text` decorates its paragraphs per run
+            // through the inline schema instead, so it has no such field.
+            id: 'c.text-decoration',
+            when: type !== 'edgeless-text',
+            actions: TEXT_DECORATION_TOGGLES.map(({ id, token, icon, wording }) => ({
+                id,
+                icon,
+                tooltipWording: wording,
+                when: (ctx) => {
+                    const models = ctx.getSurfaceModelsByType(klass);
+                    return (models.length > 0 &&
+                        models.every(model => isSurfaceTextModel(model, klass, type)));
+                },
+                active: (ctx) => ctx
+                    .getSurfaceModelsByType(klass)
+                    .every(model => parseTextDecoration(mapInto(model).textDecoration)[token]),
+                run: (ctx) => {
+                    const models = ctx.getSurfaceModelsByType(klass);
+                    const on = !models.every(model => parseTextDecoration(mapInto(model).textDecoration)[token]);
+                    // One click, one undo step, whatever the selection holds.
+                    ctx.store.captureSync();
+                    for (const model of models) {
+                        update(ctx, model, {
+                            textDecoration: toggleTextDecoration(mapInto(model).textDecoration, token, on),
+                        });
+                    }
+                },
+            })),
+        },
         {
             id: 'd.font-size',
             when: type !== 'edgeless-text',

package/dist/_pkgs/affine-gfx-text/toolbar/config.d.ts

@@ -8,6 +8,17 @@ export declare const textToolbarConfig: {
     }, {
         readonly id: "c.font-style";
         readonly content: (ctx: import("../../affine-shared/services/index.js").ToolbarContext) => import("lit-html").TemplateResult<1> | null;
+    }, {
+        readonly id: "c.text-decoration";
+        readonly when: boolean;
+        readonly actions: {
+            id: "a.underline" | "b.overline";
+            icon: import("lit-html").TemplateResult<1>;
+            tooltipWording: import("../../affine-shared/services/index.js").ChromeWording;
+            when: (ctx: import("../../affine-shared/services/index.js").ToolbarContext) => boolean;
+            active: (ctx: import("../../affine-shared/services/index.js").ToolbarContext) => boolean;
+            run: (ctx: import("../../affine-shared/services/index.js").ToolbarContext) => void;
+        }[];
     }, {
         readonly id: "d.font-size";
         readonly when: boolean;

package/dist/_pkgs/affine-gfx-text/toolbar/config.js

@@ -8,7 +8,7 @@ import { createTextActions } from './actions.js';
 export const textToolbarConfig = {
     actions: createTextActions(TextElementModel, 'text', (ctx, model, props) => {
         // No need to adjust element bounds
-        if (props['textAlign']) {
+        if (props['textAlign'] || props['textDecoration']) {
             ctx.std.get(EdgelessCRUDIdentifier).updateElement(model.id, props);
             return;
         }

package/dist/_pkgs/affine-inline-preset/adapters/html/html-inline.d.ts

@@ -25,6 +25,9 @@ export declare const htmlDelElementToDeltaMatcher: import("../../../store/index.
 export declare const htmlUnderlineElementToDeltaMatcher: import("../../../store/index.js").ExtensionType & {
     identifier: import("../../../global/di/types.js").ServiceIdentifier<import("../../../affine-shared/adapters/index.js").HtmlASTToDeltaMatcher>;
 };
+export declare const htmlOverlineElementToDeltaMatcher: import("../../../store/index.js").ExtensionType & {
+    identifier: import("../../../global/di/types.js").ServiceIdentifier<import("../../../affine-shared/adapters/index.js").HtmlASTToDeltaMatcher>;
+};
 export declare const htmlMarkElementToDeltaMatcher: import("../../../store/index.js").ExtensionType & {
     identifier: import("../../../global/di/types.js").ServiceIdentifier<import("../../../affine-shared/adapters/index.js").HtmlASTToDeltaMatcher>;
 };

package/dist/_pkgs/affine-inline-preset/adapters/html/html-inline.js

@@ -90,6 +90,22 @@ const isUnderlineElement = (ast) => {
     const isUnderlineStyle = /text-decoration:\s*underline/.test(style);
     return isUnderlineTag || isUnderlineStyle;
 };
+/**
+ * Check if the element is an overline element through its style — HTML has
+ * no overline tag, so `text-decoration: overline;` is the only spelling, and
+ * the one the HTML export writes (ADR 0030 §5).
+ * @example
+ * ```html
+ * <span style="text-decoration: overline;">Hello</span>
+ * ```
+ */
+const isOverlineElement = (ast) => {
+    if (!isElement(ast)) {
+        return false;
+    }
+    const style = typeof ast.properties.style === 'string' ? ast.properties.style : '';
+    return /text-decoration:\s*overline/.test(style);
+};
 /**
  * Check if the element is a line-through element through style or tag
  * If the element tag is <del> or the style is `text-decoration: line-through;`,
@@ -124,6 +140,7 @@ const isTextLikeElement = (ast) => {
         !isStrongElement(ast) &&
         !isItalicElement(ast) &&
         !isUnderlineElement(ast) &&
+        !isOverlineElement(ast) &&
         !isLineThroughElement(ast));
 };
 export const htmlTextToDeltaMatcher = HtmlASTToDeltaExtension({
@@ -256,6 +273,19 @@ export const htmlUnderlineElementToDeltaMatcher = HtmlASTToDeltaExtension({
         }));
     },
 });
+export const htmlOverlineElementToDeltaMatcher = HtmlASTToDeltaExtension({
+    name: 'overline-element',
+    match: ast => isOverlineElement(ast),
+    toDelta: (ast, context) => {
+        if (!isElement(ast)) {
+            return [];
+        }
+        return ast.children.flatMap(child => context.toDelta(child, { trim: false }).map(delta => {
+            delta.attributes = { ...delta.attributes, overline: true };
+            return delta;
+        }));
+    },
+});
 export const htmlMarkElementToDeltaMatcher = HtmlASTToDeltaExtension({
     name: 'mark-element',
     match: ast => isElement(ast) && ast.tagName === 'mark',
@@ -285,6 +315,7 @@ export const HtmlInlineToDeltaAdapterExtensions = [
     htmlCodeElementToDeltaMatcher,
     htmlDelElementToDeltaMatcher,
     htmlUnderlineElementToDeltaMatcher,
+    htmlOverlineElementToDeltaMatcher,
     htmlMarkElementToDeltaMatcher,
     htmlBrElementToDeltaMatcher,
 ];

package/dist/_pkgs/affine-inline-preset/adapters/html/inline-delta.d.ts

@@ -13,6 +13,10 @@ export declare const inlineCodeDeltaToHtmlAdapterMatcher: import("../../../store
 export declare const underlineDeltaToHtmlAdapterMatcher: import("../../../store/index.js").ExtensionType & {
     identifier: import("../../../global/di/types.js").ServiceIdentifier<import("../../../affine-shared/adapters/index.js").InlineDeltaToHtmlAdapterMatcher>;
 };
+/** HTML has no overline tag: a span carries it as CSS (ADR 0030 §5). */
+export declare const overlineDeltaToHtmlAdapterMatcher: import("../../../store/index.js").ExtensionType & {
+    identifier: import("../../../global/di/types.js").ServiceIdentifier<import("../../../affine-shared/adapters/index.js").InlineDeltaToHtmlAdapterMatcher>;
+};
 export declare const highlightBackgroundDeltaToHtmlAdapterMatcher: import("../../../store/index.js").ExtensionType & {
     identifier: import("../../../global/di/types.js").ServiceIdentifier<import("../../../affine-shared/adapters/index.js").InlineDeltaToHtmlAdapterMatcher>;
 };

package/dist/_pkgs/affine-inline-preset/adapters/html/inline-delta.js

@@ -60,6 +60,19 @@ export const underlineDeltaToHtmlAdapterMatcher = InlineDeltaToHtmlAdapterExtens
         };
     },
 });
+/** HTML has no overline tag: a span carries it as CSS (ADR 0030 §5). */
+export const overlineDeltaToHtmlAdapterMatcher = InlineDeltaToHtmlAdapterExtension({
+    name: 'overline',
+    match: delta => !!delta.attributes?.overline,
+    toAST: (_, context) => {
+        return {
+            type: 'element',
+            tagName: 'span',
+            properties: { style: 'text-decoration: overline;' },
+            children: [context.current],
+        };
+    },
+});
 export const highlightBackgroundDeltaToHtmlAdapterMatcher = InlineDeltaToHtmlAdapterExtension({
     name: 'highlight-background',
     match: delta => !!delta.attributes?.background,
@@ -123,6 +136,7 @@ export const InlineDeltaToHtmlAdapterExtensions = [
     italicDeltaToHtmlAdapterMatcher,
     strikeDeltaToHtmlAdapterMatcher,
     underlineDeltaToHtmlAdapterMatcher,
+    overlineDeltaToHtmlAdapterMatcher,
     highlightBackgroundDeltaToHtmlAdapterMatcher,
     highlightColorDeltaToHtmlAdapterMatcher,
     inlineCodeDeltaToHtmlAdapterMatcher,