@cloud-ru/ds-markdown 1.0.0

package/src/helperComponents/PrivateButton/PrivateButton.tsx

@@ -0,0 +1,88 @@
+import { WithTooltip } from '@cloud-ru/ds-tooltip';
+import { Typography } from '@cloud-ru/ds-typography';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
+
+import styles from './styles.module.scss';
+
+const PrivateChevronIcon = (
+  <svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none' className={styles.chevron}>
+    <path d='M1 3L4 6L7 3' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
+  </svg>
+);
+
+type TipContentProps = { title: string; caption?: string };
+
+function TipContent({ title, caption }: TipContentProps) {
+  return (
+    <>
+      <Typography variant='body' size='s' weight='regular' className={styles.tipTitle}>
+        {title}
+      </Typography>
+      {caption && (
+        <Typography variant='body' size='s' weight='regular' className={styles.tipCaption}>
+          {caption}
+        </Typography>
+      )}
+    </>
+  );
+}
+
+// Иконка занимает весь container, hover — stateLayer, checked=true → accent-цвет.
+export type PrivateButtonProps = WithSupportProps<
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
+    icon: ReactNode;
+    withChevron?: boolean;
+    /** active/selected состояние */
+    checked?: boolean;
+    /** Внешний ref, без forwardRef (см. component-api-surface.md). */
+    innerRef?: Ref<HTMLButtonElement>;
+    tip?: TipContentProps;
+  }
+>;
+
+// eslint-disable-next-line ds/require-inner-ref-support -- innerRef проставляется условно (только без tip), поэтому статический маркер поддержки был бы неверен.
+export function PrivateButton({
+  id,
+  tip,
+  icon,
+  checked = false,
+  disabled = false,
+  className,
+  innerRef,
+  type = 'button',
+  withChevron = false,
+  ...rest
+}: PrivateButtonProps) {
+  return WithTooltip({
+    tooltip: tip
+      ? {
+          tip: <TipContent {...tip} />,
+          triggerClassName: styles.tooltipTrigger,
+        }
+      : undefined,
+    children: (
+      <button
+        data-toolbar-item={id}
+        {...rest}
+        data-toolbar-slot
+        ref={tip ? undefined : innerRef}
+        type={type}
+        disabled={disabled}
+        className={cn(styles.root, className)}
+        data-checked={checked || undefined}
+        data-disabled={disabled || undefined}
+        aria-pressed={checked}
+      >
+        <span
+          className={styles.stateLayer}
+          data-state={checked ? 'activatedOnBackground' : 'emptyNeutralOnBackground'}
+          aria-hidden
+        />
+        {icon}
+        {withChevron && PrivateChevronIcon}
+      </button>
+    ),
+  });
+}

package/src/helperComponents/PrivateButton/index.ts

@@ -0,0 +1 @@
+export * from './PrivateButton';

package/src/helperComponents/PrivateButton/styles.module.scss

@@ -0,0 +1,77 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/markdown.module' as md;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/button.module' as button;
+@use '@cloud-ru/ds-materials' as m;
+
+// `stateLayer` нужен оставленным определённым над .root — миксин ниже его потребляет.
+.stateLayer {
+  visibility: initial;
+}
+
+.root {
+  cursor: pointer;
+
+  position: relative;
+
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  min-width: button.$sn-button-anatomy-size-s-container-iconOnly-minWidth;
+  height: button.$sn-button-anatomy-size-s-container-minHeight;
+  padding: 0;
+  border: 0;
+  border-radius: md.$sn-density-radius-2xs;
+
+  color: md.$sn-theme-color-neutral-text;
+
+  background: transparent;
+
+  &:has(.chevron) {
+    gap: md.$sn-markdown-anatomy-size-buttons-button-gap;
+    padding-right: md.$sn-markdown-anatomy-size-buttons-button-paddingRight;
+  }
+
+  svg {
+    flex: 0 0 auto;
+    stroke-width: md.$sn-density-size-icon-strokeWeight-s;
+
+    &:not(.chevron) {
+      width: md.$sn-density-size-icon-s;
+      height: md.$sn-density-size-icon-s;
+    }
+  }
+
+  &:focus-visible {
+    outline: md.$sn-primitive-strokeWeight-strokeSemiBold solid md.$sn-theme-color-available-complementary;
+    outline-offset: 0;
+  }
+
+  &[data-checked] {
+    color: md.$sn-theme-color-primary-accent;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    color: md.$sn-theme-color-available-version-textDisabled;
+  }
+
+  @include m.has-state-layer-as-child(#{stateLayer});
+}
+
+.tooltipTrigger {
+  display: inline-flex;
+}
+
+// Цвет наследуется от контейнера Tooltip (available/inversion/textMain) — свой не задаём.
+.tipTitle {
+  text-align: center;
+}
+
+// Подпись-подсказка приглушена: inversion/textTertiary (тот же текст @ 60%).
+.tipCaption {
+  color: base.$sn-theme-color-available-inversion-textTertiary;
+  text-align: center;
+}

package/src/helperComponents/TableSelectItem/TableSelectItem.tsx

@@ -0,0 +1,43 @@
+import styles from './styles.module.scss';
+
+// Одна ячейка из grid-picker'а.
+export type TableSelectItemProps = {
+  /** Hover-состояние (управляется родителем по mouseEnter). */
+  hovered?: boolean;
+  /** Будет ли ячейка попадать в выбранный диапазон. */
+  checked?: boolean;
+  onMouseEnter?(): void;
+  onClick?(): void;
+  'aria-label'?: string;
+  'data-test-id'?: string;
+};
+
+export function TableSelectItem({
+  hovered = false,
+  checked = false,
+  onMouseEnter,
+  onClick,
+  'aria-label': ariaLabel,
+  'data-test-id': dataTestId,
+}: TableSelectItemProps) {
+  const state = hovered ? 'hovered' : 'default';
+
+  return (
+    <button
+      type='button'
+      className={styles.root}
+      data-state={state}
+      data-checked={checked || undefined}
+      onMouseEnter={onMouseEnter}
+      onClick={onClick}
+      aria-label={ariaLabel}
+      data-test-id={dataTestId}
+    >
+      <span
+        className={styles.stateLayer}
+        data-state={checked ? 'activatedOnBackground' : 'emptyNeutralOnBackground'}
+        aria-hidden
+      />
+    </button>
+  );
+}

package/src/helperComponents/TableSelectItem/index.ts

@@ -0,0 +1 @@
+export * from './TableSelectItem';

package/src/helperComponents/TableSelectItem/styles.module.scss

@@ -0,0 +1,26 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/components/markdown.module' as md;
+@use '@cloud-ru/ds-materials' as m;
+
+.stateLayer {
+  pointer-events: none;
+}
+
+.root {
+  cursor: pointer;
+
+  position: relative;
+
+  box-sizing: border-box;
+  width: md.$sn-markdown-anatomy-size-tableSelect-container-item-size;
+  height: md.$sn-markdown-anatomy-size-tableSelect-container-item-size;
+  padding: 0;
+  border: md.$sn-markdown-anatomy-size-tableSelect-container-item-borderWidth solid
+    md.$sn-theme-color-available-borderColor;
+  border-radius: md.$sn-markdown-anatomy-size-tableSelect-container-item-borderRadius;
+
+  &[data-checked] {
+    border-color: md.$sn-theme-color-primary-accent;
+  }
+
+  @include m.has-state-layer-as-child(#{stateLayer});
+}

package/src/helperComponents/TableSelectSettingsGrid/TableSelectSettingsGrid.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+
+import { tableCellTestId, TEST_IDS } from '../../constants';
+import { markdownLocale } from '../../locale';
+import { TableSelectItem } from '../TableSelectItem';
+import styles from './styles.module.scss';
+
+export type TableSelectSettingsGridProps = {
+  onPick(rows: number, cols: number): void;
+};
+
+const MAX = 8;
+
+export function TableSelectSettingsGrid({ onPick }: TableSelectSettingsGridProps) {
+  const { t } = markdownLocale.useTranslations();
+  const [hover, setHover] = useState<{ r: number; c: number } | null>(null);
+
+  const cells: { r: number; c: number }[] = [];
+  for (let r = 1; r <= MAX; r += 1) {
+    for (let c = 1; c <= MAX; c += 1) {
+      cells.push({ r, c });
+    }
+  }
+
+  return (
+    <div className={styles.root} data-test-id={TEST_IDS.tableGridPicker}>
+      <div className={styles.container}>
+        <div className={styles.grid} onMouseLeave={() => setHover(null)}>
+          {cells.map(({ r, c }) => {
+            const checked = hover !== null && r <= hover.r && c <= hover.c;
+            return (
+              <TableSelectItem
+                key={`${r}-${c}`}
+                hovered={hover?.r === r && hover?.c === c}
+                checked={checked}
+                onMouseEnter={() => setHover({ r, c })}
+                onClick={() => onPick(r, c)}
+                aria-label={t('table.insert', { rows: r, cols: c })}
+                data-test-id={tableCellTestId(r, c)}
+              />
+            );
+          })}
+        </div>
+        <div className={styles.label}>{hover ? `${hover.r} × ${hover.c}` : t('table.pickSize')}</div>
+      </div>
+    </div>
+  );
+}

package/src/helperComponents/TableSelectSettingsGrid/index.ts

@@ -0,0 +1 @@
+export * from './TableSelectSettingsGrid';

package/src/helperComponents/TableSelectSettingsGrid/styles.module.scss

@@ -0,0 +1,65 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/markdown.module' as md;
+
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: md.$sn-markdown-anatomy-size-tableSelect-container-gap;
+
+  box-sizing: border-box;
+  padding: md.$sn-markdown-anatomy-size-tableSelect-container-paddingHorizontal
+    md.$sn-markdown-anatomy-size-tableSelect-container-paddingHorizontal
+    md.$sn-markdown-anatomy-size-tableSelect-container-paddingBottom;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(8, md.$sn-markdown-anatomy-size-tableSelect-container-item-size);
+  gap: md.$sn-markdown-anatomy-size-tableSelect-container-gap;
+}
+
+.label {
+  font-size: md.$sn-density-typography-roleBody-fontSizeS;
+  line-height: md.$sn-density-typography-roleBody-lineHeightS;
+  color: md.$sn-theme-color-available-version-textSecondary;
+  text-align: center;
+}
+
+.customize {
+  cursor: pointer;
+
+  display: flex;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+  justify-content: space-between;
+
+  box-sizing: border-box;
+  padding: base.$sn-primitive-dimension-4 base.$sn-primitive-dimension-12;
+  border: none;
+
+  font-family: md.$sn-brand-font-fontFamily-regular-body;
+  font-size: md.$sn-density-typography-roleBody-fontSizeM;
+  line-height: md.$sn-density-typography-roleBody-lineHeightM;
+  color: md.$sn-theme-color-available-version-textMain;
+  text-align: left;
+
+  background: transparent;
+
+  &:hover {
+    background: md.$sn-theme-color-neutral-background2Level;
+  }
+}
+
+.customizeLabel {
+  flex: 1 1 auto;
+}
+
+.customizeChevron {
+  flex: 0 0 auto;
+  color: md.$sn-theme-color-available-version-textSecondary;
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,6 @@
+export * from './ButtonHeading';
+export * from './Buttons';
+export * from './Modals';
+export * from './PrivateButton';
+export * from './TableSelectItem';
+export * from './TableSelectSettingsGrid';

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './constants';
+export * from './types';
+export * from './locale';

package/src/locale/index.ts

@@ -0,0 +1,105 @@
+import { defineLocale, defineMessages } from '@cloud-ru/ds-locale';
+
+const MARKDOWN_MESSAGES = defineMessages({
+  'en-GB': {
+    toolbar: {
+      heading: 'Heading',
+      bold: 'Bold',
+      italic: 'Italic',
+      strikethrough: 'Strikethrough',
+      link: 'Link',
+      inlineCode: 'Inline code',
+      bulletList: 'Bullet list',
+      orderedList: 'Ordered list',
+      blockQuote: 'Block quote',
+      blockCode: 'Block code',
+      table: 'Table',
+      image: 'Image',
+      more: 'More',
+    },
+    clear: 'Clear',
+    copy: 'Copy',
+    copied: 'Copied',
+    add: 'Add',
+    cancel: 'Cancel',
+    link: {
+      title: 'Add link',
+      titleField: {
+        label: 'Text',
+        placeholder: 'Link text',
+      },
+      urlField: {
+        label: 'URL',
+        placeholder: 'https://',
+      },
+    },
+    image: {
+      title: 'Add image',
+      url: 'URL',
+      alt: 'Alt text',
+      placeholder: 'https://',
+    },
+    table: {
+      pickSize: 'Pick size',
+      insert: 'Insert {{rows}} × {{cols}} table',
+      column: 'Column {{index}}',
+      customize: 'Customize table',
+      columns: 'Columns',
+      rows: 'Rows',
+    },
+    linkText: 'link text',
+  },
+  'ru-RU': {
+    toolbar: {
+      heading: 'Заголовок',
+      bold: 'Жирный',
+      italic: 'Курсив',
+      strikethrough: 'Зачёркнутый',
+      link: 'Ссылка',
+      inlineCode: 'Строчный код',
+      bulletList: 'Маркированный список',
+      orderedList: 'Нумерованный список',
+      blockQuote: 'Цитата',
+      blockCode: 'Блок кода',
+      table: 'Таблица',
+      image: 'Картинка',
+      more: 'Ещё',
+    },
+    clear: 'Очистить',
+    copy: 'Скопировать',
+    copied: 'Скопировано',
+    add: 'Добавить',
+    cancel: 'Отмена',
+    link: {
+      title: 'Добавить ссылку',
+      titleField: {
+        label: 'Текст',
+        placeholder: 'Текст ссылки',
+      },
+      urlField: {
+        label: 'URL',
+        placeholder: 'https://',
+      },
+    },
+    image: {
+      title: 'Добавить изображение',
+      url: 'URL',
+      alt: 'Альтернативный текст',
+      placeholder: 'https://',
+    },
+    table: {
+      pickSize: 'Выберите размер',
+      insert: 'Вставить таблицу {{rows}} × {{cols}}',
+      column: 'Колонка {{index}}',
+      customize: 'Настроить таблицу',
+      columns: 'Столбцы',
+      rows: 'Строки',
+    },
+    linkText: 'текст ссылки',
+  },
+});
+
+export type MarkdownMessages = (typeof MARKDOWN_MESSAGES)['en-GB'];
+
+/** locale компонента Markdown: `markdownLocale.useTranslations()` в коде, `markdownLocale.extend(...)` в сервисе. */
+export const markdownLocale = defineLocale('@cloud-ru/ds-markdown', MARKDOWN_MESSAGES);

package/src/lowlight.ts

@@ -0,0 +1,30 @@
+import bash from 'highlight.js/lib/languages/bash';
+import css from 'highlight.js/lib/languages/css';
+import diff from 'highlight.js/lib/languages/diff';
+import go from 'highlight.js/lib/languages/go';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import markdown from 'highlight.js/lib/languages/markdown';
+import python from 'highlight.js/lib/languages/python';
+import scss from 'highlight.js/lib/languages/scss';
+import shell from 'highlight.js/lib/languages/shell';
+import typescript from 'highlight.js/lib/languages/typescript';
+import xml from 'highlight.js/lib/languages/xml';
+import yaml from 'highlight.js/lib/languages/yaml';
+import { createLowlight } from 'lowlight';
+
+export const lowlight = createLowlight({
+  bash,
+  css,
+  diff,
+  go,
+  javascript,
+  json,
+  markdown,
+  python,
+  scss,
+  shell,
+  typescript,
+  xml,
+  yaml,
+});

package/src/mixins.scss

@@ -0,0 +1,123 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/markdown.module' as md;
+
+// Общие стили markdown-контента: типографика блоков и top-spacing'и.
+// Подключаются и во viewer (`Markdown`), и в editor (`MarkdownEditor` → .ProseMirror),
+// чтобы блоки выглядели одинаково в обоих режимах и правились в одном месте.
+
+// Композитные typography-роли заголовков: один токен разворачивается в font-* через composite-var.
+$headings: (
+  'h1': base.$sn-regular-headline-l,
+  'h2': base.$sn-regular-headline-m,
+  'h3': base.$sn-regular-headline-s,
+  'h4': base.$sn-regular-title-l,
+  'h5': base.$sn-regular-title-m,
+);
+
+// Top-spacing на каждый блок (paddingTop при наличии предыдущего соседа).
+$block-top-spacings: (
+  'h1': md.$sn-markdown-anatomy-size-syntax-headings-h1-paddingTop,
+  'h2': md.$sn-markdown-anatomy-size-syntax-headings-h2-paddingTop,
+  'h3': md.$sn-markdown-anatomy-size-syntax-headings-h3-paddingTop,
+  'h4': md.$sn-markdown-anatomy-size-syntax-headings-h4-paddingTop,
+  'h5': md.$sn-markdown-anatomy-size-syntax-headings-h5-paddingTop,
+  'blockquote': md.$sn-markdown-anatomy-size-syntax-quote-paddingTop,
+  'pre': md.$sn-markdown-anatomy-size-syntax-codeEditor-paddingTop,
+  'table': md.$sn-markdown-anatomy-size-syntax-table-paddingTop,
+  'img': md.$sn-markdown-anatomy-size-syntax-image-paddingTop,
+  'hr': md.$sn-markdown-anatomy-size-syntax-divider-paddingTop,
+);
+
+@mixin markdown-content {
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  ul,
+  ol,
+  blockquote,
+  pre,
+  table,
+  hr,
+  img {
+    margin: 0;
+  }
+
+  @each $tag, $token in $headings {
+    #{$tag} {
+      @include base.composite-var($headings, $tag);
+    }
+  }
+
+  ul,
+  ol {
+    padding-left: base.$sn-primitive-dimension-24;
+  }
+
+  blockquote {
+    padding: md.$sn-markdown-anatomy-size-syntax-quote-wrapper-paddingVertical
+      md.$sn-markdown-anatomy-size-syntax-quote-wrapper-paddingHorizontal;
+    border-left: md.$sn-markdown-anatomy-size-syntax-quote-wrapper-borderWidth solid
+      md.$sn-theme-color-available-borderColor;
+    color: md.$sn-theme-color-available-version-textMain;
+    background: base.$sn-theme-color-neutral-decorTransparent;
+  }
+
+  code {
+    min-height: md.$sn-markdown-anatomy-size-syntax-inlineCode-minHeight;
+    padding: 0 md.$sn-markdown-anatomy-size-syntax-inlineCode-paddingHorizontal;
+    border-radius: md.$sn-markdown-anatomy-size-syntax-inlineCode-borderRadius;
+
+    font-family: md.$sn-brand-font-fontFamily-mono-body;
+
+    background: md.$sn-theme-color-neutral-decorTransparent;
+  }
+
+  a {
+    color: md.$sn-theme-color-neutral-accent;
+    text-decoration: underline;
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  th,
+  td {
+    min-height: md.$sn-markdown-anatomy-size-syntax-table-tableCell-minHeight;
+    padding: md.$sn-markdown-anatomy-size-syntax-table-tableCell-paddingVertical
+      md.$sn-markdown-anatomy-size-syntax-table-tableCell-paddingHorizontal;
+    // Ячейка несёт только нижнюю линейку: в мастере вертикальных границ нет, соседние
+    // ячейки стыкуются вплотную.
+    border-bottom: md.$sn-primitive-strokeWeight-strokeRegular solid md.$sn-theme-color-available-borderColor;
+    text-align: left;
+  }
+
+  th {
+    font-weight: 600;
+    background: base.$sn-theme-color-neutral-decorTransparent;
+  }
+}
+
+// Top-spacings: каждый блок имеет свой paddingTop.
+// Default — paragraph; конкретные блоки переопределяют.
+@mixin markdown-block-spacings {
+  > *:not(:first-child) {
+    margin-top: md.$sn-markdown-anatomy-size-syntax-paragraphs-paddingTop;
+  }
+
+  // Списки делят один токен — задаём отдельно от карты блоков.
+  > ul:not(:first-child),
+  > ol:not(:first-child) {
+    margin-top: md.$sn-markdown-anatomy-size-syntax-list-paddingTop;
+  }
+
+  @each $tag, $padding-top in $block-top-spacings {
+    > #{$tag}:not(:first-child) {
+      margin-top: $padding-top;
+    }
+  }
+}