@gravity-ui/markdown-editor 13.5.2 → 13.6.0

package/build/esm/extensions/yfm/FoldingHeading/plugins/Folding.js

@@ -0,0 +1,164 @@
+import { Plugin } from 'prosemirror-state';
+import { AddMarkStep, AddNodeMarkStep, DocAttrStep, RemoveMarkStep, RemoveNodeMarkStep, ReplaceStep, } from 'prosemirror-transform';
+import { findChildren } from 'prosemirror-utils';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { YfmHeadingAttr } from '../const';
+import { isFoldedHeading, isFoldingHeading, isHeading, isUnfoldedHeading, parseLevel, } from '../utils';
+import './folding.css';
+const CHANGE_META_KEY = 'folding-heading-changed';
+export const foldingPlugin = () => {
+    return new Plugin({
+        state: {
+            init: (_config, state) => buildDecosSet(state.doc),
+            apply: (tr, prev) => {
+                if (tr.getMeta(CHANGE_META_KEY)) {
+                    return buildDecosSet(tr.doc);
+                }
+                if (!tr.docChanged ||
+                    // Optimization: ignoring trs, that don't change position of blocks in doc
+                    canSafelyIgnoreTr(tr)) {
+                    return prev.map(tr.mapping, tr.doc);
+                }
+                return buildDecosSet(tr.doc);
+            },
+        },
+        props: {
+            decorations(state) {
+                return this.getState(state);
+            },
+            handleClickOn(view, _pos, node, nodePos, event, direct) {
+                if (direct && isFoldingHeading(node) && isLeftPaddingClick(event)) {
+                    view.dispatch(view.state.tr
+                        .setNodeAttribute(nodePos, YfmHeadingAttr.Folding, !node.attrs[YfmHeadingAttr.Folding])
+                        .setMeta(CHANGE_META_KEY, true));
+                }
+            },
+        },
+    });
+};
+function isLeftPaddingClick(event) {
+    const elem = event.target;
+    const leftPadding = parseInt(window.getComputedStyle(elem).paddingLeft, 10);
+    if (Number.isNaN(leftPadding))
+        return true;
+    return event.offsetX < leftPadding;
+}
+const safeSteps = [AddMarkStep, AddNodeMarkStep, DocAttrStep, RemoveMarkStep, RemoveNodeMarkStep];
+function canSafelyIgnoreTr(tr) {
+    if (isInputTr(tr) || isTextBackspaceTr(tr))
+        return true;
+    if (tr.steps.every((step) => safeSteps.some((SafeStep) => step instanceof SafeStep)))
+        return true;
+    return false;
+}
+function isInputTr(tr) {
+    if (tr.steps.length !== 1)
+        return false;
+    const [step] = tr.steps;
+    return (step instanceof ReplaceStep &&
+        step.from === step.to &&
+        step.slice.content.childCount === 1 &&
+        step.slice.content.child(0).type.name === 'text');
+}
+function isTextBackspaceTr(tr) {
+    if (tr.steps.length !== 1)
+        return false;
+    const [step] = tr.steps;
+    return step instanceof ReplaceStep && step.to - step.from === 1 && step.slice.size === 0;
+}
+// eslint-disable-next-line complexity
+function buildDecosSet(doc) {
+    var _a;
+    const contentDecos = {};
+    const separatorDecos = {};
+    const headings = findChildren(doc, isFoldingHeading, true);
+    for (const { node, pos } of headings) {
+        // don't add decorations to nested hidden headings and its content
+        if ((_a = contentDecos[pos]) === null || _a === void 0 ? void 0 : _a.hidden)
+            continue;
+        const isFolded = isFoldedHeading(node);
+        const nodeLevel = parseLevel(node);
+        const $pos = doc.resolve(pos + 1);
+        const depth = $pos.depth - 1;
+        const parent = $pos.node(depth);
+        let idx = $pos.index(depth);
+        let child = null;
+        if (isFolded) {
+            while ((child = parent.maybeChild(++idx))) {
+                if (isHeading(child) && parseLevel(child) <= nodeLevel)
+                    break;
+                const childPos = $pos.posAtIndex(idx, depth);
+                contentDecos[childPos] = {
+                    from: childPos,
+                    to: childPos + child.nodeSize,
+                    hidden: true,
+                };
+            }
+            continue;
+        }
+        let hLevel = nodeLevel;
+        let nextFoldingHeadingFound = false;
+        let hidden = false;
+        let lastNonHiddenChild = null;
+        while ((child = parent.maybeChild(++idx))) {
+            const childPos = $pos.posAtIndex(idx, depth);
+            if (isHeading(child)) {
+                if (isFoldingHeading(child)) {
+                    nextFoldingHeadingFound = true;
+                }
+                const level = parseLevel(child);
+                if (level <= nodeLevel)
+                    break;
+                if (!hidden) {
+                    lastNonHiddenChild = { node: child, pos: childPos, level: hLevel };
+                }
+                if (isUnfoldedHeading(child)) {
+                    hLevel = level;
+                    hidden = false;
+                }
+                else {
+                    hidden = true;
+                }
+            }
+            if (!hidden) {
+                lastNonHiddenChild = { node: child, pos: childPos, level: hLevel };
+            }
+            if (!nextFoldingHeadingFound) {
+                contentDecos[childPos] = {
+                    from: childPos,
+                    to: childPos + child.nodeSize,
+                    hidden: false,
+                };
+            }
+        }
+        if (lastNonHiddenChild && !separatorDecos[lastNonHiddenChild.pos]) {
+            const { pos, node, level } = lastNonHiddenChild;
+            separatorDecos[pos] = {
+                from: pos,
+                to: pos + node.nodeSize,
+                value: nodeLevel === level ? 'h' + hLevel : `h${nodeLevel}-h${hLevel}`,
+            };
+        }
+    }
+    const decorations = [];
+    for (const item of Object.values(contentDecos)) {
+        const attrs = item.hidden
+            ? { class: 'pm-h-folding-hidden' }
+            : {
+                class: 'pm-h-folding-content',
+                nodeName: 'div',
+            };
+        decorations.push(Decoration.node(item.from, item.to, attrs));
+    }
+    for (const item of Object.values(separatorDecos)) {
+        decorations.push(Decoration.node(item.from, item.to, {
+            nodeName: 'div',
+            class: 'pm-h-folding-label',
+            'data-value': item.value,
+        }), Decoration.node(item.from, item.to, {
+            nodeName: 'div',
+            class: 'pm-h-folding-separator',
+        }));
+    }
+    return DecorationSet.create(doc, decorations);
+}

package/build/esm/extensions/yfm/FoldingHeading/utils.d.ts

@@ -0,0 +1,10 @@
+import type { Node } from 'prosemirror-model';
+import type { Selection } from 'prosemirror-state';
+export { headingType } from '../../markdown/Heading/HeadingSpecs';
+export declare const insideHeading: ({ $anchor, $head }: Selection) => boolean;
+export declare const hasFolding: (sel: Selection) => boolean;
+export declare function isHeading(node: Node): boolean;
+export declare function isFoldingHeading(node: Node): boolean;
+export declare function isFoldedHeading(node: Node): boolean;
+export declare function isUnfoldedHeading(node: Node): boolean;
+export declare function parseLevel(node: Node): number;

package/build/esm/extensions/yfm/FoldingHeading/utils.js

@@ -0,0 +1,19 @@
+import { YfmHeadingAttr, headingNodeName } from './const';
+export { headingType } from '../../markdown/Heading/HeadingSpecs';
+export const insideHeading = ({ $anchor, $head }) => $anchor.sameParent($head) && isHeading($head.parent);
+export const hasFolding = (sel) => insideHeading(sel) && sel.$head.parent.attrs[YfmHeadingAttr.Folding] !== null;
+export function isHeading(node) {
+    return node.type.name === headingNodeName;
+}
+export function isFoldingHeading(node) {
+    return isHeading(node) && typeof node.attrs[YfmHeadingAttr.Folding] === 'boolean';
+}
+export function isFoldedHeading(node) {
+    return isHeading(node) && node.attrs[YfmHeadingAttr.Folding] === true;
+}
+export function isUnfoldedHeading(node) {
+    return isHeading(node) && node.attrs[YfmHeadingAttr.Folding] === false;
+}
+export function parseLevel(node) {
+    return Number.parseInt(node.attrs[YfmHeadingAttr.Level], 10);
+}

package/build/esm/extensions/yfm/YfmHeading/YfmHeadingSpecs/const.d.ts

@@ -4,5 +4,5 @@ export declare const YfmHeadingAttr: {
     readonly Level: "level";
     readonly Id: "id";
     readonly DataLine: "data-line";
-    readonly Folding: "folding";
+    readonly Folding: "folded";
 };

package/build/esm/extensions/yfm/YfmHeading/YfmHeadingSpecs/const.js

@@ -4,5 +4,5 @@ export const YfmHeadingAttr = {
     Level: headingLevelAttr,
     Id: 'id',
     DataLine: 'data-line',
-    Folding: 'folding',
+    Folding: 'folded',
 };

package/build/esm/extensions/yfm/YfmHeading/YfmHeadingSpecs/index.js

@@ -12,7 +12,7 @@ export const YfmHeadingSpecs = (builder, opts) => {
                     [YfmHeadingAttr.Id]: { default: '' },
                     [YfmHeadingAttr.Level]: { default: 1 },
                     [YfmHeadingAttr.DataLine]: { default: null },
-                    [YfmHeadingAttr.Folding]: { default: false },
+                    [YfmHeadingAttr.Folding]: { default: null },
                 },
                 content: '(text | inline)*',
                 group: 'block',
@@ -35,7 +35,7 @@ export const YfmHeadingSpecs = (builder, opts) => {
                         {
                             id: id || null,
                             [YfmHeadingAttr.DataLine]: lineNumber,
-                            [`data-${YfmHeadingAttr.Folding}`]: folding ? '' : null,
+                            [`data-${YfmHeadingAttr.Folding}`]: folding,
                         },
                         0,
                         // [
@@ -70,14 +70,14 @@ export const YfmHeadingSpecs = (builder, opts) => {
                         //     attrs[YfmHeadingAttr.Id] = slugify(tokens[index + 1].content);
                         // }
                         // attrs have id only if it explicitly specified manually
-                        return Object.assign({ [YfmHeadingAttr.Level]: Number(token.tag.slice(1)), [YfmHeadingAttr.Folding]: (_a = token.meta) === null || _a === void 0 ? void 0 : _a.folding }, attrs);
+                        return Object.assign({ [YfmHeadingAttr.Level]: Number(token.tag.slice(1)), [YfmHeadingAttr.Folding]: ((_a = token.meta) === null || _a === void 0 ? void 0 : _a.folding) === true ? true : null }, attrs);
                     },
                 },
             },
             toMd: (state, node) => {
                 const folding = node.attrs[YfmHeadingAttr.Folding];
                 const level = node.attrs[YfmHeadingAttr.Level];
-                state.write(state.repeat('#', level) + (folding ? '+' : '') + ' ');
+                state.write(state.repeat('#', level) + (typeof folding === 'boolean' ? '+' : '') + ' ');
                 state.renderInline(node);
                 const anchor = node.attrs[YfmHeadingAttr.Id];
                 if (anchor /*&& anchor !== node.firstChild?.textContent*/) {

package/build/esm/extensions/yfm/YfmHeading/YfmHeadingSpecs/utils.js

@@ -4,8 +4,16 @@ export { hType, hasParentHeading, headingRule } from '../../../markdown/Heading/
 export const getNodeAttrs = (level) => (node) => ({
     [YfmHeadingAttr.Level]: level,
     [YfmHeadingAttr.Id]: node.getAttribute('id') || '',
-    [YfmHeadingAttr.Folding]: node.hasAttribute(`data-${YfmHeadingAttr.Folding}`),
+    [YfmHeadingAttr.Folding]: getFoldingAttr(node),
 });
+function getFoldingAttr(node) {
+    const value = node.getAttribute(`data-${YfmHeadingAttr.Folding}`);
+    if (value === 'true')
+        return true;
+    if (value === 'false')
+        return false;
+    return null;
+}
 // export const slugify = (str: string) =>
 //     // same config as in yfm-transform
 //     // https://github.com/yandex-cloud/yfm-transform/blob/master/lib/plugins/anchors/index.js#L97-L100

package/build/esm/i18n/menubar/en.json

@@ -17,6 +17,8 @@
   "cut": "Cut",
   "emoji": "Emoji",
   "file": "File",
+  "folding-heading": "Collapsed section",
+  "folding-heading_hint": "The text under the heading can be collapsed or expanded",
   "heading": "Heading",
   "heading1": "Heading 1",
   "heading2": "Heading 2",

package/build/esm/i18n/menubar/index.d.ts

@@ -1,4 +1,4 @@
-export declare const i18n: <G extends "bold" | "code" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "colorify" | "mono" | "text" | "html" | "cut" | "table" | "image" | "code_inline" | "heading" | "note" | "file" | "codeblock" | "checkbox" | "emoji" | "list" | "tabs" | "math" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "undo" | "redo" | "math_inline" | "math_block" | "colorify__color_blue" | "colorify__color_default" | "colorify__color_gray" | "colorify__color_green" | "colorify__color_orange" | "colorify__color_red" | "colorify__color_violet" | "colorify__color_yellow" | "colorify__group_text" | "hrule" | "list__action_lift" | "list__action_sink" | "list_action_disabled" | "mermaid" | "more_action" | "olist" | "ulist", S extends string>(key: G | (string extends S ? S : never), params?: {
+export declare const i18n: <G extends "bold" | "code" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "colorify" | "mono" | "text" | "html" | "cut" | "table" | "image" | "code_inline" | "heading" | "note" | "file" | "codeblock" | "checkbox" | "emoji" | "list" | "tabs" | "math" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "undo" | "redo" | "math_inline" | "math_block" | "colorify__color_blue" | "colorify__color_default" | "colorify__color_gray" | "colorify__color_green" | "colorify__color_orange" | "colorify__color_red" | "colorify__color_violet" | "colorify__color_yellow" | "colorify__group_text" | "folding-heading" | "folding-heading_hint" | "hrule" | "list__action_lift" | "list__action_sink" | "list_action_disabled" | "mermaid" | "more_action" | "olist" | "ulist", S extends string>(key: G | (string extends S ? S : never), params?: {
     [key: string]: any;
 } | undefined) => S extends G ? {
     bold: string;
@@ -19,6 +19,8 @@ export declare const i18n: <G extends "bold" | "code" | "link" | "italic" | "str
     cut: string;
     emoji: string;
     file: string;
+    "folding-heading": string;
+    "folding-heading_hint": string;
     heading: string;
     heading1: string;
     heading2: string;

package/build/esm/i18n/menubar/ru.json

@@ -17,6 +17,8 @@
   "cut": "Кат",
   "emoji": "Эмодзи",
   "file": "Файл",
+  "folding-heading": "Свёрнутый раздел",
+  "folding-heading_hint": "Текст под заголовком можно свернуть или раскрыть",
   "heading": "Заголовок",
   "heading1": "Заголовок 1",
   "heading2": "Заголовок 2",

package/build/esm/icons/index.d.ts

@@ -2,4 +2,4 @@ import MermaidIcon from './Mermaid';
 import MonoIcon from './Mono';
 import TabsIcon from './Tabs';
 export { MermaidIcon, MonoIcon, TabsIcon };
-export { ArrowUturnCcwLeft as UndoIcon, ArrowUturnCwRight as RedoIcon, Bold as BoldIcon, Italic as ItalicIcon, Underline as UnderlineIcon, Strikethrough as StrikethroughIcon, FontCursor as MarkIcon, Text as TextIcon, Heading as HeadingIcon, Heading1 as Heading1Icon, Heading2 as Heading2Icon, Heading3 as Heading3Icon, Heading4 as Heading4Icon, Heading5 as Heading5Icon, Heading6 as Heading6Icon, ListUl as ListBlIcon, ListOl as ListOlIcon, TextOutdent as LiftIcon, TextIndent as SinkIcon, Font as TextColorIcon, Link as LinkIcon, QuoteClose as QuoteIcon, Scissors as CutIcon, Sticker as NoteIcon, Paperclip as FileIcon, Minus as HRuleIcon, LayoutList as TableIcon, ChevronsExpandHorizontal as IframeIcon, SquareCheck as CheckListIcon, Picture as ImageIcon, Person as UserIcon, FaceSmile as EmojiIcon, Code as CodeInlineIcon, FileCode as CodeBlockIcon, Function as FunctionInlineIcon, CurlyBracketsFunction as FunctionBlockIcon, Hashtag as AnchorIcon, SquareDashedText as BlockIcon, LayoutColumns3 as LayoutIcon, Pencil as DrawIoIcon, FolderCode as HtmlBlockIcon, } from '@gravity-ui/icons';
+export { ArrowUturnCcwLeft as UndoIcon, ArrowUturnCwRight as RedoIcon, Bold as BoldIcon, Italic as ItalicIcon, Underline as UnderlineIcon, Strikethrough as StrikethroughIcon, FontCursor as MarkIcon, Text as TextIcon, Heading as HeadingIcon, Heading1 as Heading1Icon, Heading2 as Heading2Icon, Heading3 as Heading3Icon, Heading4 as Heading4Icon, Heading5 as Heading5Icon, Heading6 as Heading6Icon, ListUl as ListBlIcon, ListOl as ListOlIcon, TextOutdent as LiftIcon, TextIndent as SinkIcon, Font as TextColorIcon, Link as LinkIcon, QuoteClose as QuoteIcon, Scissors as CutIcon, Sticker as NoteIcon, Paperclip as FileIcon, Minus as HRuleIcon, LayoutList as TableIcon, ChevronsExpandHorizontal as IframeIcon, SquareCheck as CheckListIcon, Picture as ImageIcon, Person as UserIcon, FaceSmile as EmojiIcon, Code as CodeInlineIcon, FileCode as CodeBlockIcon, Function as FunctionInlineIcon, CurlyBracketsFunction as FunctionBlockIcon, Hashtag as AnchorIcon, SquareDashedText as BlockIcon, LayoutColumns3 as LayoutIcon, Pencil as DrawIoIcon, FolderCode as HtmlBlockIcon, ArrowChevronRight as FoldingHeadingIcon, } from '@gravity-ui/icons';

package/build/esm/icons/index.js

@@ -26,4 +26,4 @@ Function as FunctionInlineIcon, CurlyBracketsFunction as FunctionBlockIcon,
 //
 Hashtag as AnchorIcon, SquareDashedText as BlockIcon, LayoutColumns3 as LayoutIcon, 
 //
-Pencil as DrawIoIcon, FolderCode as HtmlBlockIcon, } from '@gravity-ui/icons';
+Pencil as DrawIoIcon, FolderCode as HtmlBlockIcon, ArrowChevronRight as FoldingHeadingIcon, } from '@gravity-ui/icons';

package/build/esm/toolbar/ToolbarButton.js

@@ -6,10 +6,11 @@ import { isFunction } from '../lodash';
 import { ToolbarTooltipDelay } from './const';
 import './ToolbarButton.css';
 const b = cn('toolbar-button');
-export const ToolbarButtonView = React.forwardRef(function ToolbarButtonView({ icon, title, hotkey, disabledPopoverVisible = true, hintWhenDisabled, active, enabled, onClick, className, }, ref) {
+export const ToolbarButtonView = React.forwardRef(function ToolbarButtonView({ icon, title, hint, hotkey, disabledPopoverVisible = true, hintWhenDisabled, active, enabled, onClick, className, }, ref) {
     var _a;
     const disabled = !active && !enabled;
     const titleText = isFunction(title) ? title() : title;
+    const hintText = isFunction(hint) ? hint() : hint;
     const hideHintWhenDisabled = hintWhenDisabled === false || !disabledPopoverVisible || !disabled;
     const hintWhenDisabledText = typeof hintWhenDisabled === 'string'
         ? hintWhenDisabled
@@ -17,7 +18,7 @@ export const ToolbarButtonView = React.forwardRef(function ToolbarButtonView({ i
             ? hintWhenDisabled()
             : i18n('toolbar_action_disabled');
     return (React.createElement(Popover, { content: hintWhenDisabledText, disabled: hideHintWhenDisabled, tooltipContentClassName: b('action-disabled-tooltip'), placement: ['bottom'] },
-        React.createElement(ActionTooltip, { openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: titleText, hotkey: hotkey },
+        React.createElement(ActionTooltip, { openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, description: hintText, title: titleText, hotkey: hotkey },
             React.createElement(Button, { size: "m", ref: ref, selected: active, disabled: disabled, view: active ? 'normal' : 'flat', onClick: onClick, className: b(null, [className]), extraProps: { 'aria-label': titleText } },
                 React.createElement(Icon, { data: icon.data, size: (_a = icon.size) !== null && _a !== void 0 ? _a : 16 })))));
 });

package/build/esm/version.js

@@ -1,2 +1,2 @@
 /** During build process, the current version will be injected here */
-export const VERSION = typeof '13.5.2' !== 'undefined' ? '13.5.2' : 'unknown';
+export const VERSION = typeof '13.6.0' !== 'undefined' ? '13.6.0' : 'unknown';