Merge branch 'refs/heads/main' into staging

packages/text-annotator/src/highlight/canvas/canvasRenderer.css

@@ -1,14 +1,14 @@
-.r6o-highlight-layer {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    pointer-events: none;
+.r6o-canvas-highlight-layer {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
 }
 
-.r6o-highlight-layer.bg {
-    z-index: 1;
-    mix-blend-mode: multiply;
+.r6o-canvas-highlight-layer.bg {
+  mix-blend-mode: multiply;
+  z-index: 1;
 }

packages/text-annotator/src/highlight/canvas/canvasRenderer.ts

@@ -1,22 +1,22 @@
-import type { ViewportBounds } from '../viewport';
+import type { ViewportState } from '@annotorious/core';
+import type { TextAnnotatorState } from '../../state';
 import { debounce } from '../../utils';
+import type { ViewportBounds } from '../viewport';
 import type { HighlightStyle } from '../HighlightStyle';
 import { DEFAULT_SELECTED_STYLE, DEFAULT_STYLE, HighlightStyleExpression } from '../HighlightStyle';
 import type { HighlightPainter } from '../HighlightPainter';
 import { createBaseRenderer, type RendererImplementation } from '../baseRenderer';
 import type { Highlight } from '../Highlight';
-import type { TextAnnotatorState } from 'src/state';
-import type { ViewportState } from '@annotorious/core';
 
 import './canvasRenderer.css';
 
 const createCanvas = () => {
   const canvas = document.createElement('canvas');
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
-  canvas.className = 'r6o-highlight-layer bg';
+  canvas.className = 'r6o-canvas-highlight-layer bg';
   return canvas;
-};
+}
 
 const resetCanvas = (canvas: HTMLCanvasElement, highres?: boolean) => {
   canvas.width = highres ? 2 * window.innerWidth : window.innerWidth;
@@ -28,7 +28,7 @@ const resetCanvas = (canvas: HTMLCanvasElement, highres?: boolean) => {
     context.scale(2, 2);
     context.translate(0.5, 0.5);
   }
-};
+}
 
 const createRenderer = (container: HTMLElement): RendererImplementation => {
 
@@ -124,13 +124,13 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
 
   const setVisible = (visible: boolean) => {
     console.log('setVisible not implemented on Canvas renderer');
-  };
+  }
 
   const destroy = () => {
     canvas.remove();
 
     window.removeEventListener('resize', onResize);
-  };
+  }
 
   return {
     destroy,

packages/text-annotator/src/highlight/highlights/highlightsRenderer.ts

@@ -21,7 +21,7 @@ const toCSS = (s?: HighlightStyle) => {
   ].filter(Boolean);
 
   return rules.join(';');
-};
+}
 
 export const createRenderer = (): RendererImplementation => {
   const elem = document.createElement('style');
@@ -81,11 +81,11 @@ export const createRenderer = (): RendererImplementation => {
     });
 
     currentRendered = nextRendered;
-  };
+  }
 
   const setVisible = (visible: boolean) => {
     console.log('setVisible not implemented on CSS Custom Highlights renderer');
-  };
+  }
 
   const destroy = () => {
     // Clear all highlights from the Highlight Registry
@@ -94,15 +94,15 @@ export const createRenderer = (): RendererImplementation => {
 
     // Remove the stylesheet
     elem.remove();
-  };
+  }
 
   return {
     destroy,
     setVisible,
     redraw
   };
 
-};
+}
 
 export const createHighlightsRenderer = (
   container: HTMLElement,

packages/text-annotator/src/highlight/span/spansRenderer.ts

@@ -21,7 +21,7 @@ const computeZIndex = (rect: Rect, all: Rect[]): number => {
     intersects(rect, other) &&
     other.width > rect.width
   )).length;
-};
+}
 
 const createRenderer = (container: HTMLElement): RendererImplementation => {
 
@@ -93,26 +93,26 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
     });
 
     currentRendered = highlights;
-  };
+  }
 
   const setVisible = (visible: boolean) => {
     if (visible)
       highlightLayer.classList.remove('hidden');
     else
       highlightLayer.classList.add('hidden');
-  };
+  }
 
   const destroy = () => {
     highlightLayer.remove();
-  };
+  }
 
   return {
     destroy,
     redraw,
     setVisible
   };
 
-};
+}
 
 export const createSpansRenderer = (
   container: HTMLElement,

packages/text-annotator/src/presence/PresencePainter.css

@@ -0,0 +1,8 @@
+.r6o-presence-layer {
+  left: 0;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 100vw;
+  pointer-events: none;
+}

packages/text-annotator/src/presence/PresencePainter.ts

@@ -4,13 +4,15 @@ import type { HighlightStyle, HighlightPainter } from '../highlight';
 import type { PresencePainterOptions } from '../presence';
 import type { ViewportBounds } from '../highlight/viewport';
 
+import './PresencePainter.css';
+
 const createCanvas = () => {
   const canvas = document.createElement('canvas');
 
   // Retina resolution for crisp font rendering
   canvas.width = 2 * window.innerWidth;
   canvas.height = 2 * window.innerHeight;
-  canvas.className = 'r6o-highlight-layer presence';
+  canvas.className = 'r6o-presence-layer';
 
   const context = canvas.getContext('2d');
   context.scale(2, 2);