@gravity-ui/markdown-editor 13.1.2 → 13.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @gravity-ui/markdown-editor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/markdown-editor)](https://www.npmjs.com/package/@gravity-ui/markdown-editor) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/markdown-editor/ci.yml?branch=main&label=CI)](https://github.com/gravity-ui/markdown-editor/actions/workflows/ci.yml?query=branch:main) [![Release](https://img.shields.io/github/actions/workflow/status/gravity-ui/markdown-editor/release.yml?branch=main&label=Release)](https://github.com/gravity-ui/markdown-editor/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/md-editor/)
 
-## Markdown wysiwyg and markup editor 
+## Markdown wysiwyg and markup editor
 
 MarkdownEditor is a powerful tool for working with Markdown, which combines WYSIWYG and Markup modes. This means that you can create and edit content in a convenient visual mode, as well as have full control over the markup.
 
@@ -69,5 +69,5 @@ Don't forget to call `configure()` from [UIKit](https://github.com/gravity-ui/ui
 To start the dev storybook
 
 ```shell
-npm run dev
+npm start
 ```

package/build/cjs/extensions/behavior/SelectionContext/tooltip.d.ts

@@ -2,10 +2,12 @@ import { PopupProps } from '@gravity-ui/uikit';
 import { EditorState } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { ActionStorage } from '../../../core';
-import { ToolbarGroupItemData } from '../../../toolbar';
-export declare type ContextGroupItemData = ToolbarGroupItemData<ActionStorage> & {
+import { ToolbarButtonPopupData, ToolbarGroupItemData, ToolbarSingleItemData } from '../../../toolbar';
+export declare type ContextGroupItemData = (ToolbarGroupItemData<ActionStorage> & {
     condition?: (state: EditorState) => void;
-};
+}) | ((ToolbarSingleItemData<ActionStorage> | ToolbarButtonPopupData<ActionStorage>) & {
+    condition?: 'enabled';
+});
 export declare type ContextGroupData = ContextGroupItemData[];
 export declare type ContextConfig = ContextGroupData[];
 export declare class TooltipView {

package/build/cjs/extensions/behavior/SelectionContext/tooltip.js

@@ -54,7 +54,16 @@ class TooltipView {
     getFilteredConfig() {
         return this.baseProps.show
             ? this.menuConfig
-                .map((groupData) => groupData.filter(({ condition }) => (0, lodash_1.isFunction)(condition) ? condition(this.view.state) : true))
+                .map((groupData) => groupData.filter((item) => {
+                const { condition } = item;
+                if (condition === 'enabled') {
+                    return item.isEnable(this.actions);
+                }
+                if ((0, lodash_1.isFunction)(condition)) {
+                    return condition(this.view.state);
+                }
+                return true;
+            }))
                 .filter((groupData) => Boolean(groupData.length))
             : [];
     }

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

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

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

@@ -9,4 +9,5 @@ exports.YfmHeadingAttr = {
     Level: HeadingSpecs_1.headingLevelAttr,
     Id: 'id',
     DataLine: 'data-line',
+    Folding: 'folding',
 };

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

@@ -16,6 +16,7 @@ const YfmHeadingSpecs = (builder, opts) => {
                     [const_1.YfmHeadingAttr.Id]: { default: '' },
                     [const_1.YfmHeadingAttr.Level]: { default: 1 },
                     [const_1.YfmHeadingAttr.DataLine]: { default: null },
+                    [const_1.YfmHeadingAttr.Folding]: { default: false },
                 },
                 content: '(text | inline)*',
                 group: 'block',
@@ -32,11 +33,13 @@ const YfmHeadingSpecs = (builder, opts) => {
                 toDOM(node) {
                     const id = node.attrs[const_1.YfmHeadingAttr.Id];
                     const lineNumber = node.attrs[const_1.YfmHeadingAttr.DataLine];
+                    const folding = node.attrs[const_1.YfmHeadingAttr.Folding];
                     return [
                         'h' + node.attrs[const_1.YfmHeadingAttr.Level],
                         {
                             id: id || null,
                             [const_1.YfmHeadingAttr.DataLine]: lineNumber,
+                            [`data-${const_1.YfmHeadingAttr.Folding}`]: folding ? '' : null,
                         },
                         0,
                         // [
@@ -61,6 +64,7 @@ const YfmHeadingSpecs = (builder, opts) => {
                     name: const_1.headingNodeName,
                     type: 'block',
                     getAttrs: (token) => {
+                        var _a;
                         if (token.type.endsWith('_close'))
                             return {};
                         const attrs = Object.fromEntries(token.attrs || []);
@@ -70,12 +74,14 @@ const YfmHeadingSpecs = (builder, opts) => {
                         //     attrs[YfmHeadingAttr.Id] = slugify(tokens[index + 1].content);
                         // }
                         // attrs have id only if it explicitly specified manually
-                        return Object.assign({ [const_1.YfmHeadingAttr.Level]: Number(token.tag.slice(1)) }, attrs);
+                        return Object.assign({ [const_1.YfmHeadingAttr.Level]: Number(token.tag.slice(1)), [const_1.YfmHeadingAttr.Folding]: (_a = token.meta) === null || _a === void 0 ? void 0 : _a.folding }, attrs);
                     },
                 },
             },
             toMd: (state, node) => {
-                state.write(state.repeat('#', node.attrs[const_1.YfmHeadingAttr.Level]) + ' ');
+                const folding = node.attrs[const_1.YfmHeadingAttr.Folding];
+                const level = node.attrs[const_1.YfmHeadingAttr.Level];
+                state.write(state.repeat('#', level) + (folding ? '+' : '') + ' ');
                 state.renderInline(node);
                 const anchor = node.attrs[const_1.YfmHeadingAttr.Id];
                 if (anchor /*&& anchor !== node.firstChild?.textContent*/) {

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

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "headingRule", { enumerable: true, get: function
 const getNodeAttrs = (level) => (node) => ({
     [const_1.YfmHeadingAttr.Level]: level,
     [const_1.YfmHeadingAttr.Id]: node.getAttribute('id') || '',
+    [const_1.YfmHeadingAttr.Folding]: node.hasAttribute(`data-${const_1.YfmHeadingAttr.Folding}`),
 });
 exports.getNodeAttrs = getNodeAttrs;
 // export const slugify = (str: string) =>

package/build/cjs/extensions/yfm/YfmHeading/commands.js

@@ -9,15 +9,17 @@ const const_1 = require("./const");
 var commands_1 = require("../../markdown/Heading/commands");
 Object.defineProperty(exports, "resetHeading", { enumerable: true, get: function () { return commands_1.resetHeading; } });
 const toHeading = (level) => (state, dispatch, view) => {
+    const attrs = {};
     const parentHeading = (0, prosemirror_utils_1.findParentNodeOfType)((0, utils_1.hType)(state.schema))(state.selection);
-    if (parentHeading && parentHeading.node.attrs[const_1.headingLevelAttr] === level) {
-        return (0, base_1.toParagraph)(state, dispatch, view);
+    if (parentHeading) {
+        if (parentHeading.node.attrs[const_1.headingLevelAttr] === level) {
+            return (0, base_1.toParagraph)(state, dispatch, view);
+        }
+        Object.assign(attrs, parentHeading.node.attrs);
     }
     // const text = state.selection.$head.parent.textContent;
-    const attrs = {
-        // [YfmHeadingAttr.Id]: slugify(text),
-        [const_1.YfmHeadingAttr.Level]: level,
-    };
+    // attrs[YfmHeadingAttr.Id] = slugify(text);
+    attrs[const_1.YfmHeadingAttr.Level] = level;
     return (0, prosemirror_commands_1.setBlockType)((0, utils_1.hType)(state.schema), attrs)(state, dispatch);
 };
 exports.toHeading = toHeading;

package/build/cjs/markup/codemirror/gravity.js

@@ -33,4 +33,28 @@ exports.gravityTheme = view_1.EditorView.baseTheme({
     '&.cm-focused .cm-selectionBackground, &.cm-focused ::selection': {
         background: 'var(--g-color-base-misc-medium)',
     },
+    '.cm-tooltip.cm-tooltip-autocomplete': {
+        padding: '4px 0',
+        lineHeight: '24px',
+        color: 'var(--g-color-text-primary)',
+        fontFamily: 'var(--g-font-family-monospace)',
+        fontSize: 'var(--g-text-body-1-font-size)',
+        backgroundColor: 'var(--g-color-base-float)',
+        border: '1px solid var(--g-color-line-generic-solid)',
+        borderRadius: '4px',
+        '& > ul': {
+            '& > completion-section': {
+                color: 'var(--g-color-text-hint)',
+                fontWeight: 'var(--g-text-accent-font-weight)',
+                borderBottom: '1px solid var(--g-color-line-generic)',
+            },
+            '& > li:hover': {
+                backgroundColor: 'var(--g-color-base-simple-hover)',
+            },
+            '& > li[aria-selected]': {
+                backgroundColor: 'var(--g-color-base-selection)',
+                color: 'revert',
+            },
+        },
+    },
 });

package/build/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 /** During build process, the current version will be injected here */
-exports.VERSION = typeof '13.1.2' !== 'undefined' ? '13.1.2' : 'unknown';
+exports.VERSION = typeof '13.2.0' !== 'undefined' ? '13.2.0' : 'unknown';

package/build/esm/extensions/behavior/SelectionContext/tooltip.d.ts

@@ -2,10 +2,12 @@ import { PopupProps } from '@gravity-ui/uikit';
 import { EditorState } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { ActionStorage } from '../../../core';
-import { ToolbarGroupItemData } from '../../../toolbar';
-export declare type ContextGroupItemData = ToolbarGroupItemData<ActionStorage> & {
+import { ToolbarButtonPopupData, ToolbarGroupItemData, ToolbarSingleItemData } from '../../../toolbar';
+export declare type ContextGroupItemData = (ToolbarGroupItemData<ActionStorage> & {
     condition?: (state: EditorState) => void;
-};
+}) | ((ToolbarSingleItemData<ActionStorage> | ToolbarButtonPopupData<ActionStorage>) & {
+    condition?: 'enabled';
+});
 export declare type ContextGroupData = ContextGroupItemData[];
 export declare type ContextConfig = ContextGroupData[];
 export declare class TooltipView {

package/build/esm/extensions/behavior/SelectionContext/tooltip.js

@@ -5,7 +5,7 @@ import { Popup } from '@gravity-ui/uikit';
 import { isFunction } from '../../../lodash';
 import { logger } from '../../../logger';
 import { ErrorLoggerBoundary } from '../../../react-utils/ErrorBoundary';
-import { Toolbar } from '../../../toolbar';
+import { Toolbar, } from '../../../toolbar';
 import { getReactRendererFromState } from '../ReactRenderer';
 const SelectionTooltip = (_a) => {
     var { show, poppupProps } = _a, toolbarProps = __rest(_a, ["show", "poppupProps"]);
@@ -51,7 +51,16 @@ export class TooltipView {
     getFilteredConfig() {
         return this.baseProps.show
             ? this.menuConfig
-                .map((groupData) => groupData.filter(({ condition }) => isFunction(condition) ? condition(this.view.state) : true))
+                .map((groupData) => groupData.filter((item) => {
+                const { condition } = item;
+                if (condition === 'enabled') {
+                    return item.isEnable(this.actions);
+                }
+                if (isFunction(condition)) {
+                    return condition(this.view.state);
+                }
+                return true;
+            }))
                 .filter((groupData) => Boolean(groupData.length))
             : [];
     }

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

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

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

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

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

@@ -12,6 +12,7 @@ export const YfmHeadingSpecs = (builder, opts) => {
                     [YfmHeadingAttr.Id]: { default: '' },
                     [YfmHeadingAttr.Level]: { default: 1 },
                     [YfmHeadingAttr.DataLine]: { default: null },
+                    [YfmHeadingAttr.Folding]: { default: false },
                 },
                 content: '(text | inline)*',
                 group: 'block',
@@ -28,11 +29,13 @@ export const YfmHeadingSpecs = (builder, opts) => {
                 toDOM(node) {
                     const id = node.attrs[YfmHeadingAttr.Id];
                     const lineNumber = node.attrs[YfmHeadingAttr.DataLine];
+                    const folding = node.attrs[YfmHeadingAttr.Folding];
                     return [
                         'h' + node.attrs[YfmHeadingAttr.Level],
                         {
                             id: id || null,
                             [YfmHeadingAttr.DataLine]: lineNumber,
+                            [`data-${YfmHeadingAttr.Folding}`]: folding ? '' : null,
                         },
                         0,
                         // [
@@ -57,6 +60,7 @@ export const YfmHeadingSpecs = (builder, opts) => {
                     name: headingNodeName,
                     type: 'block',
                     getAttrs: (token) => {
+                        var _a;
                         if (token.type.endsWith('_close'))
                             return {};
                         const attrs = Object.fromEntries(token.attrs || []);
@@ -66,12 +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)) }, attrs);
+                        return Object.assign({ [YfmHeadingAttr.Level]: Number(token.tag.slice(1)), [YfmHeadingAttr.Folding]: (_a = token.meta) === null || _a === void 0 ? void 0 : _a.folding }, attrs);
                     },
                 },
             },
             toMd: (state, node) => {
-                state.write(state.repeat('#', node.attrs[YfmHeadingAttr.Level]) + ' ');
+                const folding = node.attrs[YfmHeadingAttr.Folding];
+                const level = node.attrs[YfmHeadingAttr.Level];
+                state.write(state.repeat('#', level) + (folding ? '+' : '') + ' ');
                 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,6 +4,7 @@ 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}`),
 });
 // export const slugify = (str: string) =>
 //     // same config as in yfm-transform

package/build/esm/extensions/yfm/YfmHeading/commands.js

@@ -5,14 +5,16 @@ import { hType } from './YfmHeadingSpecs/utils';
 import { YfmHeadingAttr, headingLevelAttr } from './const';
 export { resetHeading } from '../../markdown/Heading/commands';
 export const toHeading = (level) => (state, dispatch, view) => {
+    const attrs = {};
     const parentHeading = findParentNodeOfType(hType(state.schema))(state.selection);
-    if (parentHeading && parentHeading.node.attrs[headingLevelAttr] === level) {
-        return toParagraph(state, dispatch, view);
+    if (parentHeading) {
+        if (parentHeading.node.attrs[headingLevelAttr] === level) {
+            return toParagraph(state, dispatch, view);
+        }
+        Object.assign(attrs, parentHeading.node.attrs);
     }
     // const text = state.selection.$head.parent.textContent;
-    const attrs = {
-        // [YfmHeadingAttr.Id]: slugify(text),
-        [YfmHeadingAttr.Level]: level,
-    };
+    // attrs[YfmHeadingAttr.Id] = slugify(text);
+    attrs[YfmHeadingAttr.Level] = level;
     return setBlockType(hType(state.schema), attrs)(state, dispatch);
 };

package/build/esm/markup/codemirror/gravity.js

@@ -30,4 +30,28 @@ export const gravityTheme = EditorView.baseTheme({
     '&.cm-focused .cm-selectionBackground, &.cm-focused ::selection': {
         background: 'var(--g-color-base-misc-medium)',
     },
+    '.cm-tooltip.cm-tooltip-autocomplete': {
+        padding: '4px 0',
+        lineHeight: '24px',
+        color: 'var(--g-color-text-primary)',
+        fontFamily: 'var(--g-font-family-monospace)',
+        fontSize: 'var(--g-text-body-1-font-size)',
+        backgroundColor: 'var(--g-color-base-float)',
+        border: '1px solid var(--g-color-line-generic-solid)',
+        borderRadius: '4px',
+        '& > ul': {
+            '& > completion-section': {
+                color: 'var(--g-color-text-hint)',
+                fontWeight: 'var(--g-text-accent-font-weight)',
+                borderBottom: '1px solid var(--g-color-line-generic)',
+            },
+            '& > li:hover': {
+                backgroundColor: 'var(--g-color-base-simple-hover)',
+            },
+            '& > li[aria-selected]': {
+                backgroundColor: 'var(--g-color-base-selection)',
+                color: 'revert',
+            },
+        },
+    },
 });

package/build/esm/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.1.2",
+  "version": "13.2.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -16,7 +16,6 @@
   ],
   "scripts": {
     "start": "npm run storybook:start",
-    "dev": "npm run storybook:start",
     "clean": "gulp clean",
     "build": "gulp",
     "typecheck": "tsc -p tsconfig.json --noEmit",