@gravity-ui/markdown-editor 13.5.3 → 13.6.1

package/build/cjs/bundle/Editor.js

@@ -241,15 +241,18 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
         }
         return this.currentEditor.moveCursor(position);
     }
-    moveCursorToLine(line) {
+    moveCursorToLine(/** 0-based line number */ line) {
         const mode = this.currentMode;
         switch (mode) {
             case 'markup': {
-                const lineNumber = line + 1;
                 const view = this.markupEditor.cm;
-                if (lineNumber > 0 && lineNumber <= view.state.doc.lines) {
-                    view.dispatch({ selection: { anchor: view.state.doc.line(lineNumber).from } });
-                }
+                let cmLine = line + 1; // lines in codemirror is 1-based
+                cmLine = Math.max(cmLine, 1);
+                cmLine = Math.min(cmLine, view.state.doc.lines);
+                view.dispatch({
+                    scrollIntoView: true,
+                    selection: { anchor: view.state.doc.line(cmLine).from },
+                });
                 break;
             }
             case 'wysiwyg': {

package/build/cjs/bundle/config/icons.d.ts

@@ -1,5 +1,5 @@
 import { ToolbarIconData } from '../../toolbar/types';
-declare type Icon = 'undo' | 'redo' | 'bold' | 'italic' | 'underline' | 'strikethrough' | 'mono' | 'mark' | 'textColor' | 'text' | 'headline' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'bulletList' | 'orderedList' | 'sink' | 'lift' | 'cut' | 'note' | 'code' | 'codeBlock' | 'link' | 'image' | 'table' | 'quote' | 'checklist' | 'horizontalRule' | 'file' | 'functionInline' | 'functionBlock' | 'emoji' | 'tabs' | 'mermaid' | 'html';
+declare type Icon = 'undo' | 'redo' | 'bold' | 'italic' | 'underline' | 'strikethrough' | 'mono' | 'mark' | 'textColor' | 'text' | 'headline' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'bulletList' | 'orderedList' | 'sink' | 'lift' | 'cut' | 'note' | 'code' | 'codeBlock' | 'link' | 'image' | 'table' | 'quote' | 'checklist' | 'horizontalRule' | 'file' | 'functionInline' | 'functionBlock' | 'emoji' | 'tabs' | 'mermaid' | 'html' | 'foldingHeading';
 declare type Icons = Record<Icon, ToolbarIconData>;
 export declare const icons: Icons;
 export {};

package/build/cjs/bundle/config/icons.js

@@ -41,4 +41,5 @@ exports.icons = {
     emoji: { data: icons_1.EmojiIcon },
     tabs: { data: icons_1.TabsIcon },
     mermaid: { data: icons_1.MermaidIcon },
+    foldingHeading: { data: icons_1.FoldingHeadingIcon },
 };

package/build/cjs/bundle/config/wysiwyg.d.ts

@@ -1,5 +1,5 @@
 import { ActionStorage } from 'src/core';
-import type { SelectionContextConfig } from '../../extensions/behavior/SelectionContext';
+import type { SelectionContextConfig, SelectionContextItemData } from '../../extensions/behavior/SelectionContext';
 import { ToolbarData } from '../../toolbar/Toolbar';
 import { ToolbarGroupData } from '../../toolbar/ToolbarGroup';
 import { ToolbarListButtonData } from '../../toolbar/ToolbarListButton';
@@ -49,6 +49,7 @@ export declare const wCommandMenuConfig: WToolbarItemData[];
 export declare const wHiddenData: WToolbarItemData[];
 /** prepared wysiwyg toolbar config */
 export declare const wToolbarConfig: WToolbarData;
+export declare const wToggleHeadingFoldingItemData: SelectionContextItemData;
 export declare const wSelectionMenuConfig: SelectionContextConfig;
 export declare const wMermaidItemData: WToolbarSingleItemData;
 export declare const wToolbarConfigByPreset: Record<EditorPreset, WToolbarData>;

package/build/cjs/bundle/config/wysiwyg.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wSelectionMenuConfigByPreset = exports.wHiddenDataByPreset = exports.wCommandMenuConfigByPreset = exports.wToolbarConfigByPreset = exports.wMermaidItemData = exports.wSelectionMenuConfig = exports.wToolbarConfig = exports.wHiddenData = exports.wCommandMenuConfig = exports.wYfmHtmlBlockItemData = exports.wMathListItem = exports.wMathListConfig = exports.wMathBlockItemData = exports.wTabsItemData = exports.wMathInlineItemData = exports.wFileItemData = exports.wEmojiItemData = exports.wHruleItemData = exports.wImageItemData = exports.wCodeListConfig = exports.wCodeBlockItemData = exports.wCodeItemData = exports.wTableItemData = exports.wNoteItemData = exports.wListMoveListConfig = exports.wCutItemData = exports.wQuoteItemData = exports.wLinkItemData = exports.wCheckboxItemData = exports.wListsListConfig = exports.wHeadingListConfig = exports.wTextItemData = exports.wBiusGroupConfig = exports.wMarkedItemData = exports.wMonospaceItemData = exports.wStrikethroughItemData = exports.wUnderlineItemData = exports.wItalicItemData = exports.wBoldItemData = exports.wHistoryGroupConfig = void 0;
+exports.wSelectionMenuConfigByPreset = exports.wHiddenDataByPreset = exports.wCommandMenuConfigByPreset = exports.wToolbarConfigByPreset = exports.wMermaidItemData = exports.wSelectionMenuConfig = exports.wToggleHeadingFoldingItemData = exports.wToolbarConfig = exports.wHiddenData = exports.wCommandMenuConfig = exports.wYfmHtmlBlockItemData = exports.wMathListItem = exports.wMathListConfig = exports.wMathBlockItemData = exports.wTabsItemData = exports.wMathInlineItemData = exports.wFileItemData = exports.wEmojiItemData = exports.wHruleItemData = exports.wImageItemData = exports.wCodeListConfig = exports.wCodeBlockItemData = exports.wCodeItemData = exports.wTableItemData = exports.wNoteItemData = exports.wListMoveListConfig = exports.wCutItemData = exports.wQuoteItemData = exports.wLinkItemData = exports.wCheckboxItemData = exports.wListsListConfig = exports.wHeadingListConfig = exports.wTextItemData = exports.wBiusGroupConfig = exports.wMarkedItemData = exports.wMonospaceItemData = exports.wStrikethroughItemData = exports.wUnderlineItemData = exports.wItalicItemData = exports.wBoldItemData = exports.wHistoryGroupConfig = void 0;
 const extensions_1 = require("../../extensions");
 const hints_1 = require("../../i18n/hints");
 const menubar_1 = require("../../i18n/menubar");
@@ -443,6 +443,17 @@ exports.wToolbarConfig = [
     ],
     [exports.wImageItemData, exports.wFileItemData, exports.wTableItemData, exports.wCheckboxItemData],
 ];
+exports.wToggleHeadingFoldingItemData = {
+    id: 'folding-heading',
+    type: types_1.ToolbarDataType.SingleButton,
+    icon: icons_1.icons.foldingHeading,
+    title: () => (0, menubar_1.i18n)('folding-heading'),
+    hint: () => (0, menubar_1.i18n)('folding-heading_hint'),
+    isActive: (editor) => { var _a, _b; return (_b = (_a = editor.actions.toggleHeadingFolding) === null || _a === void 0 ? void 0 : _a.isActive()) !== null && _b !== void 0 ? _b : false; },
+    isEnable: (editor) => { var _a, _b; return (_b = (_a = editor.actions.toggleHeadingFolding) === null || _a === void 0 ? void 0 : _a.isEnable()) !== null && _b !== void 0 ? _b : false; },
+    exec: (editor) => editor.actions.toggleHeadingFolding.run(),
+    condition: 'enabled',
+};
 const textContextItemData = {
     id: 'text',
     type: types_1.ToolbarDataType.ReactComponent,
@@ -456,7 +467,7 @@ const textContextItemData = {
     },
 };
 exports.wSelectionMenuConfig = [
-    [textContextItemData],
+    [exports.wToggleHeadingFoldingItemData, textContextItemData],
     [...exports.wBiusGroupConfig, exports.wCodeItemData],
     [
         {

package/build/cjs/extensions/yfm/FoldingHeading/FoldingHeading.d.ts

@@ -0,0 +1,12 @@
+import type { Action, ExtensionAuto } from '../../../core';
+import '@diplodoc/folding-headings-extension/runtime/styles.css';
+declare const action = "toggleHeadingFolding";
+export declare const FoldingHeading: ExtensionAuto;
+declare global {
+    namespace WysiwygEditor {
+        interface Actions {
+            [action]: Action;
+        }
+    }
+}
+export {};

package/build/cjs/extensions/yfm/FoldingHeading/FoldingHeading.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FoldingHeading = void 0;
+const FoldingHeadingSpec_1 = require("./FoldingHeadingSpec");
+const actions_1 = require("./actions");
+const commands_1 = require("./commands");
+const input_rules_1 = require("./input-rules");
+const Folding_1 = require("./plugins/Folding");
+const utils_1 = require("./utils");
+require("@diplodoc/folding-headings-extension/runtime/styles.css");
+const action = 'toggleHeadingFolding';
+const FoldingHeading = (builder) => {
+    builder.use(FoldingHeadingSpec_1.FoldingHeadingSpecs);
+    builder.addAction(action, () => actions_1.toggleHeadingFoldingAction);
+    builder.addInputRules(({ schema }) => ({ rules: [(0, input_rules_1.foldingHeadingRule)((0, utils_1.headingType)(schema), 6)] }));
+    builder.addKeymap(() => ({
+        Enter: commands_1.openHeadingAndCreateParagraphAfterIfCursorAtEndOfHeading,
+        Backspace: commands_1.removeFoldingIfCursorAtStartOfHeading,
+    }), builder.Priority.High);
+    builder.addPlugin(Folding_1.foldingPlugin);
+};
+exports.FoldingHeading = FoldingHeading;

package/build/cjs/extensions/yfm/FoldingHeading/FoldingHeadingSpec/FoldingHeadingSpecs.d.ts

@@ -0,0 +1,2 @@
+import type { ExtensionAuto } from '../../../../core';
+export declare const FoldingHeadingSpecs: ExtensionAuto;

package/build/cjs/extensions/yfm/FoldingHeading/FoldingHeadingSpec/FoldingHeadingSpecs.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FoldingHeadingSpecs = void 0;
+const folding_headings_extension_1 = require("@diplodoc/folding-headings-extension");
+const skip_heading_sections_1 = require("./md/skip-heading-sections");
+const FoldingHeadingSpecs = (builder) => {
+    builder.configureMd((md) => md.use((0, folding_headings_extension_1.transform)({ bundle: false })).use(skip_heading_sections_1.skipSectionsPlugin));
+};
+exports.FoldingHeadingSpecs = FoldingHeadingSpecs;

package/build/cjs/extensions/yfm/FoldingHeading/FoldingHeadingSpec/const.d.ts

@@ -0,0 +1,11 @@
+export declare const TokenType: Pick<{
+    readonly Heading: "heading";
+    readonly HeadingOpen: "heading_open";
+    readonly HeadingClose: "heading_close";
+    readonly Section: "heading_section";
+    readonly SectionOpen: "heading_section_open";
+    readonly SectionClose: "heading_section_close";
+    readonly Content: "heading_section_content";
+    readonly ContentOpen: "heading_section_content_open";
+    readonly ContentClose: "heading_section_content_close";
+}, "Heading" | "Section" | "Content">;

package/build/cjs/extensions/yfm/FoldingHeading/FoldingHeadingSpec/const.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokenType = void 0;
+const folding_headings_extension_1 = require("@diplodoc/folding-headings-extension");
+exports.TokenType = folding_headings_extension_1.TokenType;

package/build/cjs/extensions/yfm/FoldingHeading/FoldingHeadingSpec/index.d.ts

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

package/build/cjs/extensions/yfm/FoldingHeading/FoldingHeadingSpec/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./FoldingHeadingSpecs"), exports);

package/build/cjs/extensions/yfm/FoldingHeading/FoldingHeadingSpec/md/skip-heading-sections.d.ts

@@ -0,0 +1,3 @@
+import type { PluginSimple } from 'markdown-it';
+/** Filter heading section tokens, which are not needed in prosemirror-document */
+export declare const skipSectionsPlugin: PluginSimple;

package/build/cjs/extensions/yfm/FoldingHeading/FoldingHeadingSpec/md/skip-heading-sections.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.skipSectionsPlugin = void 0;
+const folding_headings_extension_1 = require("@diplodoc/folding-headings-extension");
+const ignoreTokenTypes = [
+    folding_headings_extension_1.TokenType.SectionOpen,
+    folding_headings_extension_1.TokenType.SectionClose,
+    folding_headings_extension_1.TokenType.ContentOpen,
+    folding_headings_extension_1.TokenType.ContentClose,
+];
+/** Filter heading section tokens, which are not needed in prosemirror-document */
+const skipSectionsPlugin = (md) => {
+    md.core.ruler.push('skip-heading-sections', (state) => {
+        state.tokens = state.tokens.filter((token) => !ignoreTokenTypes.includes(token.type));
+    });
+};
+exports.skipSectionsPlugin = skipSectionsPlugin;

package/build/cjs/extensions/yfm/FoldingHeading/actions.d.ts

@@ -0,0 +1,2 @@
+import type { ActionSpec } from '../../../core';
+export declare const toggleHeadingFoldingAction: ActionSpec;

package/build/cjs/extensions/yfm/FoldingHeading/actions.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toggleHeadingFoldingAction = void 0;
+const commands_1 = require("./commands");
+const utils_1 = require("./utils");
+exports.toggleHeadingFoldingAction = {
+    isActive: (state) => (0, utils_1.hasFolding)(state.selection),
+    isEnable: commands_1.toggleFoldingOfHeading,
+    run: commands_1.toggleFoldingOfHeading,
+};

package/build/cjs/extensions/yfm/FoldingHeading/commands/index.d.ts

@@ -0,0 +1,3 @@
+export * from './removeFoldingIfCursorAtStartOfHeading';
+export * from './toggleFoldingOfHeading';
+export * from './openHeadingAndCreateParagraphAfterIfCursorAtEndOfHeading';

package/build/cjs/extensions/yfm/FoldingHeading/commands/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./removeFoldingIfCursorAtStartOfHeading"), exports);
+tslib_1.__exportStar(require("./toggleFoldingOfHeading"), exports);
+tslib_1.__exportStar(require("./openHeadingAndCreateParagraphAfterIfCursorAtEndOfHeading"), exports);

package/build/cjs/extensions/yfm/FoldingHeading/commands/openHeadingAndCreateParagraphAfterIfCursorAtEndOfHeading.d.ts

@@ -0,0 +1,2 @@
+import { Command } from 'prosemirror-state';
+export declare const openHeadingAndCreateParagraphAfterIfCursorAtEndOfHeading: Command;

package/build/cjs/extensions/yfm/FoldingHeading/commands/openHeadingAndCreateParagraphAfterIfCursorAtEndOfHeading.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openHeadingAndCreateParagraphAfterIfCursorAtEndOfHeading = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const selection_1 = require("../../../../utils/selection");
+const specs_1 = require("../../../base/specs");
+const const_1 = require("../const");
+const utils_1 = require("../utils");
+const openHeadingAndCreateParagraphAfterIfCursorAtEndOfHeading = (state, dispatch) => {
+    const $cursor = get$CursorAtBlockEnd(state.selection);
+    if (!$cursor || !(0, utils_1.isFoldedHeading)($cursor.parent))
+        return false;
+    if (dispatch) {
+        const tr = state.tr
+            .setNodeAttribute($cursor.before(), const_1.YfmHeadingAttr.Folding, false)
+            .insert($cursor.after(), (0, specs_1.pType)(state.schema).createAndFill());
+        dispatch(tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, $cursor.after() + 1)).scrollIntoView());
+    }
+    return true;
+};
+exports.openHeadingAndCreateParagraphAfterIfCursorAtEndOfHeading = openHeadingAndCreateParagraphAfterIfCursorAtEndOfHeading;
+function get$CursorAtBlockEnd(selection) {
+    const $cursor = (0, selection_1.get$Cursor)(selection);
+    if (!$cursor || $cursor.parent.isInline || $cursor.parentOffset < $cursor.parent.content.size)
+        return null;
+    return $cursor;
+}

package/build/cjs/extensions/yfm/FoldingHeading/commands/removeFoldingIfCursorAtStartOfHeading.d.ts

@@ -0,0 +1,2 @@
+import type { Command } from 'prosemirror-state';
+export declare const removeFoldingIfCursorAtStartOfHeading: Command;

package/build/cjs/extensions/yfm/FoldingHeading/commands/removeFoldingIfCursorAtStartOfHeading.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeFoldingIfCursorAtStartOfHeading = void 0;
+const selection_1 = require("../../../../utils/selection");
+const const_1 = require("../const");
+const utils_1 = require("../utils");
+const removeFoldingIfCursorAtStartOfHeading = (state, dispatch) => {
+    const $cursor = (0, selection_1.get$Cursor)(state.selection);
+    if (!$cursor)
+        return false;
+    if ($cursor.parentOffset === 0 && (0, utils_1.isFoldingHeading)($cursor.parent)) {
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch(state.tr.setNodeAttribute($cursor.before(), const_1.YfmHeadingAttr.Folding, null));
+        return true;
+    }
+    return false;
+};
+exports.removeFoldingIfCursorAtStartOfHeading = removeFoldingIfCursorAtStartOfHeading;

package/build/cjs/extensions/yfm/FoldingHeading/commands/toggleFoldingOfHeading.d.ts

@@ -0,0 +1,2 @@
+import type { Command } from 'prosemirror-state';
+export declare const toggleFoldingOfHeading: Command;

package/build/cjs/extensions/yfm/FoldingHeading/commands/toggleFoldingOfHeading.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toggleFoldingOfHeading = void 0;
+const specs_1 = require("../../../base/specs");
+const const_1 = require("../const");
+const utils_1 = require("../utils");
+const toggleFoldingOfHeading = (state, dispatch) => {
+    if (!(0, utils_1.insideHeading)(state.selection))
+        return false;
+    if (dispatch) {
+        const { $head } = state.selection;
+        const folding = (0, utils_1.isFoldingHeading)($head.parent);
+        const level = (0, utils_1.parseLevel)($head.parent);
+        const tr = state.tr.setNodeAttribute($head.before(), const_1.YfmHeadingAttr.Folding, folding ? null : false);
+        if (!folding) {
+            // insert empty paragraph if content of new folding heading is empty
+            const nextNode = $head.node(-1).maybeChild($head.indexAfter(-1));
+            if (!nextNode || ((0, utils_1.isFoldingHeading)(nextNode) && (0, utils_1.parseLevel)(nextNode) <= level)) {
+                tr.insert($head.after(), (0, specs_1.pType)(state.schema).create());
+            }
+        }
+        dispatch(tr);
+    }
+    return true;
+};
+exports.toggleFoldingOfHeading = toggleFoldingOfHeading;

package/build/cjs/extensions/yfm/FoldingHeading/const.d.ts

@@ -0,0 +1 @@
+export { YfmHeadingAttr, headingNodeName, type HeadingLevel } from '../YfmHeading/const';

package/build/cjs/extensions/yfm/FoldingHeading/const.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headingNodeName = exports.YfmHeadingAttr = void 0;
+var const_1 = require("../YfmHeading/const");
+Object.defineProperty(exports, "YfmHeadingAttr", { enumerable: true, get: function () { return const_1.YfmHeadingAttr; } });
+Object.defineProperty(exports, "headingNodeName", { enumerable: true, get: function () { return const_1.headingNodeName; } });

package/build/cjs/extensions/yfm/FoldingHeading/index.d.ts

@@ -0,0 +1 @@
+export { FoldingHeading } from './FoldingHeading';

package/build/cjs/extensions/yfm/FoldingHeading/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FoldingHeading = void 0;
+var FoldingHeading_1 = require("./FoldingHeading");
+Object.defineProperty(exports, "FoldingHeading", { enumerable: true, get: function () { return FoldingHeading_1.FoldingHeading; } });

package/build/cjs/extensions/yfm/FoldingHeading/input-rules.d.ts

@@ -0,0 +1,4 @@
+import { InputRule } from 'prosemirror-inputrules';
+import type { NodeType } from 'prosemirror-model';
+import { type HeadingLevel } from './const';
+export declare function foldingHeadingRule(nodeType: NodeType, maxLevel: HeadingLevel): InputRule;

package/build/cjs/extensions/yfm/FoldingHeading/input-rules.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.foldingHeadingRule = void 0;
+const prosemirror_inputrules_1 = require("prosemirror-inputrules");
+const inputrules_1 = require("../../../utils/inputrules");
+const specs_1 = require("../../base/specs");
+const const_1 = require("./const");
+const utils_1 = require("./utils");
+function foldingHeadingRule(nodeType, maxLevel) {
+    return new prosemirror_inputrules_1.InputRule(new RegExp('^(#{1,' + maxLevel + '})\\+\\s$'), (state, match, start, end) => {
+        if ((0, inputrules_1.hasCodeMark)(state, match, start, end))
+            return null;
+        const $start = state.doc.resolve(start);
+        if (!$start.node(-1).canReplaceWith($start.index(-1), $start.indexAfter(-1), nodeType))
+            return null;
+        const level = match[1].length;
+        const pos = $start.before();
+        const tr = state.tr.delete(start, end);
+        if (!(0, utils_1.isHeading)($start.parent))
+            tr.setNodeMarkup(pos, nodeType);
+        tr.setNodeAttribute(pos, const_1.YfmHeadingAttr.Level, level);
+        tr.setNodeAttribute(pos, const_1.YfmHeadingAttr.Folding, false);
+        // insert empty paragraph if content of new folding heading is empty
+        const nextNode = $start.node(-1).maybeChild($start.indexAfter(-1));
+        if (!nextNode || ((0, utils_1.isFoldingHeading)(nextNode) && (0, utils_1.parseLevel)(nextNode) <= level)) {
+            tr.insert(tr.mapping.map($start.after()), (0, specs_1.pType)(state.schema).create());
+        }
+        return tr;
+    });
+}
+exports.foldingHeadingRule = foldingHeadingRule;

package/build/cjs/extensions/yfm/FoldingHeading/plugins/Folding.d.ts

@@ -0,0 +1,3 @@
+import { Plugin } from 'prosemirror-state';
+import { DecorationSet } from 'prosemirror-view';
+export declare const foldingPlugin: () => Plugin<DecorationSet>;

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

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.foldingPlugin = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_transform_1 = require("prosemirror-transform");
+const prosemirror_utils_1 = require("prosemirror-utils");
+const prosemirror_view_1 = require("prosemirror-view");
+const const_1 = require("../const");
+const utils_1 = require("../utils");
+const CHANGE_META_KEY = 'folding-heading-changed';
+const foldingPlugin = () => {
+    return new prosemirror_state_1.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 && (0, utils_1.isFoldingHeading)(node) && isLeftPaddingClick(event)) {
+                    view.dispatch(view.state.tr
+                        .setNodeAttribute(nodePos, const_1.YfmHeadingAttr.Folding, !node.attrs[const_1.YfmHeadingAttr.Folding])
+                        .setMeta(CHANGE_META_KEY, true));
+                }
+            },
+        },
+    });
+};
+exports.foldingPlugin = foldingPlugin;
+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 = [prosemirror_transform_1.AddMarkStep, prosemirror_transform_1.AddNodeMarkStep, prosemirror_transform_1.DocAttrStep, prosemirror_transform_1.RemoveMarkStep, prosemirror_transform_1.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 prosemirror_transform_1.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 prosemirror_transform_1.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 = (0, prosemirror_utils_1.findChildren)(doc, utils_1.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 = (0, utils_1.isFoldedHeading)(node);
+        const nodeLevel = (0, utils_1.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 ((0, utils_1.isHeading)(child) && (0, utils_1.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 ((0, utils_1.isHeading)(child)) {
+                if ((0, utils_1.isFoldingHeading)(child)) {
+                    nextFoldingHeadingFound = true;
+                }
+                const level = (0, utils_1.parseLevel)(child);
+                if (level <= nodeLevel)
+                    break;
+                if (!hidden) {
+                    lastNonHiddenChild = { node: child, pos: childPos, level: hLevel };
+                }
+                if ((0, utils_1.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(prosemirror_view_1.Decoration.node(item.from, item.to, attrs));
+    }
+    for (const item of Object.values(separatorDecos)) {
+        decorations.push(prosemirror_view_1.Decoration.node(item.from, item.to, {
+            nodeName: 'div',
+            class: 'pm-h-folding-label',
+            'data-value': item.value,
+        }), prosemirror_view_1.Decoration.node(item.from, item.to, {
+            nodeName: 'div',
+            class: 'pm-h-folding-separator',
+        }));
+    }
+    return prosemirror_view_1.DecorationSet.create(doc, decorations);
+}

package/build/cjs/extensions/yfm/FoldingHeading/plugins/folding.css

@@ -0,0 +1,51 @@
+.pm-h-folding-hidden {
+  display: none;
+}
+
+.pm-h-folding-content {
+  padding-left: 28px;
+}
+
+.pm-h-folding-separator {
+  position: relative;
+}
+.pm-h-folding-separator::before {
+  position: absolute;
+  z-index: 1;
+  bottom: -4px;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  content: "";
+  background-color: var(--g-color-text-secondary);
+  mask-image: url('data:image/svg+xml;svg,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7.25a.75.75 0 0 0 0 1.5h5.69l-2.72 2.72a.75.75 0 1 0 1.06 1.06l4-4a.75.75 0 0 0 0-1.06l-4-4a.75.75 0 0 0-1.06 1.06l2.72 2.72zm7.47 4.22a.75.75 0 1 0 1.06 1.06l4-4a.75.75 0 0 0 0-1.06l-4-4a.75.75 0 1 0-1.06 1.06L12.94 8z" clip-rule="evenodd"/></svg>');
+  mask-size: 12px;
+  transform: translateY(80%);
+}
+.pm-h-folding-separator::after {
+  position: absolute;
+  z-index: 1;
+  bottom: -8px;
+  left: 16px;
+  display: block;
+  width: calc(100% - 16px - 56px - 6px);
+  content: "";
+  border-top: 1px dashed var(--g-color-line-generic);
+}
+
+.pm-h-folding-label::after {
+  position: absolute;
+  z-index: 1;
+  right: 2px;
+  bottom: -6px;
+  display: block;
+  padding: 0 8px;
+  content: attr(data-value);
+  color: var(--g-color-text-misc);
+  border-radius: 4px;
+  background-color: var(--g-color-base-misc-medium-hover);
+  transform: translate(0, 50%);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}

package/build/cjs/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;