@atlaskit/editor-plugin-show-diff 14.5.2 → 15.0.0

package/dist/types/pm-plugins/decorations/createContributorTagWidget.d.ts

@@ -1,4 +1,4 @@
-import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import type { IntlShape } from 'react-intl';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
@@ -6,24 +6,26 @@ import type { ShowDiffPlugin } from '../../showDiffPluginType';
 /** Marks the host element of one tag, so a tag can be found in the document by its own diff. */
 export declare const CONTRIBUTOR_TAG_HOST_ATTRIBUTE = "data-contributor-tag-host";
 /**
- * Everything a tag needs to mount itself into the document, plumbed down from the plugin. Absent in
+ * Everything a tag needs to draw itself into the document, plumbed down from the plugin. Absent in
  * unit tests that build decorations directly: the hosts are still emitted, they just stay empty.
  */
 export type ContributorTagMountContext = {
     api?: ExtractInjectionAPI<ShowDiffPlugin>;
-    /** This editor's own content root — see `ContributorTagProps.getEditorRoot`. */
+    /** This editor's own content root — see `ContributorTagControllerOptions.getEditorRoot`. */
     getEditorRoot: () => HTMLElement | null;
-    portalProviderAPI: PortalProviderAPI;
+    getIntl: () => IntlShape;
 };
 /** A mounted tag, so whoever emitted the host can take it down again. */
 export type ContributorTagMount = {
-    key: string;
-    portalProviderAPI: PortalProviderAPI;
+    destroy: () => void;
 };
 /**
- * Renders the tag into `host` through the editor's portal provider, the way the rest of the editor
- * mounts React into decorations. The tag resolves its own model from plugin state, so a redraw of
- * the host re-parents the tag instead of stranding it, and `isActive` changes arrive as a re-render.
+ * Draws the tag into `host`. The tag resolves its own model from plugin state, so a redraw of the
+ * host re-parents the tag instead of stranding it, and `isActive` changes arrive as an update.
+ *
+ * Each mount owns its own controller and DOM, so when ProseMirror draws a replacement widget before
+ * destroying the one it replaces, the outgoing `destroy` cannot take the incoming tag down with it
+ * (EDITOR-8702).
  */
 export declare const mountContributorTag: ({ diffId, host, mountContext, }: {
     diffId: string;

package/dist/types/pm-plugins/main.d.ts

@@ -1,5 +1,4 @@
 import type { IntlShape } from 'react-intl';
-import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
@@ -58,4 +57,4 @@ export type ShowDiffPluginState = {
     stepAttributions?: Array<DiffStepAttribution | undefined>;
     steps: ProseMirrorStep[];
 };
-export declare const createPlugin: (config: DiffParams | undefined, getIntl: () => IntlShape, api: ExtractInjectionAPI<ShowDiffPlugin> | undefined, portalProviderAPI?: PortalProviderAPI, onEditorView?: (editorView: EditorView | undefined) => void) => SafePlugin<ShowDiffPluginState>;
+export declare const createPlugin: (config: DiffParams | undefined, getIntl: () => IntlShape, api: ExtractInjectionAPI<ShowDiffPlugin> | undefined, onEditorView?: (editorView: EditorView | undefined) => void) => SafePlugin<ShowDiffPluginState>;

package/dist/types/ui/ContributorTag/buildContributorTagDom.d.ts

@@ -0,0 +1,25 @@
+export declare const CONTRIBUTOR_TAG_TESTID = "diff-contributor-tag";
+export declare const CONTRIBUTOR_TAG_NAME_TESTID = "diff-contributor-tag-name";
+/**
+ * Floor for the tag width (~one 16px avatar plus padding), so the highlight-width clamp cannot
+ * collapse the box on a very short highlight.
+ */
+export declare const MIN_TAG_WIDTH = "28px";
+export type ContributorTagDom = {
+    avatars: HTMLSpanElement;
+    name: HTMLSpanElement;
+    root: HTMLSpanElement;
+    /**
+     * Announced after the name, which is the order design requires. `VanillaTooltip` appends its
+     * popover to the tag as well, so this is the last *content* child rather than the last node.
+     */
+    srLabel: HTMLSpanElement;
+    tag: HTMLSpanElement;
+};
+/**
+ * The tag's markup, with no model applied — see `ContributorTagController`.
+ *
+ * Built element by element rather than through `DOMSerializer.renderSpec`, which returns `Node` and
+ * would need a cast per reference below.
+ */
+export declare const buildContributorTagDom: (doc: Document) => ContributorTagDom;

package/dist/types/ui/ContributorTag/contributorAvatarRenderer.d.ts

@@ -0,0 +1,22 @@
+import type { TagContributor } from '../../showDiffPluginType';
+export type ContributorAvatar = {
+    destroy: () => void;
+    element: HTMLElement;
+    /** Repainted when the tag's accent changes, so a state change does not refetch the image. */
+    setRingColor: (ringColor: string) => void;
+};
+/**
+ * One 16px avatar for a contributor: a circle for a person, a hexagon for an agent.
+ *
+ * Mirrors `mentionAvatarRenderer` — a bare `<img>` with a glyph fallback bound to `error`, and the
+ * hexagon cut with `clip-path`. The ring `@atlaskit/avatar` drew from `borderColor` is a
+ * `box-shadow` on the circle and a second clipped hexagon behind the agent, since `box-shadow` is
+ * cut away by `clip-path`.
+ */
+export declare const contributorAvatarRenderer: ({ contributor, doc, ringColor, stackIndex, }: {
+    contributor: TagContributor;
+    doc: Document;
+    ringColor: string;
+    /** Paints the leading avatar of a connected pair over the one it overlaps. */
+    stackIndex?: number;
+}) => ContributorAvatar;

package/dist/types/ui/ContributorTag/contributorTagController.d.ts

@@ -0,0 +1,85 @@
+import type { IntlShape } from 'react-intl';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ShowDiffPlugin } from '../../showDiffPluginType';
+export type ContributorTagControllerOptions = {
+    api?: ExtractInjectionAPI<ShowDiffPlugin>;
+    diffId: string;
+    /**
+     * This editor's own content root (`editorView.dom`), read through the plugin's captured view.
+     *
+     * Every DOM lookup the tag makes is scoped to it, rather than resolved by class name from a
+     * highlight element: `.ProseMirror` is not this package's to rename, and with nested editors the
+     * nearest one is not necessarily the editor whose plugin rendered this tag.
+     */
+    getEditorRoot: () => HTMLElement | null;
+    /**
+     * Read when a model is applied rather than subscribed to, so a locale swap mid-diff would not
+     * re-label a tag already on screen. Locales do not hot-swap while a diff is open.
+     */
+    getIntl: () => IntlShape;
+};
+/**
+ * A small tag naming who made one diff, drawn into the host element its decoration places on the
+ * change's first character and positioned above it.
+ *
+ * The model is resolved from plugin state here rather than passed in, because ProseMirror skips
+ * `toDOM` for a widget it reuses: stepping to the next change republishes the tags without redrawing
+ * their hosts, so anything the tag reacts to — `isActive` above all — has to arrive through a
+ * subscription of its own (EDITOR-8702). Draws nothing when this diff has no tag, which is the case
+ * for the deleted half of a replacement: that half is folded into the inline tag.
+ */
+export declare class ContributorTagController {
+    private options;
+    private avatars;
+    /** Guards a deferred bind that a later model change has already superseded. */
+    private bindToken;
+    private boundSelector;
+    private dom;
+    private fullLabel;
+    private host;
+    private isDestroyed;
+    private isHighlightHovered;
+    private isHoveredOrFocused;
+    private maxWidthPx;
+    private model;
+    private resizeObserver;
+    private tooltip;
+    private tooltipContent;
+    private unbindHighlights;
+    private unbindTag;
+    private unsubscribe;
+    constructor(options: ContributorTagControllerOptions);
+    mount(host: HTMLElement): void;
+    destroy(): void;
+    private findModel;
+    private applyModel;
+    /** Takes the tag's DOM down, keeping the subscription so a republished model redraws it. */
+    private teardownTag;
+    private bindTag;
+    private renderAvatars;
+    private renderLabels;
+    private accentOf;
+    private applyAccent;
+    /** Width clamp and visibility — the two things that are not carried by the model alone. */
+    private applyStyles;
+    /**
+     * The full label is always the tooltip, whether or not the name it draws is clipped: the tag is
+     * never wider than the highlight, so a name that fits at one width is ellipsised at the next, and
+     * a connected pair spells out a contributor the tag does not show at any width.
+     *
+     * `VanillaTooltip` has no "set new content" call, so it is rebuilt when the label changes — the
+     * shape of `syncVanillaDisabledTooltip` in `mentionNodeView`.
+     */
+    private syncTooltip;
+    /**
+     * Observes the highlight this tag describes, for what CSS here cannot see: its hover state (the
+     * highlight is a ProseMirror decoration in a different DOM subtree, so listeners are bound
+     * imperatively via `data-diff-id`) and the width the tag is clamped to.
+     *
+     * Deliberately not routed through plugin state: a transaction per pointer move would re-run the
+     * memoised decoration calculation.
+     */
+    private syncHighlightBindings;
+    private bindHighlightState;
+    private unbindHighlightState;
+}

package/dist/types/ui/ContributorTag/contributorTagIcons.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The icons a contributor tag can draw, as inline SVG.
+ *
+ * Neither `@atlaskit/icon`, `@atlaskit/icon-lab` nor `@atlaskit/logo` exposes a raw-SVG entry
+ * point, so the markup is copied here rather than kept as a React island for three glyphs. Keep in
+ * sync with the sources named on each constant.
+ *
+ * The Rovo hex is the `brand` appearance, whose `--rovo-*-color` variables resolve to `initial` in
+ * both themes — the fallbacks below are the rendered colours, so no theme observer is needed.
+ */
+export type ContributorTagIcon = 'aiBot' | 'person' | 'rovoHex';
+export declare const getContributorTagIcon: (icon: ContributorTagIcon, doc: Document) => DocumentFragment;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "14.5.2",
+	"version": "15.0.0",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -20,23 +20,19 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^57.3.0",
+		"@atlaskit/adf-schema": "^57.4.0",
 		"@atlaskit/avatar": "^28.0.0",
 		"@atlaskit/custom-steps": "^1.1.0",
-		"@atlaskit/editor-plugin-analytics": "^16.1.0",
-		"@atlaskit/editor-plugin-user-intent": "^14.0.0",
+		"@atlaskit/editor-plugin-analytics": "^17.0.0",
+		"@atlaskit/editor-plugin-user-intent": "^15.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-shared-styles": "^4.1.0",
 		"@atlaskit/editor-tables": "^3.1.0",
-		"@atlaskit/icon-lab": "^7.8.0",
-		"@atlaskit/logo": "^21.6.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
-		"@atlaskit/tmp-editor-statsig": "^178.0.0",
+		"@atlaskit/tmp-editor-statsig": "^179.0.0",
 		"@atlaskit/tokens": "^16.11.0",
-		"@atlaskit/tooltip": "^24.3.0",
-		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",
@@ -49,7 +45,7 @@
 		"@atlaskit/button": "^25.3.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/dropdown-menu": "^18.3.0",
-		"@atlaskit/editor-core": "^226.6.0",
+		"@atlaskit/editor-core": "^227.0.0",
 		"@atlaskit/editor-json-transformer": "^9.8.0",
 		"@atlaskit/editor-plugins": "^16.1.0",
 		"@atlaskit/form": "^17.2.0",
@@ -59,15 +55,15 @@
 		"@atlaskit/util-data-test": "^19.1.0",
 		"@atlassian/confluence-presets": "workspace:^",
 		"@atlassian/content-reconciliation": "^0.1.3506",
-		"@atlassian/editor-ai-injected-editors": "^30.0.0",
-		"@atlassian/editor-plugin-ai": "^70.2.0",
+		"@atlassian/editor-ai-injected-editors": "^31.0.0",
+		"@atlassian/editor-plugin-ai": "^71.0.0",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.16.0",
+		"@atlaskit/editor-common": "^121.0.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"

package/dist/cjs/ui/ContributorTag/ContributorTag.compiled.css

@@ -1,29 +0,0 @@
-._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._zulp1b66{gap:var(--ds-space-050,4px)}
-._18zr1b66{padding-inline:var(--ds-space-050,4px)}
-._1rjcv77o{padding-block:var(--ds-space-025,2px)}
-._12l2r5cr{margin-inline-end:var(--ds-space-negative-050,-4px)}
-._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
-._18m915vq{overflow-y:hidden}
-._1bto1l2s{text-overflow:ellipsis}
-._1doc1dm9{border-bottom-width:var(--ds-border-width-selected,2px)}
-._1e02idpf{inset-inline-start:0}
-._1e0c116y{display:inline-flex}
-._1e0c1ule{display:block}
-._1il9nqa1{border-bottom-style:solid}
-._1o9zidpf{flex-shrink:0}
-._1pbykb7n{z-index:1}
-._1reo15vq{overflow-x:hidden}
-._1ul9idpf{min-width:0}
-._4cvr1h6o{align-items:center}
-._94n51osq{bottom:100%}
-._kqswstnw{position:absolute}
-._lcxv1wug{pointer-events:auto}
-._lcxvglyw{pointer-events:none}
-._o5721q9c{white-space:nowrap}
-._p12f1osq{max-width:100%}
-._tzy4idpf{opacity:0}
-._tzy4kb7n{opacity:1}
-._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
-._vchhusvi{box-sizing:border-box}