feat: baseURL for image paths

docs/APIs.md

@@ -64,7 +64,8 @@ var view = new vega.View(runtime)
 | `disableDefaultStyle` | Boolean  | Disable the default style completely. |
 | `sanitize`      | Function       | Function to convert value to string, and sanitize the HTML. |
 | `maxDepth`      | Number         | The maximum recursion depth when printing objects in the tooltip. |
-| `formatTooltip`      | Function         | Function to specify custom HTML inside tooltip element. It is highly recommended to `sanitize` any data from `value` before returning an HTML string. |
+| `formatTooltip` | Function       | Function to specify custom HTML inside tooltip element. It is highly recommended to `sanitize` any data from `value` before returning an HTML string. |
+| `baseURL`       | String         | The base URL to use for resolving relative URLs for images. |
 
 
 The default values are:
@@ -79,7 +80,8 @@ var DEFAULT_OPTIONS =
   theme: 'light',
   disableDefaultStyle: false,
   sanitize: (value) => String(value).replace(/&/g, '&amp;').replace(/</g, '&lt;'),
-  formatTooltip: vegaTooltip.formatValue
+  formatTooltip: vegaTooltip.formatValue,
+  baseURL: ''
 };
 ```
 

src/Handler.ts

@@ -53,7 +53,7 @@
   /**
    * The tooltip handler function.
    */
   private tooltipHandler(handler: any, event: MouseEvent, item: any, value: any) {
     // console.log(handler, event, item, value);
 
     // append a div element that we use as a tooltip unless it already exists
@@ -74,7 +74,12 @@
     }
 
     // set the tooltip content
-    this.el.innerHTML = this.options.formatTooltip(value, this.options.sanitize, this.options.maxDepth);
+    this.el.innerHTML = this.options.formatTooltip(
+      value,
+      this.options.sanitize,
+      this.options.maxDepth,
+      this.options.baseURL,
+    );
 
     // make the tooltip visible
     this.el.classList.add('visible', `${this.options.theme}-theme`);

src/defaults.ts

@@ -52,9 +52,15 @@
    * A function to customize the rendered HTML of the tooltip.
    * @param value A value string, or object of value strings keyed by field
    * @param sanitize The `sanitize` function from `options.sanitize`
+   * @param baseURL The `baseURL` from `options.baseURL`
    * @returns {string} The returned string will become the `innerHTML` of the tooltip element
    */
   formatTooltip: formatValue,
+
+  /**
+   * The baseurl to use in image paths.
+   */
+  baseURL: '',
 };
 
 export type Options = Partial<typeof DEFAULT_OPTIONS>;
@@ -64,7 +70,7 @@
  *
  * @param value A value to convert to string and HTML-escape.
  */
 export function escapeHTML(value: any): string {
   return String(value).replace(/&/g, '&amp;').replace(/</g, '&lt;');
 }
 

src/formatValue.ts

@@ -6,7 +6,12 @@
  * @param value The value to show in the tooltip.
  * @param valueToHtml Function to convert a single cell value to an HTML string
  */
-export function formatValue(value: any, valueToHtml: (value: any) => string, maxDepth: number): string {
+export function formatValue(
+  value: any,
+  valueToHtml: (value: any) => string,
+  maxDepth: number,
+  baseURL: string,
+): string {
   if (isArray(value)) {
     return `[${value.map((v) => valueToHtml(isString(v) ? v : stringify(v, maxDepth))).join(', ')}]`;
   }
@@ -14,21 +19,21 @@
   if (isObject(value)) {
     let content = '';
 
     const {title, image, ...rest} = value as any;
 
     if (title) {
       content += `<h2>${valueToHtml(title)}</h2>`;
     }
 
     if (image) {
-      content += `<img src="${valueToHtml(image)}">`;
+      content += `<img src="${new URL(valueToHtml(image), baseURL || location.href).href}">`;
     }
 
     const keys = Object.keys(rest);
     if (keys.length > 0) {
       content += '<table>';
       for (const key of keys) {
         let val = (rest as any)[key];
 
         // ignore undefined properties
         if (val === undefined) {
@@ -51,9 +56,9 @@
 }
 
 export function replacer(maxDepth: number) {
   const stack: any[] = [];
 
   return function (this: any, key: string, value: any) {
     if (typeof value !== 'object' || value === null) {
       return value;
     }