@shzlx/ui-default 4.58.2

package/backendlib/markdown-it-media.ts

@@ -0,0 +1,163 @@
+/* eslint-disable max-len */
+/* eslint-disable regexp/prefer-question-quantifier */
+/* eslint-disable regexp/no-useless-non-capturing-group */
+/* eslint-disable regexp/optimal-quantifier-concatenation */
+
+import _ from 'lodash';
+import type MarkdownIt from 'markdown-it';
+import { v4 as uuid } from 'uuid';
+
+const allowFullScreen = ' webkitallowfullscreen mozallowfullscreen allowfullscreen';
+
+const ytRegex = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+function youtubeParser(url: string) {
+  const match = url.match(ytRegex);
+  return match && match[7].length === 11 ? match[7] : url;
+}
+// eslint-disable-next-line regexp/no-empty-alternative
+const vimeoRegex = /https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|)(\d+)(?:$|\/|\?)/;
+function vimeoParser(url: string) {
+  const match = url.match(vimeoRegex);
+  return match && typeof match[3] === 'string' ? match[3] : url;
+}
+const vineRegex = /^http(?:s?):\/\/(?:www\.)?vine\.co\/v\/([a-zA-Z0-9]{1,13}).*/;
+function vineParser(url: string) {
+  const match = url.match(vineRegex);
+  return match && match[1].length === 11 ? match[1] : url;
+}
+const preziRegex = /^https:\/\/prezi.com\/(.[^/]+)/;
+function preziParser(url: string) {
+  const match = url.match(preziRegex);
+  return match ? match[1] : url;
+}
+const EMBED_REGEX = /@\[([a-zA-Z].+?)\]\((.*?)\)/;
+function extractVideoParameters(url: string) {
+  const parameterMap = new Map();
+  const params = url.replace(/&/gi, '&').split(/[#?&]/);
+  if (params.length > 1) {
+    for (let i = 1; i < params.length; i += 1) {
+      const keyValue = params[i].split('=');
+      if (keyValue.length > 1) parameterMap.set(keyValue[0], keyValue[1]);
+    }
+  }
+  return parameterMap;
+}
+function resourceUrl(service: string, src: string, url: string) {
+  if (service === 'youtube') {
+    const parameters = extractVideoParameters(url);
+    const timeParameter = parameters.get('t');
+    if (timeParameter !== undefined) {
+      let startTime = 0;
+      const timeParts = timeParameter.match(/[0-9]+/g);
+      let j = 0;
+      while (timeParts.length > 0) {
+        startTime += Number(timeParts.pop()) * (60 ** j);
+        j += 1;
+      }
+      parameters.set('start', startTime);
+      parameters.delete('t');
+    }
+    parameters.delete('v');
+    parameters.delete('feature');
+    parameters.delete('origin');
+    const parameterArray = Array.from(parameters, (p) => p.join('='));
+    const parameterPos = src.indexOf('?');
+    let finalUrl = `https://www.youtube.com/embed/${parameterPos > -1 ? src.substring(0, parameterPos) : src}`;
+    if (parameterArray.length > 0) finalUrl += `?${parameterArray.join('&')}`;
+    return finalUrl;
+  }
+  if (service === 'bilibili') {
+    if (src.startsWith('http')) src = src.split('/').pop();
+    if (src.toLowerCase().startsWith('av')) src = src.toLowerCase().split('av')[1];
+    src = src.split('?')[0];
+    return `//player.bilibili.com/player.html?${src.startsWith('BV') ? 'bvid' : 'aid'}=${src}&autoplay=0`;
+  }
+  if (service === 'msoffice') return `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(src)}`;
+  if (service === 'youku') return `https://player.youku.com/embed/${src}`;
+  if (service === 'vimeo') return `https://player.vimeo.com/video/${src}`;
+  if (service === 'vine') return `https://vine.co/v/${src}/embed/simple`;
+  if (service === 'prezi') {
+    return `https://prezi.com/embed/${src}/?bgcolor=ffffff&amp;lock_to_path=0&amp;autoplay=0&amp;autohide_ctrls=0&amp;`
+      + 'landing_data=bHVZZmNaNDBIWnNjdEVENDRhZDFNZGNIUE43MHdLNWpsdFJLb2ZHanI5N1lQVHkxSHFxazZ0UUNCRHloSXZROHh3PT0&amp;'
+      + 'landing_sign=1kD6c0N6aYpMUS0wxnQjxzSqZlEB8qNFdxtdjYhwSuI';
+  }
+  return src;
+}
+
+declare module 'hydrooj' {
+  interface ModuleInterfaces {
+    richmedia: {
+      get: (service: string, src: string, md: MarkdownIt) => string | null;
+    };
+  }
+}
+
+export function Media(md: MarkdownIt, { pdfToolbar = false }: { pdfToolbar?: boolean } = {}) {
+  const supported = ['youtube', 'vimeo', 'vine', 'prezi', 'bilibili', 'youku', 'msoffice'];
+  md.renderer.rules.video = function tokenizeReturn(tokens, idx) {
+    let src = md.utils.escapeHtml(tokens[idx].attrGet('src'));
+    const service = md.utils.escapeHtml(tokens[idx].attrGet('service')).toLowerCase();
+    if (Hydro?.module?.richmedia?.[service]) {
+      const result = Hydro?.module?.richmedia[service].get(service, src, md);
+      if (result) return result;
+    }
+    if (service === 'pdf') {
+      if (['file://', './', '../'].some((i) => src.startsWith(i)) || (src[1] === '/' && src[2] !== '/')) src += src.includes('?') ? '&noDisposition=1' : '?noDisposition=1';
+      // A response with has content-disposition header causes the browser to download the file automatically.
+      // As we cannot control response header from external sites, we block embedding external PDFs.
+      else return `<p>Embedding an external PDF is no longer supported.</p> <a href="${_.escape(src)}">Download</a>`;
+      return `\
+        <object classid="clsid:${uuid().toUpperCase()}">
+          <param name="SRC" value="${src}">
+          <embed type="application/pdf" width="100%" style="min-height:100vh;border:none;" fullscreen="yes" src="${src}#toolbar=${pdfToolbar ? '0' : '1'}&navpanes=0&view=FitH">
+            <noembed></noembed>
+          </embed>
+        </object>`;
+    }
+    if (['url', 'video'].includes(service)) {
+      return `\
+        <video width="100%" controls>
+          <source src="${src}" type="${src.endsWith('ogg') ? 'video/ogg' : 'video/mp4'}">
+          Your browser doesn't support video tag.
+        </video>`;
+    }
+    if (supported.includes(service)) {
+      return `\
+      <iframe class="embed-responsive-item ${service}-player" type="text/html" \
+        width="100%" style="min-height: 500px" ${allowFullScreen} \
+        src="${resourceUrl(service, src, tokens[idx].attrGet('url'))}"
+        scrolling="no" border="0" frameborder="no" framespacing="0"></iframe>`;
+    }
+    return `<div data-${service}>${md.utils.escapeHtml(src)}</div>`;
+  };
+  md.inline.ruler.before('emphasis', 'video', (state, silent) => {
+    const theState = state;
+    const oldPos = state.pos;
+    if (state.src.charCodeAt(oldPos) !== 0x40
+      ||/* @ */ state.src.charCodeAt(oldPos + 1) !== 0x5B/* [ */) {
+      return false;
+    }
+    const match = EMBED_REGEX.exec(state.src.slice(state.pos, state.src.length));
+    if (!match || match.length < 3) return false;
+    let [, service, src] = match;
+    service = service.toLowerCase();
+    if (service === 'youtube') src = youtubeParser(src);
+    else if (service === 'vimeo') src = vimeoParser(src);
+    else if (service === 'vine') src = vineParser(src);
+    else if (service === 'prezi') src = preziParser(src);
+    if (src === ')') src = '';
+    const serviceStart = oldPos + 2;
+    if (!silent) {
+      theState.pos = serviceStart;
+      const newState = new theState.md.inline.State(service, theState.md, theState.env, []);
+      newState.md.inline.tokenize(newState);
+      const token = theState.push('video', '', undefined);
+      token.attrPush(['src', src]);
+      token.attrPush(['service', service]);
+      token.attrPush(['url', match[2]]);
+      token.level = theState.level;
+    }
+    theState.pos += theState.src.indexOf(')', theState.pos);
+    return true;
+  });
+}

package/backendlib/markdown-it-xss.ts

@@ -0,0 +1,200 @@
+import { FilterCSS } from 'cssfilter';
+import { escapeAttrValue, FilterXSS, safeAttrValue } from 'xss';
+
+const stack = [];
+const voidTags = ['br', 'hr', 'input', 'img', 'link', 'source', 'col', 'area', 'base', 'meta', 'embed', 'param', 'track', 'wbr'];
+const depedentTags = {
+  li: ['ul', 'ol'],
+  tr: ['table'],
+  td: ['tr'],
+  th: ['tr'],
+  thead: ['table'],
+  tbody: ['table'],
+  tfoot: ['table'],
+  colgroup: ['table'],
+  col: ['colgroup'],
+  caption: ['table'],
+  option: ['select'],
+  optgroup: ['select'],
+  dt: ['dl'],
+  dd: ['dl'],
+};
+const whitelistClasses = ['row', 'columns', 'typo', 'note', 'warn'].concat(Array.from({ length: 12 }).fill(0).map((_, i) => `medium-${i + 1}`));
+
+const tagCheck = new FilterXSS({
+  css: false,
+  whiteList: {},
+  onIgnoreTag(tag, html, options) {
+    if (html.endsWith('/>') || voidTags.includes(tag)) return html;
+    if (!options.isClosing) {
+      if (depedentTags[tag] && !stack.find((i) => depedentTags[tag].includes(i))) {
+        return html.replace(/</g, '&lt;').replace(/>/g, '&gt;'); // 标签不可出现在该位置
+      }
+      stack.push(tag);
+      return html;
+    }
+    if (stack.length === 0) {
+      return html.replace(/</g, '&lt;').replace(/>/g, '&gt;'); // 没有标签可供闭合
+    }
+    if (stack[stack.length - 1] === tag) {
+      stack.pop(); // 正常关闭
+      return html;
+    }
+    if (stack.length - 2 >= 0 && stack[stack.length - 2] === tag) {
+      // 可能丢失了一个结束标签
+      html = `</${stack[stack.length - 1]}>${html}`;
+      stack.pop();
+      stack.pop();
+      return html;
+    }
+    return html.replace(/</g, '&lt;').replace(/>/g, '&gt;'); // 可能多出了一个结束标签
+  },
+  onIgnoreTagAttr(tag, name, value) {
+    return value;
+  },
+});
+
+const cssFilterOptions = {
+  whiteList: {
+    'font-size': true,
+    'font-family': true,
+    'text-align': true,
+    'text-indent': true,
+    'margin-left': true,
+    position: /relative/,
+    padding: true,
+    height: true,
+    width: true,
+    color: true,
+  },
+};
+
+const CssFilter = new FilterCSS(cssFilterOptions);
+
+const commonRules = {
+  whiteList: {
+    a: ['target', 'href', 'title'],
+    abbr: ['title'],
+    address: [],
+    aside: [],
+    b: [],
+    bdi: ['dir'],
+    bdo: ['dir'],
+    big: [],
+    blockquote: ['cite', 'class'],
+    br: [],
+    caption: [],
+    center: [],
+    cite: [],
+    code: ['class'],
+    del: ['datetime'],
+    div: ['id', 'class'],
+    dl: [],
+    em: [],
+    font: ['color', 'size', 'face'],
+    header: [],
+    i: [],
+    ins: ['datetime'],
+    mark: [],
+    ol: [],
+    p: ['align', 'style'],
+    pre: [],
+    s: [],
+    small: [],
+    span: ['class', 'style'],
+    sub: [],
+    sup: [],
+    strong: ['id'],
+    tt: [],
+    u: [],
+    var: [],
+  },
+  css: false,
+  allowCommentTag: false,
+  stripIgnoreTag: true,
+  stripIgnoreTagBody: ['script', 'semantics'],
+};
+
+export const xss = new FilterXSS({
+  ...commonRules,
+  whiteList: {
+    ...commonRules.whiteList,
+    area: ['shape', 'coords', 'href', 'alt'],
+    article: [],
+    audio: ['controls', 'loop', 'preload', 'src'],
+    col: ['align', 'valign', 'span', 'width'],
+    colgroup: ['align', 'valign', 'span', 'width'],
+    dd: [],
+    details: ['open'],
+    dt: [],
+    h1: ['id'],
+    h2: ['id', 'class'],
+    h3: ['id'],
+    h4: ['id'],
+    h5: ['id'],
+    h6: ['id'],
+    hr: [],
+    img: ['src', 'alt', 'title', 'width', 'height'],
+    li: [],
+    section: [],
+    summary: [],
+    table: ['width', 'border', 'align', 'valign'],
+    tbody: ['align', 'valign'],
+    td: ['width', 'rowspan', 'colspan', 'align', 'valign', 'bgcolor'],
+    tfoot: ['align', 'valign'],
+    th: ['width', 'rowspan', 'colspan', 'align', 'valign'],
+    thead: ['align', 'valign'],
+    tr: ['rowspan', 'align', 'valign'],
+    ul: [],
+    video: ['controls', 'loop', 'preload', 'src', 'height', 'width'],
+  },
+  css: cssFilterOptions,
+  safeAttrValue(tag, name, value) {
+    if (name === 'id') return escapeAttrValue(`xss-id-${value}`);
+    if (name === 'class') return value.split(' ').filter((i) => whitelistClasses.includes(i) || i.startsWith('language-')).join(' ');
+    return safeAttrValue(tag, name, value, CssFilter);
+  },
+});
+
+const inlineCssFilter = new FilterCSS({
+  whiteList: {
+    color: true,
+  },
+});
+
+export const xssInline = new FilterXSS({
+  ...commonRules,
+  safeAttrValue(tag, name, value) {
+    if (name === 'id') return escapeAttrValue(`xss-id-${value}`);
+    if (name === 'class') return value.split(' ').filter((i) => whitelistClasses.includes(i)).join(' ');
+    return safeAttrValue(tag, name, value, inlineCssFilter);
+  },
+});
+
+export function ensureTag(html: string) {
+  stack.length = 0;
+  const res = tagCheck.process(html);
+  return res + stack.map((i) => `</${i}>`).join('');
+}
+
+export function xssProtector(md) {
+  function protector(state) {
+    const processor = state.inlineMode ? xssInline : xss;
+    for (let i = 0; i < state.tokens.length; i++) {
+      const cur = state.tokens[i];
+      if (cur.type === 'html_block') {
+        cur.content = processor.process(cur.content);
+      }
+      if (cur.type === 'inline') {
+        const inlineTokens = cur.children;
+        for (let ii = 0; ii < inlineTokens.length; ii++) {
+          if (inlineTokens[ii].type === 'html_inline') {
+            inlineTokens[ii].content = processor.process(inlineTokens[ii].content);
+          }
+        }
+      }
+    }
+  }
+
+  md.core.ruler.after('linkify', 'xss', protector);
+}

package/backendlib/markdown.js

@@ -0,0 +1,64 @@
+const MarkdownIt = require('markdown-it');
+
+// For math: $a\times b\eq 10$
+// Specific image size: ![image](image.png =100x100)
+const Imsize = require('markdown-it-imsize');
+/* Footnote support.
+Here is a footnote reference,[^1] and another.[^longnote]
+
+[^1]: Here is the footnote.
+
+[^longnote]: Here's one with multiple blocks.
+
+    Subsequent paragraphs are indented to show that they
+belong to the previous footnote.
+*/
+const Footnote = require('markdown-it-footnote');
+// ==Highlight==
+const Mark = require('markdown-it-mark');
+const TOC = require('markdown-it-table-of-contents');
+const Anchor = require('markdown-it-anchor');
+const MergeCells = require('markdown-it-merge-cells');
+// @[url](videourl)
+// @[youtube](https://youtube.com/watch?v=xxx)
+// @[pdf](https://foo.com/bar.pdf)
+const { Media } = require('./markdown-it-media');
+const { default: Katex } = require('./markdown-it-katex');
+const { xssProtector } = require('./markdown-it-xss');
+
+class Markdown extends MarkdownIt {
+  constructor() {
+    super({
+      linkify: true,
+      html: true,
+    });
+    this.linkify.tlds('.py', false);
+    this.use(Media);
+    this.use(Imsize);
+    this.use(Footnote);
+    this.use(Mark);
+    this.use(Anchor);
+    this.use(TOC);
+    this.use(Katex);
+    this.use(MergeCells);
+    this.use(xssProtector);
+  }
+}
+
+const md = new Markdown();
+
+function plugin(func, ...args) {
+  md.use(func, ...args);
+}
+
+function render(text) {
+  return md.render(text);
+}
+
+function renderInline(text) {
+  return md.renderInline(text);
+}
+
+module.exports = {
+  md, plugin, render, renderInline,
+};

package/backendlib/misc.ts

@@ -0,0 +1,54 @@
+import { moment, ObjectId } from 'hydrooj';
+import { AnsiUp } from 'ansi_up';
+
+export { formatSeconds, size } from 'hydrooj';
+
+const AU = new AnsiUp();
+
+export function ansiToHtml(str: string, whiteToBlack = true) {
+  const res = AU.ansi_to_html(str);
+  return whiteToBlack ? res.replace(/style="color:rgb\(255,255,255\)"/g, 'style="color:black"') : res;
+}
+
+export function datetimeSpan(dt: Date | ObjectId, relative = true, format = 'YYYY-M-D H:mm:ss', tz = 'Asia/Shanghai') {
+  if (!dt) return 'DATETIME_SPAN_ERROR';
+  if (dt instanceof ObjectId) dt = dt.getTimestamp();
+  else if (typeof dt === 'string' && ObjectId.isValid(dt)) dt = new ObjectId(dt).getTimestamp();
+  else if (typeof dt === 'number' || typeof dt === 'string') dt = new Date(dt);
+  return '<span class="time{0}" data-timestamp="{1}">{2}</span>'.format(
+    relative ? ' relative' : '',
+    dt.getTime() / 1000,
+    moment(dt).tz(tz).format(format),
+  );
+}
+
+export function* paginate(page: number, numPages: number) {
+  const radius = 5;
+  let first: number;
+  let last: number;
+  if (page > 1) {
+    if (page > 2) yield ['first', 1];
+    yield ['previous', page - 1];
+  }
+  if (page <= radius) [first, last] = [1, Math.min(1 + radius * 2, numPages)];
+  else if (page >= numPages - radius) {
+    [first, last] = [Math.max(1, numPages - radius * 2), numPages];
+  } else {
+    [first, last] = [page - radius, page + radius];
+  }
+  if (first > 1) yield ['ellipsis', 0];
+  for (let page0 = first; page0 < last + 1; page0++) {
+    if (page0 !== page) yield ['page', page0];
+    else yield ['current', page];
+  }
+  if (last < numPages) yield ['ellipsis', 0];
+  if (page < numPages) {
+    yield ['next', page + 1];
+    if (page < numPages - 1) yield ['last', numPages];
+  }
+}
+
+export function buildQueryString(obj: Record<string, any>) {
+  return Object.entries(obj).filter(([key, value]) => value && !key.startsWith('__'))
+    .map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
+}