@cloud-ru/ds-markdown 1.0.0

package/dist/cjs/components/MarkdownEditor/styles.module.css

@@ -0,0 +1,273 @@
+.root{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-markdown-anatomy-size-container-gap, var(--sn-primitive-dimension-4, 4px));
+  box-sizing:border-box;
+}
+
+.header{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:space-between;
+  font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
+  font-size:var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px));
+  line-height:var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px));
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.previewToggle{
+  cursor:pointer;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+  display:inline-flex;
+  gap:var(--sn-markdown-anatomy-size-container-headlineWrapper-headline-gap, var(--sn-primitive-dimension-8, 8px));
+  align-items:center;
+}
+
+.previewToggleLabel{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+}
+
+.label{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.toolbarSlot{
+  flex:1 1 auto;
+  min-width:0;
+}
+
+.contentArea{
+  position:relative;
+  display:flex;
+  box-sizing:border-box;
+  width:100%;
+  padding:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+}
+
+.resizeBox{
+  display:flex;
+  flex:1 1 auto;
+  flex-direction:column;
+  min-width:0;
+  min-height:var(--sn-field-anatomy-size-m-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-68, 68px));
+}
+
+.resizeBoxResizable{
+  resize:vertical;
+  overflow:hidden;
+  height:var(--sn-field-anatomy-size-m-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-68, 68px));
+}
+
+.postfix{
+  position:absolute;
+  top:calc(var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) - var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)))) / 2);
+  right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
+  display:grid;
+  grid-auto-rows:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  grid-template-columns:100%;
+  row-gap:var(--sn-primitive-dimension-2, 2px);
+  place-items:center center;
+  width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+}
+
+.rawInputWrapper{
+  display:flex;
+  width:100%;
+  height:100%;
+}
+
+.rawInput{
+  resize:none;
+  overflow-y:auto;
+  flex:1 1 auto;
+  min-height:0;
+  padding:0;
+  padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
+  border:none;
+  font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
+  font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
+  line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  background:transparent;
+  outline:none;
+}
+.rawInput::-moz-placeholder{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.rawInput::placeholder{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+
+.content{
+  overflow-y:auto;
+  flex:1 1 auto;
+  min-height:0;
+  font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
+  font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
+  line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.content :global(.ProseMirror){
+  min-height:100%;
+  padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
+  outline:none;
+}
+.content :global(.ProseMirror) p,
+.content :global(.ProseMirror) h1,
+.content :global(.ProseMirror) h2,
+.content :global(.ProseMirror) h3,
+.content :global(.ProseMirror) h4,
+.content :global(.ProseMirror) h5,
+.content :global(.ProseMirror) ul,
+.content :global(.ProseMirror) ol,
+.content :global(.ProseMirror) blockquote,
+.content :global(.ProseMirror) pre,
+.content :global(.ProseMirror) table,
+.content :global(.ProseMirror) hr,
+.content :global(.ProseMirror) img{
+  margin:0;
+}
+.content :global(.ProseMirror) h1{
+  font-family:var(--sn-regular-headline-l-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-headline-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-l, var(--sn-brand-font-fontWeight-light-regular-headline-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-headline-l-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightL, var(--sn-primitive-font-lineHeight-by40, 48px)));
+  font-size:var(--sn-regular-headline-l-fontSize, var(--sn-density-typography-roleHeadline-fontSizeL, var(--sn-primitive-font-fontSize-36, 36px)));
+  letter-spacing:var(--sn-regular-headline-l-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-headline-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize32, 16px));
+}
+.content :global(.ProseMirror) h2{
+  font-family:var(--sn-regular-headline-m-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-headline-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-m, var(--sn-brand-font-fontWeight-light-regular-headline-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-headline-m-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightM, var(--sn-primitive-font-lineHeight-by32, 40px)));
+  font-size:var(--sn-regular-headline-m-fontSize, var(--sn-density-typography-roleHeadline-fontSizeM, var(--sn-primitive-font-fontSize-32, 32px)));
+  letter-spacing:var(--sn-regular-headline-m-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-headline-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize28, 14px));
+}
+.content :global(.ProseMirror) h3{
+  font-family:var(--sn-regular-headline-s-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-headline-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-s, var(--sn-brand-font-fontWeight-light-regular-headline-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
+  font-size:var(--sn-regular-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px)));
+  letter-spacing:var(--sn-regular-headline-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-headline-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize24, 12px));
+}
+.content :global(.ProseMirror) h4{
+  font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
+}
+.content :global(.ProseMirror) h5{
+  font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.content :global(.ProseMirror) ul,
+.content :global(.ProseMirror) ol{
+  padding-left:var(--sn-primitive-dimension-24, 24px);
+}
+.content :global(.ProseMirror) blockquote{
+  padding:var(--sn-markdown-anatomy-size-syntax-quote-wrapper-paddingVertical, var(--sn-primitive-dimension-8, 8px)) var(--sn-markdown-anatomy-size-syntax-quote-wrapper-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  border-left:var(--sn-markdown-anatomy-size-syntax-quote-wrapper-borderWidth, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.content :global(.ProseMirror) code{
+  min-height:var(--sn-markdown-anatomy-size-syntax-inlineCode-minHeight, var(--sn-primitive-dimension-20, 20px));
+  padding:0 var(--sn-markdown-anatomy-size-syntax-inlineCode-paddingHorizontal, var(--sn-primitive-dimension-4, 4px));
+  border-radius:var(--sn-markdown-anatomy-size-syntax-inlineCode-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  font-family:var(--sn-brand-font-fontFamily-mono-body, var(--sn-primitive-fontFamily-brandA-mono, SB Sans Text Mono));
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.content :global(.ProseMirror) a{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+  text-decoration:underline;
+}
+.content :global(.ProseMirror) table{
+  border-collapse:collapse;
+  width:100%;
+}
+.content :global(.ProseMirror) th,
+.content :global(.ProseMirror) td{
+  min-height:var(--sn-markdown-anatomy-size-syntax-table-tableCell-minHeight, var(--sn-primitive-dimension-40, 40px));
+  padding:var(--sn-markdown-anatomy-size-syntax-table-tableCell-paddingVertical, var(--sn-primitive-dimension-8, 8px)) var(--sn-markdown-anatomy-size-syntax-table-tableCell-paddingHorizontal, var(--sn-primitive-dimension-16, 16px));
+  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  text-align:left;
+}
+.content :global(.ProseMirror) th{
+  font-weight:600;
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.content :global(.ProseMirror) > *:not(:first-child){
+  margin-top:10px;
+}
+.content :global(.ProseMirror) > ul:not(:first-child),
+.content :global(.ProseMirror) > ol:not(:first-child){
+  margin-top:5px;
+}
+.content :global(.ProseMirror) > h1:not(:first-child){
+  margin-top:var(--sn-markdown-anatomy-size-syntax-headings-h1-paddingTop, var(--sn-primitive-dimension-20, 20px));
+}
+.content :global(.ProseMirror) > h2:not(:first-child){
+  margin-top:18px;
+}
+.content :global(.ProseMirror) > h3:not(:first-child){
+  margin-top:var(--sn-markdown-anatomy-size-syntax-headings-h3-paddingTop, var(--sn-primitive-dimension-16, 16px));
+}
+.content :global(.ProseMirror) > h4:not(:first-child){
+  margin-top:14px;
+}
+.content :global(.ProseMirror) > h5:not(:first-child){
+  margin-top:var(--sn-markdown-anatomy-size-syntax-headings-h5-paddingTop, var(--sn-primitive-dimension-12, 12px));
+}
+.content :global(.ProseMirror) > blockquote:not(:first-child){
+  margin-top:5px;
+}
+.content :global(.ProseMirror) > pre:not(:first-child){
+  margin-top:5px;
+}
+.content :global(.ProseMirror) > table:not(:first-child){
+  margin-top:5px;
+}
+.content :global(.ProseMirror) > img:not(:first-child){
+  margin-top:5px;
+}
+.content :global(.ProseMirror) > hr:not(:first-child){
+  margin-top:10px;
+}
+.content :global(.ProseMirror) pre{
+  overflow-x:auto;
+  padding:var(--sn-primitive-dimension-12, 12px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+}
+.content :global(.ProseMirror) pre code{
+  min-height:0;
+  padding:0;
+  background:transparent;
+}
+.content :global(.ProseMirror) :global(p.is-editor-empty:first-child)::before{
+  pointer-events:none;
+  content:attr(data-placeholder);
+  float:left;
+  height:0;
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.content :global(.ProseMirror) img{
+  max-width:100%;
+  height:auto;
+}

package/dist/cjs/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,9 @@
+import { ToolbarApi } from '../../toolbarApi';
+import { ToolbarItemId } from '../../types';
+type ToolbarProps = {
+    /** Бэкенд команд: WYSIWYG (TipTap) в preview-режиме либо markdown-исходник (textarea) в raw-режиме. */
+    api: ToolbarApi;
+    items: ToolbarItemId[];
+};
+export declare function Toolbar({ api, items }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/Toolbar/Toolbar.js

@@ -0,0 +1,173 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toolbar = Toolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const list_1 = require("@cloud-ru/ds-list");
+const portal_context_1 = require("@cloud-ru/ds-portal-context");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const locale_1 = require("../../locale");
+const constants_2 = require("./constants");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Toolbar({ api, items }) {
+    const portalContext = (0, portal_context_1.usePortalContext)();
+    const { t } = locale_1.markdownLocale.useTranslations();
+    // Overflow тулбара (сколько кнопок видно, остальные — в «Ещё») вынесен в хук.
+    const { rootRef, moreButtonRef, visibleCount } = (0, hooks_1.useToolbarOverflow)(items);
+    const [moreOpen, setMoreOpen] = (0, react_1.useState)(false);
+    const [tableOpen, setTableOpen] = (0, react_1.useState)(false);
+    const [linkInitial, setLinkInitial] = (0, react_1.useState)(undefined);
+    const [toolbarItemModal, setToolbarItemModal] = (0, react_1.useState)();
+    // Закрывает оба table-picker'а и открывает модалку настройки размеров.
+    const openCustomize = (0, react_1.useCallback)(() => {
+        setTableOpen(false);
+        setMoreOpen(false);
+        setToolbarItemModal('table');
+    }, []);
+    const openLink = (0, react_1.useCallback)(() => {
+        setMoreOpen(false);
+        // raw-режим: ссылка добавляется как сырой markdown-шаблон прямо в textarea, без модалки.
+        if (api.mode === 'raw') {
+            api.setLink({});
+            return;
+        }
+        setLinkInitial({
+            href: api.getLinkHref(),
+            title: api.getLinkTitle(),
+        });
+        setToolbarItemModal('link');
+    }, [api]);
+    const openImage = (0, react_1.useCallback)(() => {
+        setMoreOpen(false);
+        setToolbarItemModal('image');
+    }, []);
+    const closeToolbarItemModal = () => {
+        setToolbarItemModal(undefined);
+        api.focus();
+    };
+    // Принудительный re-render тулбара на selection/transaction → переключаются checked-стейты кнопок.
+    const [, setTick] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => api.subscribe(() => setTick(n => n + 1)), [api]);
+    (0, hooks_1.useToolbarHotkeys)({ rootRef, items, api, onLink: openLink, onImage: openImage });
+    const toolbarTableItems = (0, react_1.useMemo)(() => [
+        {
+            content: ((0, jsx_runtime_1.jsx)(helperComponents_1.TableSelectSettingsGrid, { onPick: (rows, cols) => {
+                    api.insertTable(rows, cols);
+                    setTableOpen(false);
+                    setMoreOpen(false);
+                } })),
+            inactive: true,
+        },
+        { type: 'group', content: '', divider: true },
+        {
+            content: {
+                label: t('table.customize'),
+                className: styles_module_scss_1.default.tableCustomizeOption,
+            },
+            onClick: openCustomize,
+            afterContent: (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, {}),
+            'data-test-id': constants_1.TEST_IDS.tableCustomize,
+        },
+    ], [api, t, openCustomize]);
+    const renderItem = (id) => {
+        const spec = constants_2.BUTTONS[id];
+        if (!spec) {
+            return null;
+        }
+        const name = t(spec.nameKey);
+        const commonButtonProps = {
+            id,
+            icon: spec.icon,
+            'data-test-id': (0, constants_1.toolbarButtonTestId)(id),
+            'aria-label': name,
+            tip: { title: name, caption: spec.hotkey },
+            checked: api.isActive(id),
+            onClick: () => api.toggle(id),
+        };
+        if (id === constants_1.TOOLBAR_ITEM.Heading) {
+            return (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonHeading, { api: api }, id);
+        }
+        if (id === constants_1.TOOLBAR_ITEM.Link && spec) {
+            commonButtonProps.onClick = openLink;
+        }
+        if (id === constants_1.TOOLBAR_ITEM.Image) {
+            commonButtonProps.onClick = openImage;
+        }
+        if (id === constants_1.TOOLBAR_ITEM.Table && spec) {
+            return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', container: portalContext, open: tableOpen, onOpenChange: setTableOpen, placement: 'bottom-start', triggerClassName: styles_module_scss_1.default.tooltipTrigger, items: toolbarTableItems, children: (0, jsx_runtime_1.jsx)(helperComponents_1.PrivateButton, { ...commonButtonProps }, id) }, id));
+        }
+        return (0, jsx_runtime_1.jsx)(helperComponents_1.PrivateButton, { ...commonButtonProps }, id);
+    };
+    // Решаем, какие items видимы, группируем под GROUPS, рисуем дивайдеры между группами.
+    const visibleItems = new Set(items.slice(0, visibleCount));
+    const overflowItems = items.slice(visibleCount);
+    const presentGroups = constants_2.GROUPS.map(group => group.filter(id => visibleItems.has(id))).filter(g => g.length > 0);
+    const handleMoreSelect = (id) => {
+        if (id === constants_1.TOOLBAR_ITEM.Table) {
+            // Table-picker открывается вторым уровнем, якорь — More-кнопка (childless Dropdown + triggerRef).
+            setTableOpen(true);
+            return;
+        }
+        if (id === constants_1.TOOLBAR_ITEM.Link) {
+            openLink();
+        }
+        else if (id === constants_1.TOOLBAR_ITEM.Image) {
+            openImage();
+        }
+        else {
+            setMoreOpen(false);
+            api.toggle(id);
+        }
+    };
+    const handleSubmitCustomizeTable = (rows, cols) => {
+        api.insertTable(rows, cols);
+        closeToolbarItemModal();
+        setMoreOpen(false);
+    };
+    const handleLinkSubmit = linkProps => {
+        api.setLink(linkProps);
+        closeToolbarItemModal();
+    };
+    const handleImageSubmit = (url, alt) => {
+        api.insertImage(url, alt);
+        closeToolbarItemModal();
+    };
+    // Строки More-списка: иконка + подпись + хоткей справа (caption).
+    const moreItems = overflowItems.flatMap((id) => {
+        const spec = constants_2.BUTTONS[id];
+        if (!spec)
+            return [];
+        const base = {
+            id,
+            beforeContent: spec?.icon,
+            content: { label: t(spec.nameKey), caption: spec.hotkey },
+            onClick: () => handleMoreSelect(id),
+            'data-test-id': (0, constants_1.toolbarButtonTestId)(id),
+        };
+        if (id === constants_1.TOOLBAR_ITEM.Table) {
+            return [
+                {
+                    ...base,
+                    type: 'next-list',
+                    items: toolbarTableItems,
+                },
+            ];
+        }
+        return [
+            {
+                ...base,
+                beforeContent: spec.icon,
+                content: { label: t(spec.nameKey), caption: spec.hotkey },
+                checked: api.isActive(id),
+            },
+        ];
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: styles_module_scss_1.default.root, children: [(0, jsx_runtime_1.jsxs)(helperComponents_1.Buttons, { children: [presentGroups.map((group, gi) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [gi > 0 && (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonsDivider, {}), (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonsGroup, { children: group.map(renderItem) })] }, `g-${gi}`))), overflowItems.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(helperComponents_1.ButtonsDivider, {}), (0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', container: portalContext, open: moreOpen, onOpenChange: setMoreOpen, placement: 'bottom-end', marker: false, items: moreItems, triggerElemRef: moreButtonRef, triggerClassName: styles_module_scss_1.default.tooltipTrigger, "data-test-id": constants_1.TEST_IDS.toolbarMoreList, children: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: t('toolbar.more'), triggerClassName: styles_module_scss_1.default.tooltipTrigger, children: (0, jsx_runtime_1.jsx)(helperComponents_1.PrivateButton, { icon: (0, jsx_runtime_1.jsx)(system_1.MoreSVG, {}), "data-test-id": constants_1.TEST_IDS.toolbarMore, "aria-label": t('toolbar.more'), "aria-haspopup": 'menu', "aria-expanded": moreOpen }) }) })] }))] }), (0, jsx_runtime_1.jsx)(helperComponents_1.CustomizeTableModal, { open: toolbarItemModal === 'table', onClose: closeToolbarItemModal, onSubmit: handleSubmitCustomizeTable }), (0, jsx_runtime_1.jsx)(helperComponents_1.LinkModal, { open: toolbarItemModal === 'link', initial: linkInitial, onClose: closeToolbarItemModal, onSubmit: handleLinkSubmit }), (0, jsx_runtime_1.jsx)(helperComponents_1.ImageModal, { open: toolbarItemModal === 'image', onClose: closeToolbarItemModal, onSubmit: handleImageSubmit })] }));
+}

package/dist/cjs/components/Toolbar/constants.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { MarkdownMessages } from '../../locale';
+import { ToolbarItemId } from '../../types';
+export declare const GROUPS: ToolbarItemId[][];
+type ButtonSpec = {
+    icon: ReactNode;
+    nameKey: `toolbar.${Extract<keyof MarkdownMessages['toolbar'], string>}`;
+    /** Хоткей для строки в More-списке. Только реально работающие биндинги TipTap. */
+    hotkey?: string;
+};
+export declare const BUTTONS: Record<ToolbarItemId, ButtonSpec>;
+export declare const DEFAULT_TOOLBAR: ToolbarItemId[];
+export {};

package/dist/cjs/components/Toolbar/constants.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_TOOLBAR = exports.BUTTONS = exports.GROUPS = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const constants_1 = require("../../constants");
+// Группировка: text-style | inline | lists | blocks | media.
+exports.GROUPS = [
+    [constants_1.TOOLBAR_ITEM.Heading, constants_1.TOOLBAR_ITEM.Bold, constants_1.TOOLBAR_ITEM.Italic, constants_1.TOOLBAR_ITEM.Strikethrough],
+    [constants_1.TOOLBAR_ITEM.Link, constants_1.TOOLBAR_ITEM.InlineCode, constants_1.TOOLBAR_ITEM.BulletList, constants_1.TOOLBAR_ITEM.OrderedList],
+    [constants_1.TOOLBAR_ITEM.BlockQuote, constants_1.TOOLBAR_ITEM.BlockCode, constants_1.TOOLBAR_ITEM.Table, constants_1.TOOLBAR_ITEM.Image],
+];
+exports.BUTTONS = {
+    [constants_1.TOOLBAR_ITEM.Heading]: { icon: (0, jsx_runtime_1.jsx)(system_1.HeadingSVG, {}), nameKey: 'toolbar.heading' },
+    [constants_1.TOOLBAR_ITEM.Bold]: { icon: (0, jsx_runtime_1.jsx)(system_1.BoldSVG, {}), nameKey: 'toolbar.bold', hotkey: 'Ctrl+B' },
+    [constants_1.TOOLBAR_ITEM.Italic]: { icon: (0, jsx_runtime_1.jsx)(system_1.ItalicSVG, {}), nameKey: 'toolbar.italic', hotkey: 'Ctrl+I' },
+    [constants_1.TOOLBAR_ITEM.Strikethrough]: { icon: (0, jsx_runtime_1.jsx)(system_1.StrikeSVG, {}), nameKey: 'toolbar.strikethrough', hotkey: 'Ctrl+Shift+X' },
+    [constants_1.TOOLBAR_ITEM.Link]: { icon: (0, jsx_runtime_1.jsx)(system_1.LinkSVG, {}), nameKey: 'toolbar.link', hotkey: 'Ctrl+K' },
+    [constants_1.TOOLBAR_ITEM.Image]: { icon: (0, jsx_runtime_1.jsx)(system_1.ImageSVG, {}), nameKey: 'toolbar.image', hotkey: 'Ctrl+Shift+I' },
+    [constants_1.TOOLBAR_ITEM.Table]: { icon: (0, jsx_runtime_1.jsx)(system_1.TableSVG, {}), nameKey: 'toolbar.table' },
+    [constants_1.TOOLBAR_ITEM.InlineCode]: { icon: (0, jsx_runtime_1.jsx)(system_1.InlineCodeSVG, {}), nameKey: 'toolbar.inlineCode', hotkey: 'Ctrl+E' },
+    [constants_1.TOOLBAR_ITEM.BulletList]: { icon: (0, jsx_runtime_1.jsx)(system_1.BulletListSVG, {}), nameKey: 'toolbar.bulletList', hotkey: 'Ctrl+Shift+8' },
+    [constants_1.TOOLBAR_ITEM.OrderedList]: { icon: (0, jsx_runtime_1.jsx)(system_1.OrderedListSVG, {}), nameKey: 'toolbar.orderedList', hotkey: 'Ctrl+Shift+7' },
+    [constants_1.TOOLBAR_ITEM.BlockQuote]: { icon: (0, jsx_runtime_1.jsx)(system_1.BlockQuoteSVG, {}), nameKey: 'toolbar.blockQuote', hotkey: 'Ctrl+Shift+B' },
+    [constants_1.TOOLBAR_ITEM.BlockCode]: { icon: (0, jsx_runtime_1.jsx)(system_1.BlockCodeSVG, {}), nameKey: 'toolbar.blockCode', hotkey: 'Ctrl+Alt+C' },
+};
+exports.DEFAULT_TOOLBAR = [
+    constants_1.TOOLBAR_ITEM.Heading,
+    constants_1.TOOLBAR_ITEM.Bold,
+    constants_1.TOOLBAR_ITEM.Italic,
+    constants_1.TOOLBAR_ITEM.Strikethrough,
+    constants_1.TOOLBAR_ITEM.Link,
+    constants_1.TOOLBAR_ITEM.InlineCode,
+    constants_1.TOOLBAR_ITEM.BulletList,
+    constants_1.TOOLBAR_ITEM.OrderedList,
+    constants_1.TOOLBAR_ITEM.BlockQuote,
+    constants_1.TOOLBAR_ITEM.BlockCode,
+    constants_1.TOOLBAR_ITEM.Table,
+    constants_1.TOOLBAR_ITEM.Image,
+];

package/dist/cjs/components/Toolbar/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useToolbarHotkeys';
+export * from './useToolbarOverflow';

package/dist/cjs/components/Toolbar/hooks/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useToolbarHotkeys"), exports);
+__exportStar(require("./useToolbarOverflow"), exports);

package/dist/cjs/components/Toolbar/hooks/useToolbarHotkeys.d.ts

@@ -0,0 +1,21 @@
+import { RefObject } from 'react';
+import { ToolbarApi } from '../../../toolbarApi';
+import { ToolbarItemId } from '../../../types';
+type ToolbarHotkeysParams = {
+    /** Корень тулбара (из useToolbarOverflow) — от его родителя ищем scope-предка для listener'а. */
+    rootRef: RefObject<HTMLDivElement | null>;
+    items: ToolbarItemId[];
+    api: ToolbarApi;
+    /** Действие кнопки Link (открыть модалку или вставить сырой markdown). */
+    onLink(): void;
+    /** Действие кнопки Image (открыть модалку). */
+    onImage(): void;
+};
+/**
+ * Вешает хоткеи тулбара на корень редактора (scope), а не на конкретный input:
+ * - Link/Image открывают UI (модалку/пикер), а не команды TipTap → биндим всегда;
+ * - остальные кнопки (bold/italic/…) в WYSIWYG обрабатывает сам keymap TipTap, а в raw-режиме
+ *   textarea их не знает, поэтому в raw биндим все hotkey'и на api-команды вручную.
+ */
+export declare function useToolbarHotkeys({ rootRef, items, api, onLink, onImage }: ToolbarHotkeysParams): void;
+export {};

package/dist/cjs/components/Toolbar/hooks/useToolbarHotkeys.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToolbarHotkeys = useToolbarHotkeys;
+const react_1 = require("react");
+const constants_1 = require("../../../constants");
+const constants_2 = require("../constants");
+// Сопоставляет KeyboardEvent с хоткеем вида 'Ctrl+Shift+I' (Cmd подменяет Ctrl на macOS).
+const matchesHotkey = (event, hotkey) => {
+    const parts = hotkey.toLowerCase().split('+');
+    const last = parts[parts.length - 1];
+    // С Shift цифры дают символ (Shift+8 → '*'), поэтому помимо event.key матчим и по event.code
+    // (Digit8 / KeyB) — иначе Ctrl+Shift+8/7 не распознались бы.
+    const code = event.code.toLowerCase();
+    const keyMatches = event.key.toLowerCase() === last || code === `key${last}` || code === `digit${last}`;
+    return ((event.ctrlKey || event.metaKey) === parts.includes('ctrl') &&
+        event.shiftKey === parts.includes('shift') &&
+        event.altKey === parts.includes('alt') &&
+        keyMatches);
+};
+/**
+ * Вешает хоткеи тулбара на корень редактора (scope), а не на конкретный input:
+ * - Link/Image открывают UI (модалку/пикер), а не команды TipTap → биндим всегда;
+ * - остальные кнопки (bold/italic/…) в WYSIWYG обрабатывает сам keymap TipTap, а в raw-режиме
+ *   textarea их не знает, поэтому в raw биндим все hotkey'и на api-команды вручную.
+ */
+function useToolbarHotkeys({ rootRef, items, api, onLink, onImage }) {
+    (0, react_1.useEffect)(() => {
+        // Ищем scope от РОДИТЕЛЯ тулбара: у самого toolbar-root есть data-test-id, и closest вернул бы
+        // его же — а input (textarea/ProseMirror) лежит рядом, не внутри тулбара. Нужен общий предок
+        // (оболочка поля), который содержит и тулбар, и input, чтобы keydown из input всплывал к нему.
+        const scope = rootRef.current?.parentElement?.closest('[data-test-id]');
+        if (!scope)
+            return;
+        const bindings = [];
+        for (const id of items) {
+            const hotkey = constants_2.BUTTONS[id]?.hotkey;
+            if (!hotkey)
+                continue;
+            if (id === constants_1.TOOLBAR_ITEM.Link) {
+                bindings.push({ hotkey, action: onLink });
+            }
+            else if (id === constants_1.TOOLBAR_ITEM.Image) {
+                bindings.push({ hotkey, action: onImage });
+            }
+            else if (api.mode === 'raw') {
+                bindings.push({ hotkey, action: () => api.toggle(id) });
+            }
+        }
+        const handleKeyDown = (event) => {
+            const hit = bindings.find(binding => matchesHotkey(event, binding.hotkey));
+            if (hit) {
+                event.preventDefault();
+                hit.action();
+            }
+        };
+        scope.addEventListener('keydown', handleKeyDown);
+        return () => scope.removeEventListener('keydown', handleKeyDown);
+    }, [items, api, onLink, onImage, rootRef]);
+}

package/dist/cjs/components/Toolbar/hooks/useToolbarOverflow.d.ts

@@ -0,0 +1,14 @@
+import { ToolbarItemId } from '../../../types';
+/**
+ * Считает, сколько кнопок тулбара помещается по ширине, остальные — в overflow («Ещё»).
+ * Возвращает `rootRef` (корень тулбара, под ResizeObserver), `moreButtonRef` (для измерения
+ * «веса» overflow-группы) и `visibleCount` (число видимых кнопок).
+ *
+ * Края слотов кэшируются в полной раскладке (все кнопки, без More) и переиспользуются при
+ * пересчёте — поэтому не нужно арифметически приближать гэпы/дивайдеры.
+ */
+export declare function useToolbarOverflow(items: ToolbarItemId[]): {
+    rootRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    moreButtonRef: import("react").RefObject<HTMLElement>;
+    visibleCount: number;
+};