orionplace-react 0.7.7 → 0.8.0

package/templates/lib/orionplace/blogArticle.ts

@@ -1,122 +0,0 @@
-import { EBlogAccessType } from '@/interfaces/orionplace/blog/IBlogApi';
-import type {
-  IBlogPost,
-  IBlogPostsRequest,
-} from '@/interfaces/orionplace/blog/IBlogApi';
-import {
-  getAvailableNestedValueFromObject,
-  safePublicUrl,
-} from './presentation';
-import { APP_ORIGIN, appMediaUrl } from './nativeApp';
-
-export interface BlogArticleLoadAction {
-  endpoint: 'blog_posts_get';
-  request: IBlogPostsRequest;
-  signal: AbortSignal;
-}
-
-// Products placed in the article text that no list loaded yet (see
-// blogProductPlacements); the answer is the products_search page data.
-export interface BlogPlacementLoadAction {
-  endpoint: 'products_search';
-  request: {
-    filters: { id_in: string };
-    paginate: { page: 1; pp_items: number };
-  };
-  signal: AbortSignal;
-}
-
-export function blogPlacementRequest(
-  ids: number[],
-  signal: AbortSignal,
-): BlogPlacementLoadAction {
-  return {
-    endpoint: 'products_search',
-    request: {
-      filters: { id_in: ids.join(',') },
-      paginate: { page: 1, pp_items: ids.length },
-    },
-    signal,
-  };
-}
-
-export function blogArticleRequest(
-  postId: number,
-  signal: AbortSignal,
-): BlogArticleLoadAction {
-  return {
-    endpoint: 'blog_posts_get',
-    request: {
-      filters: { id: postId },
-      paginate: { page: 1, pp_items: 1 },
-    },
-    signal,
-  };
-}
-
-export function blogArticleField(
-  post: IBlogPost | undefined,
-  locale: string,
-  field: keyof IBlogPost['locale'][string],
-) {
-  return getAvailableNestedValueFromObject(post?.locale, locale, field) || '';
-}
-
-export function blogArticleCover(post: IBlogPost | undefined) {
-  const images = [...(post?.preview_images ?? [])].sort(
-    (left, right) => left.display_order - right.display_order,
-  );
-
-  return appMediaUrl(
-    safePublicUrl(images[0]?.image_url || post?.preview_image_urls?.[0]),
-    APP_ORIGIN,
-  );
-}
-
-export function blogArticlePlansHref(
-  post: IBlogPost | undefined,
-  locale: string,
-) {
-  const parameters = new URLSearchParams({ locale });
-  const ids = post?.premium_tariff_ids ?? [];
-  if (ids.length) {
-    parameters.set('ids', ids.join(','));
-  }
-
-  return `/tariffs?${parameters.toString()}`;
-}
-
-// The backend sends video addresses as `/ps3/...` paths.
-export function blogArticleMediaUrl(value: unknown) {
-  return appMediaUrl(
-    safePublicUrl(typeof value === 'string' ? value : ''),
-    APP_ORIGIN,
-  );
-}
-
-export function lockBlogArticle(post: IBlogPost): IBlogPost {
-  return {
-    ...post,
-    is_full: false,
-    has_full_access: false,
-    locale: Object.fromEntries(
-      Object.entries(post.locale).map(([locale, value]) => {
-        const { post_view_text: _content, ...preview } = value;
-        return [locale, preview];
-      }),
-    ),
-  };
-}
-
-export function canTrackBlogReading(
-  post: IBlogPost | undefined,
-  authenticated: boolean,
-) {
-  return Boolean(
-    authenticated &&
-    post?.is_full &&
-    post.has_full_access &&
-    post.read_time_min > 0 &&
-    post.access_type.int !== EBlogAccessType.ACCESS_PUBLIC,
-  );
-}

package/templates/lib/orionplace/blogArticleHtml.ts

@@ -1,371 +0,0 @@
-import DOMPurify from 'dompurify';
-import type {
-  Config,
-  DOMPurify as TPurifier,
-  UponSanitizeAttributeHookEvent,
-} from 'dompurify';
-import { htmlTextParagraphs } from './htmlText';
-import { APP_ORIGIN, appMediaUrl } from './nativeApp';
-
-type StylePatterns = Record<string, RegExp>;
-
-export const blogArticleTags = [
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'p',
-  'br',
-  'hr',
-  'span',
-  'div',
-  'strong',
-  'b',
-  'em',
-  'i',
-  'u',
-  's',
-  'strike',
-  'del',
-  'ins',
-  'mark',
-  'sub',
-  'sup',
-  'small',
-  'abbr',
-  'cite',
-  'q',
-  'kbd',
-  'samp',
-  'var',
-  'time',
-  'a',
-  'ul',
-  'ol',
-  'li',
-  'label',
-  'input',
-  'blockquote',
-  'pre',
-  'code',
-  'table',
-  'caption',
-  'colgroup',
-  'col',
-  'thead',
-  'tbody',
-  'tfoot',
-  'tr',
-  'th',
-  'td',
-  'img',
-  'figure',
-  'figcaption',
-  'video',
-  'audio',
-  'source',
-  'track',
-  'details',
-  'summary',
-];
-
-const attributes = [
-  'href',
-  'title',
-  'target',
-  'rel',
-  'lang',
-  'dir',
-  'cite',
-  'datetime',
-  'src',
-  'alt',
-  'width',
-  'height',
-  'loading',
-  'decoding',
-  'poster',
-  'controls',
-  'playsinline',
-  'preload',
-  'muted',
-  'loop',
-  'type',
-  'srclang',
-  'kind',
-  'label',
-  'default',
-  'start',
-  'reversed',
-  'colspan',
-  'rowspan',
-  'scope',
-  'span',
-  'open',
-  'checked',
-  'disabled',
-  'class',
-  'style',
-  'data-type',
-  'data-checked',
-  'data-latex',
-  'data-text-color',
-  'data-bg-color',
-  'data-background',
-  'data-text-align',
-  'data-vertical-align',
-  'data-colwidth',
-  'data-code-scheme',
-  'data-gallery-width',
-  'data-list-offset',
-  'data-float',
-  'data-blog-video',
-  'data-details-content',
-  'data-product-id',
-  'data-product-ids',
-  'data-product-hidden-badges',
-];
-
-const marginLength = '(-?\\d+(\\.\\d+)?(px|em|rem|%)?|auto)';
-const editorClasses = new Set([
-  'blog-image-gallery',
-  'blog-image-gallery__track',
-  'blog-code-block',
-  'blog-post-editor-image',
-  'blog-post-editor-video',
-]);
-
-export const blogArticleColorTokens = new Set([
-  'gray',
-  'brown',
-  'orange',
-  'yellow',
-  'green',
-  'blue',
-  'purple',
-  'pink',
-  'red',
-]);
-
-const styleValues: StylePatterns = {
-  'color': /^[#\w\s.,%()-]+$/,
-  'background-color': /^[#\w\s.,%()-]+$/,
-  'text-align': /^(left|right|center|justify|start|end)$/,
-  'font-size': /^\d+(\.\d+)?(px|em|rem|%|pt)$/,
-  'font-family': /^[\w\s,'"-]+$/,
-  'line-height': /^\d+(\.\d+)?(px|em|rem|%)?$/,
-  'width': /^(\d+(\.\d+)?(px|%)|auto)$/,
-  'max-width': /^(\d+(\.\d+)?(px|%)|none)$/,
-  'margin': new RegExp(`^${marginLength}(\\s+${marginLength}){0,3}$`),
-  'margin-left': new RegExp(`^${marginLength}$`),
-  'margin-right': new RegExp(`^${marginLength}$`),
-  'float': /^(left|right|none)$/,
-  'display': /^(block|inline|inline-block)$/,
-  'position': /^relative$/,
-  'left': /^-?\d+(\.\d+)?px$/,
-};
-
-const unsafeStyle = /url\s*\(|expression|javascript:|[\\@<>]|\/\*/i;
-const safeUri =
-  /^(?:(?:https?|mailto|tel):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
-const editorArticlePath =
-  /^\/(?:[a-z]{2}(?:-[a-z]{2})?\/)?blog\/[^/?#]+\/([1-9]\d*)\/?$/i;
-const authorRelTokens = new Set(['nofollow', 'sponsored', 'ugc']);
-
-function normalizedHeadingText(value: string) {
-  return htmlTextParagraphs(value)
-    .join(' ')
-    .normalize('NFKC')
-    .replace(/\s+/g, ' ')
-    .trim()
-    .toLocaleLowerCase();
-}
-
-/** Removes only a first h1 whose text repeats the page title. */
-export function removeLeadingDuplicateBlogHeading(
-  value: string,
-  title: string,
-) {
-  const heading =
-    /^(\s*(?:<!--[\s\S]*?-->\s*)*)<h1(?:\s[^>]*)?>([\s\S]*?)<\/h1\s*>/i.exec(
-      value,
-    );
-
-  if (
-    !heading ||
-    !normalizedHeadingText(title) ||
-    normalizedHeadingText(heading[2] ?? '') !== normalizedHeadingText(title)
-  ) {
-    return value;
-  }
-
-  return `${heading[1] ?? ''}${value.slice(heading[0].length)}`;
-}
-
-export function safeBlogArticleStyle(value: string) {
-  const declarations = value
-    .split(';')
-    .map((declaration) => {
-      const separator = declaration.indexOf(':');
-      const name = declaration.slice(0, separator).trim().toLowerCase();
-      const property = declaration.slice(separator + 1).trim();
-
-      return { name, property, separator };
-    })
-    .filter(({ name, property, separator }) => {
-      const pattern = styleValues[name];
-      return (
-        separator > 0 &&
-        Boolean(pattern) &&
-        !unsafeStyle.test(property) &&
-        pattern!.test(property)
-      );
-    });
-
-  return declarations
-    .map(({ name, property }) => `${name}: ${property}`)
-    .join('; ');
-}
-
-function filterAttribute(node: Element, data: UponSanitizeAttributeHookEvent) {
-  if (data.attrName === 'style') {
-    data.attrValue = safeBlogArticleStyle(data.attrValue);
-    data.keepAttr = Boolean(data.attrValue);
-    return;
-  }
-
-  if (data.attrName === 'class') {
-    const classes = data.attrValue
-      .split(/\s+/)
-      .filter(
-        (name) => editorClasses.has(name) || /^language-[\w-]+$/.test(name),
-      );
-
-    data.attrValue = classes.join(' ');
-    data.keepAttr = Boolean(data.attrValue);
-    return;
-  }
-
-  const isColorToken =
-    data.attrName === 'data-text-color' || data.attrName === 'data-bg-color';
-  if (isColorToken && !blogArticleColorTokens.has(data.attrValue)) {
-    data.keepAttr = false;
-  }
-
-  if (data.attrName === 'src' && data.attrValue.trim().startsWith('data:')) {
-    data.keepAttr = false;
-  }
-
-  if (node.nodeName === 'INPUT' && data.attrName === 'type') {
-    data.keepAttr = data.attrValue.toLowerCase() === 'checkbox';
-  }
-}
-
-function prepareLink(link: Element) {
-  const href = link.getAttribute('href') ?? '';
-  const article = editorArticlePath.exec(href);
-  const author = (link.getAttribute('rel') ?? '')
-    .toLowerCase()
-    .split(/\s+/)
-    .filter((token) => authorRelTokens.has(token));
-
-  if (article) {
-    link.setAttribute('href', `/journal/${article[1]}`);
-  }
-
-  if (/^https?:/i.test(href)) {
-    link.setAttribute('target', '_blank');
-    link.setAttribute('rel', [...author, 'noopener', 'noreferrer'].join(' '));
-    return;
-  }
-
-  link.removeAttribute('target');
-  if (author.length) {
-    link.setAttribute('rel', author.join(' '));
-  } else {
-    link.removeAttribute('rel');
-  }
-}
-
-function prepareElement(node: Element) {
-  const name = node.nodeName;
-
-  if (name === 'A') {
-    prepareLink(node);
-  }
-
-  if (name === 'IMG') {
-    node.setAttribute('loading', 'lazy');
-    node.setAttribute('decoding', 'async');
-    if (!node.hasAttribute('alt')) {
-      node.setAttribute('alt', '');
-    }
-  }
-
-  // Media the backend serves itself (`/ps3/...`); see appMediaUrl.
-  for (const attribute of ['src', 'poster']) {
-    const source = node.getAttribute(attribute);
-
-    if (source) {
-      node.setAttribute(attribute, appMediaUrl(source, APP_ORIGIN));
-    }
-  }
-
-  if (name === 'VIDEO' || name === 'AUDIO') {
-    node.setAttribute('controls', '');
-    node.setAttribute('preload', 'metadata');
-  }
-
-  if (name === 'VIDEO') {
-    node.setAttribute('playsinline', '');
-  }
-
-  if (name === 'INPUT') {
-    if (node.getAttribute('type') !== 'checkbox') {
-      node.remove();
-      return;
-    }
-    node.setAttribute('disabled', '');
-  }
-
-  const latex = node.getAttribute('data-latex');
-  if (latex && !node.textContent) {
-    node.textContent = latex;
-  }
-}
-
-function prepareElementHook(node: Node) {
-  if (node.nodeType === 1) {
-    prepareElement(node as Element);
-  }
-}
-
-const config: Config = {
-  ALLOWED_TAGS: blogArticleTags,
-  ALLOWED_ATTR: attributes,
-  ALLOW_DATA_ATTR: false,
-  ALLOWED_URI_REGEXP: safeUri,
-  SANITIZE_NAMED_PROPS: true,
-};
-
-/** Returns editor HTML that is safe to pass to React's HTML renderer. */
-export function safeBlogArticleHtml(
-  value: string,
-  purifier: TPurifier = DOMPurify,
-) {
-  if (!purifier.isSupported) {
-    return '';
-  }
-
-  purifier.addHook('uponSanitizeAttribute', filterAttribute);
-  purifier.addHook('afterSanitizeAttributes', prepareElementHook);
-
-  try {
-    return purifier.sanitize(value, config) as string;
-  } finally {
-    purifier.removeHook('uponSanitizeAttribute', filterAttribute);
-    purifier.removeHook('afterSanitizeAttributes', prepareElementHook);
-  }
-}

package/templates/lib/orionplace/blogComments.ts

@@ -1,102 +0,0 @@
-import { EBlogCommentStatus } from '@/interfaces/orionplace/blog/IBlogApi';
-import type { IBlogComment } from '@/interfaces/orionplace/blog/IBlogApi';
-
-export const blogCommentMaxIndent = 3;
-
-export interface BlogCommentThreadItem {
-  comment: IBlogComment;
-  depth: number;
-  indent: number;
-  parent?: IBlogComment;
-  closes: BlogCommentThreadItem[];
-}
-
-export type BlogCommentReplies = Readonly<
-  Record<number, readonly IBlogComment[]>
->;
-
-export function blogCommentAuthor(comment: IBlogComment) {
-  return [comment.user.first_name, comment.user.last_name]
-    .filter(Boolean)
-    .join(' ');
-}
-
-export function withLocalBlogComments(
-  loaded: readonly IBlogComment[],
-  local: readonly IBlogComment[],
-  parentId: number | null,
-  placement: 'start' | 'end',
-) {
-  const loadedIds = new Set(loaded.map((comment) => comment.id));
-  const missing = local.filter(
-    (comment) => comment.parent_id === parentId && !loadedIds.has(comment.id),
-  );
-  return placement === 'start'
-    ? [...missing, ...loaded]
-    : [...loaded, ...missing];
-}
-
-export function flattenBlogCommentThread(
-  roots: readonly IBlogComment[],
-  replies: BlogCommentReplies,
-  local: readonly IBlogComment[] = [],
-) {
-  const items: BlogCommentThreadItem[] = [];
-  const visited = new Set<number>();
-
-  function visit(comment: IBlogComment, depth: number, parent?: IBlogComment) {
-    if (visited.has(comment.id)) {
-      return;
-    }
-    visited.add(comment.id);
-    const item: BlogCommentThreadItem = {
-      comment,
-      depth,
-      indent: Math.min(depth, blogCommentMaxIndent),
-      parent,
-      closes: [],
-    };
-    items.push(item);
-    const children = withLocalBlogComments(
-      replies[comment.id] ?? [],
-      local,
-      comment.id,
-      'end',
-    );
-    for (const child of children) {
-      visit(child, depth + 1, comment);
-    }
-    items.at(-1)!.closes.push(item);
-  }
-
-  for (const root of roots) {
-    visit(root, 0);
-  }
-  return items;
-}
-
-export function replaceBlogComment(
-  roots: readonly IBlogComment[],
-  replies: BlogCommentReplies,
-  comment: IBlogComment,
-) {
-  const replace = (list: readonly IBlogComment[]) =>
-    list.map((item) => (item.id === comment.id ? comment : item));
-  return {
-    roots: replace(roots),
-    replies: Object.fromEntries(
-      Object.entries(replies).map(([id, list]) => [id, replace(list)]),
-    ) as Record<number, IBlogComment[]>,
-  };
-}
-
-export function withNewBlogReply(parent: IBlogComment, reply: IBlogComment) {
-  const approved = reply.status.int === EBlogCommentStatus.APPROVED;
-
-  return {
-    ...parent,
-    total_c_replies: parent.total_c_replies + 1,
-    can_edit: parent.can_edit && !approved,
-    can_remove: false,
-  };
-}

package/templates/lib/orionplace/blogImageViewer.ts

@@ -1,84 +0,0 @@
-/**
- * The images of a blog article a reader can open larger: the cover and the
- * pictures of the article text. Images inside a link, a button or a product
- * placement keep their own click.
- */
-export interface IBlogViewerImage {
-  src: string;
-  alt: string;
-  caption: string;
-}
-
-/** The images in the shape the photo viewer takes: one entry per image, numbered in order. */
-export function blogViewerPhotos(images: IBlogViewerImage[]) {
-  return images.map((image, index) => ({ id: index + 1, image: image.src }));
-}
-
-const SKIPPED = 'a, button, [data-product-id], [data-product-ids], [data-blog-image-viewer-skip]';
-
-/** The openable images under the given roots, in reading order. */
-export function blogViewerImages(
-  roots: (ParentNode | null | undefined)[],
-): HTMLImageElement[] {
-  const images: HTMLImageElement[] = [];
-  for (const root of roots) {
-    if (!root || typeof root.querySelectorAll !== 'function') {
-      continue;
-    }
-    const found = isImage(root) ? [root] : [...root.querySelectorAll('img')];
-    for (const image of found) {
-      if (typeof image.closest === 'function' && !image.closest(SKIPPED) && imageSource(image)) {
-        images.push(image);
-      }
-    }
-  }
-  return images;
-}
-
-/** What the viewer shows for one image: its address, text and caption. */
-export function blogViewerImage(image: HTMLImageElement): IBlogViewerImage {
-  const caption = image.closest('figure')?.querySelector('figcaption')?.textContent?.trim() ?? '';
-
-  return {
-    src: imageSource(image),
-    alt: image.alt.trim(),
-    caption: caption || image.title.trim(),
-  };
-}
-
-/**
- * Makes each image a button for keyboard and screen reader users.
- * `label` names the action, for example «Open image».
- */
-export function markBlogViewerImages(images: HTMLImageElement[], label: string) {
-  for (const image of images) {
-    image.dataset.blogImageViewer = '';
-    image.tabIndex = 0;
-    image.setAttribute('role', 'button');
-    const name = image.alt.trim();
-    image.setAttribute('aria-label', name ? `${label}: ${name}` : label);
-  }
-}
-
-/** The position of the clicked or focused image in the list, or -1. */
-export function blogViewerIndex(target: EventTarget | null, images: HTMLImageElement[]) {
-  const image = target && typeof (target as Element).closest === 'function'
-    ? (target as Element).closest('img')
-    : null;
-
-  return image ? images.indexOf(image) : -1;
-}
-
-/** A key that opens the focused image. */
-export function isBlogViewerOpenKey(event: KeyboardEvent) {
-  return event.key === 'Enter' || event.key === ' ';
-}
-
-// No `instanceof HTMLImageElement`: the helper also loads where there is no DOM.
-function isImage(node: ParentNode): node is HTMLImageElement {
-  return (node as Element).tagName === 'IMG';
-}
-
-function imageSource(image: HTMLImageElement) {
-  return image.currentSrc || image.getAttribute('src') || '';
-}