@isrd-isi-edu/ermrestjs 2.3.0 → 2.4.0

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@isrd-isi-edu/ermrestjs",
   "description": "ERMrest client library in JavaScript",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "license": "Apache-2.0",
   "engines": {
     "node": ">= 20.0.0",
-    "npm": ">=6.0.0"
+    "npm": ">= 7.0.0"
   },
   "main": "dist/ermrest.js",
   "module": "dist/ermrest.min.js",
@@ -42,11 +42,16 @@
     "postgresql",
     "library"
   ],
+  "overrides": {
+    "@microsoft/api-extractor": {
+      "typescript": "$typescript"
+    }
+  },
   "dependencies": {
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
     "@types/q": "^1.5.8",
-    "axios": "1.13.2",
+    "axios": "1.13.5",
     "handlebars": "4.7.8",
     "lodash-es": "^4.17.23",
     "lz-string": "^1.5.0",

package/src/models/reference-column/asset-pseudo-column.ts

@@ -455,13 +455,18 @@ export class AssetPseudoColumn extends ReferenceColumn {
    */
   get filePreview(): FilePreviewConfig | null {
     if (this._filePreview === undefined) {
-      const disp = this._annotation.display;
-      const currDisplay = isObjectAndNotNull(disp) ? _getAnnotationValueByContext(this._context, disp) : null;
-      const settings = isObjectAndKeyExists(currDisplay, 'file_preview') ? currDisplay.file_preview : {};
-      if (settings === false) {
+      // if the colum has markdown-pattern, don't show the file preview
+      if (this.display.sourceMarkdownPattern || this._baseCol.getDisplay(this._context).isMarkdownPattern) {
         this._filePreview = null;
       } else {
-        this._filePreview = new FilePreviewConfig(settings);
+        const disp = this._annotation.display;
+        const currDisplay = isObjectAndNotNull(disp) ? _getAnnotationValueByContext(this._context, disp) : null;
+        const settings = isObjectAndKeyExists(currDisplay, 'file_preview') ? currDisplay.file_preview : {};
+        if (settings === false) {
+          this._filePreview = null;
+        } else {
+          this._filePreview = new FilePreviewConfig(settings);
+        }
       }
     }
     return this._filePreview;

package/src/services/file-preview.ts

@@ -98,13 +98,18 @@ export default class FilePreviewService {
     storedFilename?: string,
     contentDisposition?: string,
     contentType?: string,
+    forcedPreviewType?: FilePreviewTypes,
+    forcedPrefetchBytes?: number,
+    forcedPrefetchMaxFileSize?: number,
   ): {
     previewType: FilePreviewTypes | null;
     prefetchBytes: number | null;
     prefetchMaxFileSize: number | null;
+    filename: string;
   } {
-    const disabledValue = { previewType: null, prefetchBytes: null, prefetchMaxFileSize: null };
-    const previewType = FilePreviewService.getFilePreviewType(url, column, storedFilename, contentDisposition, contentType);
+    const disabledValue = { previewType: null, prefetchBytes: null, prefetchMaxFileSize: null, filename: '' };
+    const filename = storedFilename || getFilename(url, contentDisposition);
+    const previewType = forcedPreviewType ? forcedPreviewType : FilePreviewService.getFilePreviewType(url, filename, column, contentType);
     let prefetchBytes: number | null = null;
     let prefetchMaxFileSize: number | null = null;
 
@@ -127,30 +132,31 @@ export default class FilePreviewService {
       prefetchMaxFileSize = FILE_PREVIEW.MAX_FILE_SIZE;
     }
 
+    // the forced (manual) setting cannot exceed the column/default settings
+    if (typeof forcedPrefetchBytes === 'number' && forcedPrefetchBytes >= 0 && forcedPrefetchBytes < prefetchBytes) {
+      prefetchBytes = forcedPrefetchBytes;
+    }
+    if (typeof forcedPrefetchMaxFileSize === 'number' && forcedPrefetchMaxFileSize >= 0 && forcedPrefetchMaxFileSize < prefetchMaxFileSize) {
+      prefetchMaxFileSize = forcedPrefetchMaxFileSize;
+    }
+
     // if prefetchMaxFileSize is 0, we should not show the preview
     if (prefetchMaxFileSize === 0) {
       return disabledValue;
     }
 
-    return { previewType, prefetchBytes, prefetchMaxFileSize };
+    return { previewType, prefetchBytes, prefetchMaxFileSize, filename };
   }
 
   /**
    * Returns the preview type based on the given file properties and the column's file preview settings.
    * @param url the file url
    * @param column the asset column
-   * @param storedFilename the stored filename
+   * @param filename the filename (either stored filename or from content-disposition or url)
    * @param contentDisposition content-disposition header value
    * @param contentType content-type header value
    */
-  private static getFilePreviewType(
-    url: string,
-    column?: AssetPseudoColumn,
-    storedFilename?: string,
-    contentDisposition?: string,
-    contentType?: string,
-  ): FilePreviewTypes | null {
-    const filename = storedFilename || getFilename(url, contentDisposition);
+  private static getFilePreviewType(url: string, filename: string, column?: AssetPseudoColumn, contentType?: string): FilePreviewTypes | null {
     const extension = getFilenameExtension(filename, column?.filenameExtFilter, column?.filenameExtRegexp);
     let mappedFilePreviewType: FilePreviewTypes | typeof USE_EXT_MAPPING | false = USE_EXT_MAPPING;
 

package/src/utils/markdown-div-block.ts

@@ -0,0 +1,291 @@
+import type MarkdownIt from 'markdown-it';
+
+/**
+ * Custom div block plugin for markdown-it
+ * Supports:
+ * - Multi-line syntax with attributes: :::div {.class #id attr="value"}\nContent\n:::
+ * - Nesting with colon counting: :::, ::::, :::::, etc.
+ * - Single-line syntax: :::div content {.class}\n:::
+ */
+
+const MARKER_CHAR = 0x3a; // ':'
+const MIN_MARKERS = 3;
+
+// Store markdown-it instance for use in renderers
+let mdInstance: any = null;
+
+/**
+ * Unwrap paragraph tags that contain only a single element, but only within div tags
+ * This handles cases like <div><p><img></p></div> -> <div><img></div>
+ */
+function unwrapSingleElementParagraphsInDivs(html: string): string {
+  // Pattern to match <div...>...</div> including nested divs
+  const divPattern = /<div([^>]*)>([\s\S]*?)<\/div>/g;
+
+  return html.replace(divPattern, (match, divAttrs, divContent) => {
+    // Apply paragraph unwrapping only to content inside this div
+    const unwrappedContent = unwrapParagraphsInContent(divContent);
+    return `<div${divAttrs}>${unwrappedContent}</div>`;
+  });
+}
+
+/**
+ * Unwrap paragraph tags containing single elements from the given content
+ */
+function unwrapParagraphsInContent(content: string): string {
+  const pTagPattern = /<p([^>]*)>(.*?)<\/p>/gs;
+
+  return content.replace(pTagPattern, (match, _pAttrs, pContent) => {
+    const trimmedContent = pContent.trim();
+
+    // Check if content contains only a single HTML element (no surrounding text)
+    const singleElementPattern = /^<([a-z][a-z0-9]*)\b[^>]*>.*?<\/\1>$|^<[a-z][a-z0-9]*\b[^>]*\/?>$/is;
+
+    if (singleElementPattern.test(trimmedContent)) {
+      const tagMatch = trimmedContent.match(/^<([a-z][a-z0-9]*)/i);
+      if (tagMatch) {
+        const tagName = tagMatch[1].toLowerCase();
+        // Block-level elements and elements that shouldn't be wrapped in <p>
+        const unwrapTags = ['img', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'table', 'figure', 'iframe', 'video'];
+
+        if (unwrapTags.includes(tagName)) {
+          return trimmedContent;
+        }
+
+        // For inline elements like <a>, only unwrap if it's the ONLY content
+        if (tagName === 'a' || tagName === 'span') {
+          return trimmedContent;
+        }
+      }
+    }
+
+    // Keep the <p> tag
+    return match;
+  });
+}
+
+/**
+ * Parse the div block opening line to extract attributes
+ */
+function parseOpeningLine(line: string): { attrs: string; hasContent: boolean; content: string } {
+  // Match: :::div or :::div {attrs} or :::div content {attrs}
+  const match = line.trim().match(/^:+div\s*(.*)$/i);
+  if (!match) {
+    return { attrs: '', hasContent: false, content: '' };
+  }
+
+  const rest = match[1].trim();
+  if (!rest) {
+    return { attrs: '', hasContent: false, content: '' };
+  }
+
+  // Check if it's attributes-only pattern: {.class}, {#id}, {attr=value}, or combinations
+  const isAttributesOnly = /^(\{[^}]*\}\s*)+$/.test(rest);
+
+  if (isAttributesOnly) {
+    // Multi-line syntax with attributes
+    return { attrs: rest, hasContent: false, content: '' };
+  } else {
+    // Single-line syntax with content (and possibly attributes at the end)
+    return { attrs: '', hasContent: true, content: rest };
+  }
+}
+
+/**
+ * Block rule for div containers
+ */
+function divBlock(state: any, startLine: number, endLine: number, silent: boolean): boolean {
+  let pos = state.bMarks[startLine] + state.tShift[startLine];
+  let max = state.eMarks[startLine];
+
+  // Check for block quote or other indentation
+  if (state.sCount[startLine] - state.blkIndent >= 4) {
+    return false;
+  }
+
+  // Check if line starts with enough colons
+  let markerCount = 0;
+  while (pos < max && state.src.charCodeAt(pos) === MARKER_CHAR) {
+    markerCount++;
+    pos++;
+  }
+
+  if (markerCount < MIN_MARKERS) {
+    return false;
+  }
+
+  // Must be followed by 'div' (case insensitive)
+  const restOfLine = state.src.slice(pos, max);
+  if (!restOfLine.match(/^div(\s|$)/i)) {
+    return false;
+  }
+
+  // If in validation mode, we're done
+  if (silent) {
+    return true;
+  }
+
+  // Parse the opening line
+  const fullLine = state.src.slice(state.bMarks[startLine], max);
+  const { attrs, hasContent, content } = parseOpeningLine(fullLine);
+
+  // Find the closing marker
+  let nextLine = startLine;
+  let autoClose = false;
+
+  for (;;) {
+    nextLine++;
+    if (nextLine >= endLine) {
+      // Reached end without finding closing marker
+      autoClose = true;
+      break;
+    }
+
+    pos = state.bMarks[nextLine] + state.tShift[nextLine];
+    max = state.eMarks[nextLine];
+
+    if (pos < max && state.sCount[nextLine] < state.blkIndent) {
+      // Non-empty line with negative indent should stop the block
+      break;
+    }
+
+    // Check for closing marker with same number of colons
+    let closeMarkerCount = 0;
+    let checkPos = pos;
+    while (checkPos < max && state.src.charCodeAt(checkPos) === MARKER_CHAR) {
+      closeMarkerCount++;
+      checkPos++;
+    }
+
+    // Closing marker must have exact same number of colons and nothing else (or whitespace)
+    if (closeMarkerCount === markerCount) {
+      const afterMarker = state.src.slice(checkPos, max).trim();
+      if (afterMarker === '' || afterMarker === 'div') {
+        // Found closing marker
+        break;
+      }
+    }
+  }
+
+  const oldParent = state.parentType;
+  const oldLineMax = state.lineMax;
+  state.parentType = 'container';
+
+  // Create opening token
+  let token: any = state.push('div_open', 'div', 1);
+  token.markup = ':'.repeat(markerCount);
+  token.block = true;
+  token.meta = { attrs, hasContent, content }; // Store in meta instead of info
+  token.map = [startLine, nextLine];
+
+  if (!hasContent) {
+    // Multi-line syntax: parse content between markers
+    const contentStart = startLine + 1;
+    const contentEnd = nextLine;
+
+    if (contentStart < contentEnd) {
+      state.lineMax = contentEnd;
+      state.md.block.tokenize(state, contentStart, contentEnd);
+      state.lineMax = oldLineMax;
+    }
+  }
+  // For single-line syntax (hasContent === true), we don't create any tokens
+  // The content will be rendered directly in the div_open renderer
+
+  // Create closing token
+  token = state.push('div_close', 'div', -1);
+  token.markup = ':'.repeat(markerCount);
+  token.block = true;
+
+  state.parentType = oldParent;
+  state.line = nextLine + (autoClose ? 0 : 1);
+
+  return true;
+}
+
+/**
+ * Renderer for div_open token
+ */
+function renderDivOpen(tokens: any[], idx: number): string {
+  const token = tokens[idx];
+
+  // Get metadata from token
+  const meta = token.meta || {};
+  const { attrs = '', hasContent = false, content = '' } = meta;
+
+  if (hasContent && content) {
+    // Single-line syntax: render the content and extract attributes from the paragraph tag
+    const html = mdInstance.render(content).trim();
+
+    // html should be like '<p class="class">content</p>' or just '<p>content</p>'
+    if (html.startsWith('<p') && html.endsWith('</p>')) {
+      // Extract attributes from <p> tag and content
+      const match = html.match(/^<p([^>]*)>(.*)<\/p>$/);
+      if (match) {
+        const extractedAttrs = match[1]; // attributes like ' class="class"'
+        const extractedContent = match[2]; // the actual content
+
+        // Return the div with attributes and content, and DON'T close it yet
+        // (div_close will handle closing)
+        return `<div${extractedAttrs}>${extractedContent}`;
+      }
+    }
+
+    // Fallback: just render the content normally
+    return '<div>' + html.replace(/^<p[^>]*>/, '').replace(/<\/p>$/, '');
+  }
+
+  // Multi-line syntax: check attrs for attributes
+  if (attrs) {
+    // Render a dummy content with the attributes to extract them
+    const tempContent = 'x ' + attrs;
+    const html = mdInstance.render(tempContent).trim();
+
+    // html should be something like '<p class="class">x</p>' or '<p class="class" id="id">x</p>'
+    if (html.startsWith('<p') && html.endsWith('</p>')) {
+      const match = html.match(/^<p([^>]*)>.*<\/p>$/);
+      if (match && match[1]) {
+        return `<div${match[1]}>`;
+      }
+    }
+  }
+
+  return '<div>';
+}
+
+/**
+ * Renderer for div_close token
+ */
+function renderDivClose(): string {
+  return '</div>\n';
+}
+
+/**
+ * Plugin registration function
+ */
+export function markdownDivBlock(md: MarkdownIt): void {
+  // Store the markdown-it instance for use in renderers
+  mdInstance = md;
+
+  // Register the block rule before fence
+  md.block.ruler.before('fence', 'div_block', divBlock, {
+    alt: ['paragraph', 'reference', 'blockquote', 'list'],
+  });
+
+  // Register renderers
+  md.renderer.rules.div_open = renderDivOpen;
+  md.renderer.rules.div_close = renderDivClose;
+
+  // Post-process rendered HTML to unwrap single-element paragraphs ONLY in divs
+  const originalRender = md.render.bind(md);
+  md.render = function (src: string, env?: any) {
+    const html = originalRender(src, env);
+    return unwrapSingleElementParagraphsInDivs(html);
+  };
+
+  const originalRenderInline = md.renderInline.bind(md);
+  md.renderInline = function (src: string, env?: any) {
+    const html = originalRenderInline(src, env);
+    return unwrapSingleElementParagraphsInDivs(html);
+  };
+}

package/src/utils/markdown-utils.ts

@@ -5,6 +5,7 @@ import $log from '@isrd-isi-edu/ermrestjs/src/services/logger';
 
 // utils
 import { _classNames } from '@isrd-isi-edu/ermrestjs/src/utils/constants';
+import { markdownDivBlock } from '@isrd-isi-edu/ermrestjs/src/utils/markdown-div-block';
 
 // vendor
 import markdownItSub from '@isrd-isi-edu/ermrestjs/vendor/markdown-it-sub.min';
@@ -657,38 +658,8 @@ function _bindCustomMarkdownTags(md: typeof MarkdownIt) {
     },
   });
 
-  md.use(MarkdownItContainer, 'div', {
-    /*
-     * Checks whether string matches format ":::div CONTENT \n:::"
-     * string inside `{}` is optional, specifies attributes to be applied to element
-     */
-    validate: function (params: any) {
-      return params.trim().match(/^div\s+(.*)$/i);
-    },
-
-    render: function (tokens: any, idx: any) {
-      const m = tokens[idx].info.trim().match(/^div\s+(.*)$/i);
-
-      // opening tag
-      if (tokens[idx].nesting === 1) {
-        // if the next tag is a paragraph, we can change the paragraph into a div
-        const attrs = md.parse(m[1], {});
-        if (attrs && attrs.length > 0 && attrs[0].type === 'paragraph_open') {
-          const html = md.render(m[1]).trim();
-
-          // this will remove the closing and opening p tag.
-          return '<div' + html.slice(2, html.length - 4);
-        }
-
-        // otherwise just add the div tag
-        return '<div>\n' + md.render(m[1]).trim();
-      }
-      // the closing tag
-      else {
-        return '</div>\n';
-      }
-    },
-  });
+  // Use custom div block implementation
+  md.use(markdownDivBlock);
 
   md.use(MarkdownItContainer, 'geneSequence', {
     validate: function (params: any) {
@@ -746,6 +717,116 @@ function _bindCustomMarkdownTags(md: typeof MarkdownIt) {
     },
   });
 
+  // Dependent on 'markdown-it-container' and 'markdown-it-attrs' plugins
+  // Injects `filePreview` tag that will be rendered as a React component in chaise
+  md.use(MarkdownItContainer, 'filePreview', {
+    /*
+     * Checks whether string matches format "::: filePreview [](URL){ATTR=VALUE .CLASSNAME}"
+     * String inside '{}' is Optional, specifies attributes to be applied to the element
+     */
+    validate: function (params: any) {
+      return params.trim().match(/^filePreview\s+(.*)$/i);
+    },
+
+    render: function (tokens: any, idx: any) {
+      // Get token string after regexp matching
+      const m = tokens[idx].info.trim().match(/^filePreview\s+(.*)$/i);
+
+      // If this is the opening tag i.e. starts with "::: filePreview "
+      if (tokens[idx].nesting === 1 && m && m.length > 0) {
+        // Extract remaining string and get its parsed markdown attributes
+        const attrs = md.parseInline(m[1], {});
+        let html = '';
+
+        if (attrs && attrs.length == 1 && attrs[0].children) {
+          // Check if the markdown is a link
+          if (attrs[0].children[0].type == 'link_open') {
+            const openingLink = attrs[0].children[0];
+            let fileUrl = '';
+            let filename = '';
+            let classAttr = '';
+            let otherAttrs = '';
+            let hideDownloadBtn = false;
+            let downloadBtnClass = '';
+            let previewType = '';
+            let prefetchBytes = '';
+            let prefetchMaxFileSize = '';
+
+            // Extract attributes
+            openingLink!.attrs!.forEach(function (attr) {
+              switch (attr[0]) {
+                case 'href':
+                  fileUrl = attr[1];
+                  break;
+                case 'filename':
+                  filename = attr[1];
+                  break;
+                case 'class':
+                  classAttr = attr[1];
+                  break;
+                case 'preview-type':
+                  previewType = attr[1];
+                  break;
+                case 'prefetch-bytes':
+                  prefetchBytes = attr[1];
+                  break;
+                case 'prefetch-max-file-size':
+                  prefetchMaxFileSize = attr[1];
+                  break;
+                case 'hide-download-btn':
+                  hideDownloadBtn = true;
+                  break;
+                case 'download-btn-class':
+                  downloadBtnClass = attr[1];
+                  break;
+                default:
+                  otherAttrs += ' ' + attr[0] + '="' + attr[1] + '"';
+                  break;
+              }
+            });
+
+            let caption = '';
+
+            // Extract caption as plain text (no HTML parsing)
+            if (attrs[0].children[1].type != 'link_close') {
+              for (let i = 1; i < attrs[0].children.length; i++) {
+                if (attrs[0].children[i].type == 'text') {
+                  caption += attrs[0].children[i].content;
+                } else if (attrs[0].children[i].type !== 'link_close') {
+                  // Skip non-text tokens (caption must be plain text only)
+                  continue;
+                } else {
+                  break;
+                }
+              }
+            }
+
+            const props = [
+              `class="file-preview-placeholder${classAttr ? ' ' + classAttr : ''}"`,
+              'data-chaise-file-preview="true"',
+              'data-file-url="' + fileUrl + '"',
+              filename ? 'data-filename="' + filename + '"' : '',
+              otherAttrs,
+              previewType ? 'data-preview-type="' + previewType + '"' : '',
+              hideDownloadBtn ? 'data-hide-download-btn="true"' : '',
+              downloadBtnClass ? 'data-download-btn-class="' + downloadBtnClass + '"' : '',
+              caption ? 'data-download-btn-caption="' + caption + '"' : '',
+              prefetchBytes ? 'data-prefetch-bytes="' + prefetchBytes + '"' : '',
+              prefetchMaxFileSize ? 'data-prefetch-max-file-size="' + prefetchMaxFileSize + '"' : '',
+            ].filter(Boolean);
+
+            html = `<div ${props.join(' ')}></div>`;
+          }
+        }
+
+        return html;
+      } else {
+        // closing tag
+        return '';
+      }
+    },
+  });
+
   // Note: Following how this was done in markdown-it-sub and markdown-it-span
   md.use(function rid_plugin(md) {
     // same as UNESCAPE_MD_RE plus a space