feat(diffs/editor): Add marker support

apps/demo/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@pierre/diffs": "workspace:*",
+    "@pierre/icons": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
     "shiki": "catalog:"

apps/demo/src/main.ts

@@ -23,6 +23,13 @@ import {
 } from '@pierre/diffs';
 import { Editor } from '@pierre/diffs/editor';
 import type { WorkerPoolManager } from '@pierre/diffs/worker';
+import {
+  IconCiFailedOctagonFill,
+  IconCiWarningFill,
+  IconInfoFill,
+} from '@pierre/icons';
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 
 import {
   cleanupCodeView,
@@ -59,6 +66,33 @@ const CRAZY_FILE = false;
 const LARGE_CONFLICT_FILE = false;
 const CODE_VIEW_OLD_NEW_FILE = true;
 
+// Pre-render the @pierre/icons SVG markup once so it can be embedded into the
+// `message.html` strings the editor injects for markers. The icons default to
+// `fill: currentcolor`, so each one inherits the surrounding text color.
+const MARKER_INFO_ICON = renderToStaticMarkup(
+  createElement(IconInfoFill, { size: 16 })
+);
+const MARKER_WARNING_ICON = renderToStaticMarkup(
+  createElement(IconCiWarningFill, { size: 16 })
+);
+const MARKER_ERROR_ICON = renderToStaticMarkup(
+  createElement(IconCiFailedOctagonFill, { size: 16 })
+);
+
+// Builds the HTML for a single marker overlay: a severity-colored leading icon
+// next to a message, with an additional description indented below the message
+// (aligned with the message text, not the icon).
+function markerMessage(opts: {
+  color: string;
+  icon: string;
+  message: string;
+  description: string;
+}): string {
+  const iconCol = `<span style="color:${opts.color};display:inline-flex;flex:none;margin-top:2px">${opts.icon}</span>`;
+  const textCol = `<div style="display:flex;flex-direction:column;gap:2px">${opts.message}<div style="color:gray">${opts.description}</div></div>`;
+  return `<div style="display:flex;align-items:flex-start;gap:8px">${iconCol}${textCol}</div>`;
+}
+
 const FileStreamCodeConfigs: FileStreamCodeConfigsItem[] = [
   {
     content: tsContent,
@@ -868,6 +902,67 @@ if (renderFileButton != null) {
                   direction: 'none',
                 },
               ]);
+              requestAnimationFrame(() => {
+                editor.setMarkers([
+                  {
+                    start: {
+                      line: 1,
+                      character: 2,
+                    },
+                    end: {
+                      line: 1,
+                      character: 1000, // will be normalized to the end of the line(< 1000 chars)
+                    },
+                    severity: 'info',
+                    message: {
+                      html: markerMessage({
+                        color: 'var(--diffs-editor-info-fg, #3794ff)',
+                        icon: MARKER_INFO_ICON,
+                        message: '<code>CodeOptionsMultipleThemes</code>',
+                        description: 'Code options of multiple themes.',
+                      }),
+                    },
+                  },
+                  {
+                    start: {
+                      line: 2,
+                      character: 2,
+                    },
+                    end: {
+                      line: 2,
+                      character: 1000, // will be normalized to the end of the line(< 1000 chars)
+                    },
+                    severity: 'warning',
+                    message: {
+                      html: markerMessage({
+                        color: 'var(--diffs-editor-warning-fg, #cca700)',
+                        icon: MARKER_WARNING_ICON,
+                        message: '<code>CodeToHastOptions</code>',
+                        description: 'Code to Hast Options is deprecated.',
+                      }),
+                    },
+                  },
+                  {
+                    start: {
+                      line: 3,
+                      character: 2,
+                    },
+                    end: {
+                      line: 3,
+                      character: 1000, // will be normalized to the end of the line(< 1000 chars)
+                    },
+                    severity: 'error',
+                    message: {
+                      html: markerMessage({
+                        color: 'var(--diffs-editor-error-fg, red)',
+                        icon: MARKER_ERROR_ICON,
+                        message: '<code>DecorationItem</code>',
+                        description: 'Type not defined.',
+                      }),
+                    },
+                  },
+                ]);
+              });
             } else {
               editor.cleanUp();
             }

packages/diffs/src/editor/editor.css

@@ -56,7 +56,8 @@
 }
 [data-caret],
 [data-selection-range],
-[data-match-range] {
+[data-match-range],
+[data-marker-range] {
   position: absolute;
   top: 0;
   left: 0;
@@ -90,18 +91,42 @@
   background-color: var(--diffs-bg);
 }
 [data-match-range] {
+  z-index: -10;
   background-color: var(
     --diffs-editor-match-bg,
     var(--diffs-editor-selection-bg)
   );
-  z-index: -10;
 }
 [data-match-range]:not([data-focus]) {
   background-color: var(
     --diffs-editor-match-highlight-bg,
     light-dark(#ff963288, #ff963266)
   );
 }
+[data-marker-range] {
+  z-index: 1;
+  /* White stroke: luminance masks treat black as transparent. */
+  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjMiPjxwYXRoIGQ9Im0wIDIuNSBsMiAtMS41IGwxIDAgbDIgMS41IGwxIDAiIHN0cm9rZT0iI2ZmZiIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+');
+  mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjMiPjxwYXRoIGQ9Im0wIDIuNSBsMiAtMS41IGwxIDAgbDIgMS41IGwxIDAiIHN0cm9rZT0iI2ZmZiIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+');
+  -webkit-mask-position: left bottom;
+  mask-position: left bottom;
+  -webkit-mask-repeat: repeat-x;
+  mask-repeat: repeat-x;
+  -webkit-mask-size: 6px 3px;
+  mask-size: 6px 3px;
+}
+[data-marker-error] {
+  background-color: var(--diffs-editor-error-fg, red);
+}
+[data-marker-warning] {
+  background-color: var(--diffs-editor-warning-fg, #cca700);
+}
+[data-marker-info] {
+  background-color: var(--diffs-editor-info-fg, #3794ff);
+}
+[data-marker-hint] {
+  background-color: var(--diffs-editor-hint-fg, #6a6a6a);
+}
 [data-rtl] {
   border-top-left-radius: 3px;
 }
@@ -126,6 +151,36 @@
     visibility: visible;
   }
 }
+[data-editor-widget] {
+  --diffs-widget-bg: color-mix(in lab, var(--diffs-fg) 4%, var(--diffs-bg));
+  --diffs-widget-border: color-mix(in lab, var(--diffs-fg) 20%, transparent);
+  --diffs-widget-shadow:
+    inset 0 0 0 1px var(--diffs-bg), 0 4px 8px rgb(0 0 0 / 0.075),
+    0 6px 18px rgb(0 0 0 / 0.075);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: fit-content;
+  max-width: calc(100% - 24px);
+  border: 1px solid var(--diffs-widget-border);
+  border-radius: 9px;
+  background-color: var(--diffs-widget-bg);
+  background-clip: padding-box;
+  box-shadow: var(--diffs-widget-shadow);
+}
+[data-marker-popup] {
+  padding: 8px 12px;
+  min-width: 180px;
+  pointer-events: auto;
+  font-family: var(--diffs-header-font-fallback);
+  font-size: 14px;
+  line-height: 1.4;
+}
+[data-marker-popup] code {
+  display: inline;
+  background-color: transparent;
+}
 
 /* Selection Action Widget */
 [data-selection-action-icon] {
@@ -159,35 +214,22 @@
 
 /* Search Panel Widget */
 [data-search-panel] {
+  display: flex;
+  gap: 6px;
   position: sticky;
   top: 12px;
-  z-index: 100;
-  width: fit-content;
   min-width: 300px;
-  max-width: calc(100% - 24px);
   margin-inline: auto 12px;
   margin-bottom: 4px;
-  display: flex;
-  gap: 4px;
-  background-clip: padding-box;
-  background-color: color-mix(
-    in lab,
-    color-mix(in lab, var(--diffs-fg) 4%, var(--diffs-bg)),
-    transparent 40%
-  );
-  border: 1px solid color-mix(in lab, var(--diffs-fg) 15%, var(--diffs-bg));
-  padding: 6px 6px 6px 10px;
-  border-radius: 8px;
-  box-shadow: 0 0 12px 0 color-mix(in lab, var(--diffs-fg) 10%, var(--diffs-bg));
-  backdrop-filter: blur(8px);
+  padding: 4px;
 }
 [data-search-panel-row] {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 1px;
   width: 100%;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--diffs-header-font-fallback);
   font-size: 14px;
 }
 [data-search-panel-row] input {
@@ -234,8 +276,6 @@
     color 0.1s ease-in-out;
 }
 [data-search-panel-row] [data-icon='search'] {
-  width: 16px;
-  margin-right: 2px;
   color: color-mix(in lab, var(--diffs-fg) 50%, var(--diffs-bg));
   cursor: default;
 }