@gravity-ui/markdown-editor 14.8.0 → 14.10.0

package/build/esm/modules/toolbars/presets.d.ts

@@ -0,0 +1,6 @@
+import { ToolbarsPreset } from './types';
+export declare const zero: ToolbarsPreset;
+export declare const commonmark: ToolbarsPreset;
+export declare const defaultPreset: ToolbarsPreset;
+export declare const yfm: ToolbarsPreset;
+export declare const full: ToolbarsPreset;

package/build/esm/modules/toolbars/presets.js

@@ -0,0 +1,462 @@
+import { ActionName as Action } from '../../bundle/config/action-names';
+import { ListName as List, ToolbarName as Toolbar } from './constants';
+import { boldItemMarkup, boldItemView, boldItemWysiwyg, bulletListItemMarkup, bulletListItemView, bulletListItemWysiwyg, checkboxItemMarkup, checkboxItemView, checkboxItemWysiwyg, codeBlockItemMarkup, codeBlockItemView, codeBlockItemWysiwyg, codeBlocksListItemView, codeItemMarkup, codeItemView, codeItemWysiwyg, colorifyItemMarkup, colorifyItemView, colorifyItemWysiwyg, cutItemMarkup, cutItemView, cutItemWysiwyg, emojiItemMarkup, emojiItemView, emojiItemWysiwyg, fileItemMarkup, fileItemView, fileItemWysiwyg, filePopupItemView, heading1ItemMarkup, heading1ItemView, heading1ItemWysiwyg, heading2ItemMarkup, heading2ItemView, heading2ItemWysiwyg, heading3ItemMarkup, heading3ItemView, heading3ItemWysiwyg, heading4ItemMarkup, heading4ItemView, heading4ItemWysiwyg, heading5ItemMarkup, heading5ItemView, heading5ItemWysiwyg, heading6ItemMarkup, heading6ItemView, heading6ItemWysiwyg, headingListItemView, hruleItemMarkup, hruleItemView, hruleItemWysiwyg, imageItemMarkup, imageItemView, imageItemWysiwyg, imagePopupItemView, italicItemMarkup, italicItemView, italicItemWysiwyg, liftListItemMarkup, liftListItemView, liftListItemWysiwyg, linkItemMarkup, linkItemView, linkItemWysiwyg, listsListItemView, markedItemMarkup, markedItemView, markedItemWysiwyg, monospaceItemMarkup, monospaceItemView, monospaceItemWysiwyg, noteItemMarkup, noteItemView, noteItemWysiwyg, orderedListItemMarkup, orderedListItemView, orderedListItemWysiwyg, paragraphItemMarkup, paragraphItemView, paragraphItemWisywig, quoteItemMarkup, quoteItemView, quoteItemWysiwyg, redoItemMarkup, redoItemView, redoItemWysiwyg, sinkListItemMarkup, sinkListItemView, sinkListItemWysiwyg, strikethroughItemMarkup, strikethroughItemView, tableItemMarkup, tableItemView, tableItemWysiwyg, underlineItemMarkup, underlineItemView, underlineItemWysiwyg, undoItemMarkup, undoItemView, undoItemWysiwyg, } from './items';
+// presets
+export const zero = {
+    items: {
+        [Action.undo]: {
+            view: undoItemView,
+            wysiwyg: undoItemWysiwyg,
+            markup: undoItemMarkup,
+        },
+        [Action.redo]: {
+            view: redoItemView,
+            wysiwyg: redoItemWysiwyg,
+            markup: redoItemMarkup,
+        },
+    },
+    orders: {
+        [Toolbar.wysiwygMain]: [[Action.undo, Action.redo]],
+        [Toolbar.markupMain]: [[Action.undo, Action.redo]],
+    },
+};
+export const commonmark = {
+    items: Object.assign(Object.assign({}, zero.items), { [Action.bold]: {
+            view: boldItemView,
+            wysiwyg: boldItemWysiwyg,
+            markup: boldItemMarkup,
+        }, [Action.italic]: {
+            view: italicItemView,
+            wysiwyg: italicItemWysiwyg,
+            markup: italicItemMarkup,
+        }, [List.heading]: {
+            view: headingListItemView,
+        }, [Action.paragraph]: {
+            view: paragraphItemView,
+            wysiwyg: paragraphItemWisywig,
+            markup: paragraphItemMarkup,
+        }, [Action.heading1]: {
+            view: heading1ItemView,
+            wysiwyg: heading1ItemWysiwyg,
+            markup: heading1ItemMarkup,
+        }, [Action.heading2]: {
+            view: heading2ItemView,
+            wysiwyg: heading2ItemWysiwyg,
+            markup: heading2ItemMarkup,
+        }, [Action.heading3]: {
+            view: heading3ItemView,
+            wysiwyg: heading3ItemWysiwyg,
+            markup: heading3ItemMarkup,
+        }, [Action.heading4]: {
+            view: heading4ItemView,
+            wysiwyg: heading4ItemWysiwyg,
+            markup: heading4ItemMarkup,
+        }, [Action.heading5]: {
+            view: heading5ItemView,
+            wysiwyg: heading5ItemWysiwyg,
+            markup: heading5ItemMarkup,
+        }, [Action.heading6]: {
+            view: heading6ItemView,
+            wysiwyg: heading6ItemWysiwyg,
+            markup: heading6ItemMarkup,
+        }, [List.lists]: {
+            view: listsListItemView,
+        }, [Action.bulletList]: {
+            view: bulletListItemView,
+            wysiwyg: bulletListItemWysiwyg,
+            markup: bulletListItemMarkup,
+        }, [Action.orderedList]: {
+            view: orderedListItemView,
+            wysiwyg: orderedListItemWysiwyg,
+            markup: orderedListItemMarkup,
+        }, [Action.sinkListItem]: {
+            view: sinkListItemView,
+            wysiwyg: sinkListItemWysiwyg,
+            markup: sinkListItemMarkup,
+        }, [Action.liftListItem]: {
+            view: liftListItemView,
+            wysiwyg: liftListItemWysiwyg,
+            markup: liftListItemMarkup,
+        }, [Action.link]: {
+            view: linkItemView,
+            wysiwyg: linkItemWysiwyg,
+            markup: linkItemMarkup,
+        }, [Action.quote]: {
+            view: quoteItemView,
+            wysiwyg: quoteItemWysiwyg,
+            markup: quoteItemMarkup,
+        }, [List.code]: {
+            view: codeBlocksListItemView,
+        }, [Action.codeInline]: {
+            view: codeItemView,
+            wysiwyg: codeItemWysiwyg,
+            markup: codeItemMarkup,
+        }, [Action.codeBlock]: {
+            view: codeBlockItemView,
+            wysiwyg: codeBlockItemWysiwyg,
+            markup: codeBlockItemMarkup,
+        }, [Action.horizontalRule]: {
+            view: hruleItemView,
+            wysiwyg: hruleItemWysiwyg,
+            markup: hruleItemMarkup,
+        } }),
+    orders: {
+        [Toolbar.wysiwygMain]: [
+            [Action.undo, Action.redo],
+            [Action.bold, Action.italic],
+            [
+                {
+                    id: List.heading,
+                    items: [
+                        Action.paragraph,
+                        Action.heading1,
+                        Action.heading2,
+                        Action.heading3,
+                        Action.heading4,
+                        Action.heading5,
+                        Action.heading6,
+                    ],
+                },
+                {
+                    id: List.lists,
+                    items: [
+                        Action.bulletList,
+                        Action.orderedList,
+                        Action.sinkListItem,
+                        Action.liftListItem,
+                    ],
+                },
+                Action.link,
+                Action.quote,
+                {
+                    id: List.code,
+                    items: [Action.codeInline, Action.codeBlock],
+                },
+            ],
+        ],
+        [Toolbar.markupMain]: [
+            [Action.undo, Action.redo],
+            [Action.bold, Action.italic],
+            [
+                {
+                    id: List.heading,
+                    items: [
+                        Action.paragraph,
+                        Action.heading1,
+                        Action.heading2,
+                        Action.heading3,
+                        Action.heading4,
+                        Action.heading5,
+                        Action.heading6,
+                    ],
+                },
+                {
+                    id: List.lists,
+                    items: [
+                        Action.bulletList,
+                        Action.orderedList,
+                        Action.sinkListItem,
+                        Action.liftListItem,
+                    ],
+                },
+                Action.link,
+                Action.quote,
+                {
+                    id: List.code,
+                    items: [Action.codeInline, Action.codeBlock],
+                },
+            ],
+        ],
+        [Toolbar.wysiwygHidden]: [[Action.horizontalRule]],
+        [Toolbar.markupHidden]: [[Action.horizontalRule]],
+    },
+};
+export const defaultPreset = {
+    items: Object.assign(Object.assign({}, commonmark.items), { [Action.strike]: {
+            view: strikethroughItemView,
+            wysiwyg: sinkListItemWysiwyg,
+            markup: strikethroughItemMarkup,
+        } }),
+    orders: {
+        [Toolbar.wysiwygMain]: [
+            [Action.undo, Action.redo],
+            [Action.bold, Action.italic, Action.strike],
+            [
+                {
+                    id: List.heading,
+                    items: [
+                        Action.paragraph,
+                        Action.heading1,
+                        Action.heading2,
+                        Action.heading3,
+                        Action.heading4,
+                        Action.heading5,
+                        Action.heading6,
+                    ],
+                },
+                {
+                    id: List.lists,
+                    items: [
+                        Action.bulletList,
+                        Action.orderedList,
+                        Action.sinkListItem,
+                        Action.liftListItem,
+                    ],
+                },
+                Action.link,
+                Action.quote,
+                {
+                    id: List.code,
+                    items: [Action.codeInline, Action.codeBlock],
+                },
+            ],
+        ],
+        [Toolbar.markupMain]: [
+            [Action.undo, Action.redo],
+            [Action.bold, Action.italic, Action.strike],
+            [
+                {
+                    id: List.heading,
+                    items: [
+                        Action.paragraph,
+                        Action.heading1,
+                        Action.heading2,
+                        Action.heading3,
+                        Action.heading4,
+                        Action.heading5,
+                        Action.heading6,
+                    ],
+                },
+                {
+                    id: List.lists,
+                    items: [
+                        Action.bulletList,
+                        Action.orderedList,
+                        Action.sinkListItem,
+                        Action.liftListItem,
+                    ],
+                },
+                Action.link,
+                Action.quote,
+                {
+                    id: List.code,
+                    items: [Action.codeInline, Action.codeBlock],
+                },
+            ],
+        ],
+        [Toolbar.wysiwygHidden]: [[Action.horizontalRule]],
+        [Toolbar.markupHidden]: [[Action.horizontalRule]],
+    },
+};
+export const yfm = {
+    items: Object.assign(Object.assign({}, defaultPreset.items), { [Action.underline]: {
+            view: underlineItemView,
+            wysiwyg: underlineItemWysiwyg,
+            markup: underlineItemMarkup,
+        }, [Action.mono]: {
+            view: monospaceItemView,
+            wysiwyg: monospaceItemWysiwyg,
+            markup: monospaceItemMarkup,
+        }, [Action.note]: {
+            view: noteItemView,
+            wysiwyg: noteItemWysiwyg,
+            markup: noteItemMarkup,
+        }, [Action.cut]: {
+            view: cutItemView,
+            wysiwyg: cutItemWysiwyg,
+            markup: cutItemMarkup,
+        }, [Action.image]: {
+            view: imageItemView,
+            wysiwyg: imageItemWysiwyg,
+        }, [Action.imagePopup]: {
+            view: imagePopupItemView,
+            markup: imageItemMarkup,
+        }, [Action.file]: {
+            view: fileItemView,
+            wysiwyg: fileItemWysiwyg,
+        }, [Action.filePopup]: {
+            view: filePopupItemView,
+            markup: fileItemMarkup,
+        }, [Action.table]: {
+            view: tableItemView,
+            wysiwyg: tableItemWysiwyg,
+            markup: tableItemMarkup,
+        }, [Action.checkbox]: {
+            view: checkboxItemView,
+            wysiwyg: checkboxItemWysiwyg,
+            markup: checkboxItemMarkup,
+        }, [Action.tabs]: {
+            view: tableItemView,
+            wysiwyg: tableItemWysiwyg,
+            markup: tableItemMarkup,
+        } }),
+    orders: {
+        [Toolbar.wysiwygMain]: [
+            [Action.undo, Action.redo],
+            [Action.bold, Action.italic, Action.underline, Action.strike, Action.mono],
+            [
+                {
+                    id: List.heading,
+                    items: [
+                        Action.paragraph,
+                        Action.heading1,
+                        Action.heading2,
+                        Action.heading3,
+                        Action.heading4,
+                        Action.heading5,
+                        Action.heading6,
+                    ],
+                },
+                {
+                    id: List.lists,
+                    items: [
+                        Action.bulletList,
+                        Action.orderedList,
+                        Action.sinkListItem,
+                        Action.liftListItem,
+                    ],
+                },
+                Action.link,
+                Action.note,
+                Action.cut,
+                Action.quote,
+                {
+                    id: List.code,
+                    items: [Action.codeInline, Action.codeBlock],
+                },
+            ],
+            [Action.image, Action.file, Action.table, Action.checkbox],
+        ],
+        [Toolbar.markupMain]: [
+            [Action.undo, Action.redo],
+            [Action.bold, Action.italic, Action.underline, Action.strike, Action.mono],
+            [
+                {
+                    id: List.heading,
+                    items: [
+                        Action.paragraph,
+                        Action.heading1,
+                        Action.heading2,
+                        Action.heading3,
+                        Action.heading4,
+                        Action.heading5,
+                        Action.heading6,
+                    ],
+                },
+                {
+                    id: List.lists,
+                    items: [
+                        Action.bulletList,
+                        Action.orderedList,
+                        Action.sinkListItem,
+                        Action.liftListItem,
+                    ],
+                },
+                Action.link,
+                Action.note,
+                Action.cut,
+                Action.quote,
+                {
+                    id: List.code,
+                    items: [Action.codeInline, Action.codeBlock],
+                },
+            ],
+            [Action.imagePopup, Action.filePopup, Action.table, Action.checkbox],
+        ],
+        [Toolbar.wysiwygHidden]: [[Action.horizontalRule, Action.tabs]],
+        [Toolbar.markupHidden]: [[Action.horizontalRule, Action.tabs]],
+    },
+};
+export const full = {
+    items: Object.assign(Object.assign({}, yfm.items), { [Action.mark]: {
+            view: markedItemView,
+            wysiwyg: markedItemWysiwyg,
+            markup: markedItemMarkup,
+        }, [Action.colorify]: {
+            view: colorifyItemView,
+            wysiwyg: colorifyItemWysiwyg,
+            markup: colorifyItemMarkup,
+        }, [Action.emoji]: {
+            view: emojiItemView,
+            wysiwyg: emojiItemWysiwyg,
+            markup: emojiItemMarkup,
+        } }),
+    orders: {
+        [Toolbar.wysiwygMain]: [
+            [Action.undo, Action.redo],
+            [Action.bold, Action.italic, Action.underline, Action.strike, Action.mono, Action.mark],
+            [
+                {
+                    id: List.heading,
+                    items: [
+                        Action.paragraph,
+                        Action.heading1,
+                        Action.heading2,
+                        Action.heading3,
+                        Action.heading4,
+                        Action.heading5,
+                        Action.heading6,
+                    ],
+                },
+                {
+                    id: List.lists,
+                    items: [
+                        Action.bulletList,
+                        Action.orderedList,
+                        Action.sinkListItem,
+                        Action.liftListItem,
+                    ],
+                },
+                Action.colorify,
+                Action.link,
+                Action.note,
+                Action.cut,
+                Action.quote,
+                {
+                    id: List.code,
+                    items: [Action.codeInline, Action.codeBlock],
+                },
+            ],
+            [Action.image, Action.file, Action.table, Action.checkbox],
+        ],
+        [Toolbar.markupMain]: [
+            [Action.undo, Action.redo],
+            [Action.bold, Action.italic, Action.underline, Action.strike, Action.mono, Action.mark],
+            [
+                {
+                    id: List.heading,
+                    items: [
+                        Action.paragraph,
+                        Action.heading1,
+                        Action.heading2,
+                        Action.heading3,
+                        Action.heading4,
+                        Action.heading5,
+                        Action.heading6,
+                    ],
+                },
+                {
+                    id: List.lists,
+                    items: [
+                        Action.bulletList,
+                        Action.orderedList,
+                        Action.sinkListItem,
+                        Action.liftListItem,
+                    ],
+                },
+                Action.colorify,
+                Action.link,
+                Action.note,
+                Action.cut,
+                Action.quote,
+                {
+                    id: List.code,
+                    items: [Action.codeInline, Action.codeBlock],
+                },
+            ],
+            [Action.imagePopup, Action.filePopup, Action.table, Action.checkbox],
+        ],
+        [Toolbar.wysiwygHidden]: [[Action.horizontalRule, Action.emoji, Action.tabs]],
+        [Toolbar.markupHidden]: [[Action.horizontalRule, Action.emoji, Action.tabs]],
+    },
+};

package/build/esm/modules/toolbars/types.d.ts

@@ -0,0 +1,62 @@
+import type { RefObject } from 'react';
+import type { HotkeyProps } from '@gravity-ui/uikit';
+import type { EditorState } from 'prosemirror-state';
+import type { ActionStorage } from '../../core';
+import type { CodeEditor } from '../../markup';
+import type { ToolbarBaseProps, ToolbarDataType, ToolbarIconData } from '../../toolbar';
+export declare type ToolbarItemId = string & {};
+export declare type ToolbarListId = string & {};
+export interface ToolbarList {
+    id: ToolbarListId;
+    items: ToolbarItemId[];
+}
+/**
+ * The default value for the `type` property is `ToolbarDataType.SingleButton`.
+ */
+export declare type ToolbarItemView<T extends ToolbarDataType = ToolbarDataType.SingleButton> = {
+    className?: string;
+    hint?: string | (() => string);
+    hotkey?: HotkeyProps['value'];
+    type?: ToolbarDataType;
+    doNotActivateList?: boolean;
+} & (T extends ToolbarDataType.SingleButton ? {
+    icon: ToolbarIconData;
+    title: string | (() => string);
+} : T extends ToolbarDataType.ListButton ? {
+    withArrow?: boolean;
+    icon: ToolbarIconData;
+    title: string | (() => string);
+} : {});
+export interface EditorActions<E> {
+    exec(editor: E): void;
+    isActive(editor: E): boolean;
+    isEnable(editor: E): boolean;
+}
+declare type ToolbarItemEditor<T, E> = Partial<EditorActions<E>> & {
+    hintWhenDisabled?: boolean | string | (() => string);
+    condition?: ((state: EditorState) => void) | 'enabled';
+} & (T extends ToolbarDataType.ButtonPopup ? {
+    renderPopup: (props: ToolbarBaseProps<E> & {
+        hide: () => void;
+        anchorRef: RefObject<HTMLElement>;
+    }) => React.ReactNode;
+} : T extends ToolbarDataType.ReactComponent ? {
+    width: number;
+    component: React.ComponentType<ToolbarBaseProps<E>>;
+} : {});
+export declare type ToolbarItemWysiwyg<T extends ToolbarDataType = ToolbarDataType.SingleButton> = ToolbarItemEditor<T, ActionStorage>;
+export declare type ToolbarItemMarkup<T extends ToolbarDataType = ToolbarDataType.SingleButton> = ToolbarItemEditor<T, CodeEditor>;
+export declare type ToolbarItem<T extends ToolbarDataType> = {
+    view: ToolbarItemView<T>;
+    wysiwyg?: ToolbarItemWysiwyg<T>;
+    markup?: ToolbarItemMarkup<T>;
+};
+export declare type ToolbarsItems = Record<ToolbarItemId, ToolbarItem<ToolbarDataType>>;
+export declare type ToolbarId = string;
+export declare type ToolbarOrders = (ToolbarList | ToolbarItemId)[][];
+export declare type ToolbarsOrders = Record<ToolbarId, ToolbarOrders>;
+export interface ToolbarsPreset {
+    items: ToolbarsItems;
+    orders: ToolbarsOrders;
+}
+export {};

package/build/esm/modules/toolbars/types.js

@@ -0,0 +1 @@
+export {};

package/build/esm/shortcuts/const.d.ts

@@ -31,6 +31,7 @@ export declare enum Action {
     Heading4 = "h4",
     Heading5 = "h5",
     Heading6 = "h6",
+    EmptyRow = "EmptyRow",
     BulletList = "ulist",
     OrderedList = "olist",
     LiftListItem = "list__action_lift",

package/build/esm/shortcuts/const.js

@@ -34,6 +34,7 @@ export var Action;
     Action["Heading4"] = "h4";
     Action["Heading5"] = "h5";
     Action["Heading6"] = "h6";
+    Action["EmptyRow"] = "EmptyRow";
     Action["BulletList"] = "ulist";
     Action["OrderedList"] = "olist";
     Action["LiftListItem"] = "list__action_lift";

package/build/esm/shortcuts/default.js

@@ -20,6 +20,7 @@ formatter
     .set(A.Heading4, { pc: [MK.Ctrl, MK.Shift, '4'], mac: [MK.Cmd, MK.Option, '4'] })
     .set(A.Heading5, { pc: [MK.Ctrl, MK.Shift, '5'], mac: [MK.Cmd, MK.Option, '5'] })
     .set(A.Heading6, { pc: [MK.Ctrl, MK.Shift, '6'], mac: [MK.Cmd, MK.Option, '6'] })
+    .set(A.EmptyRow, { pc: [MK.Ctrl, MK.Shift, K.Enter], mac: [MK.Cmd, MK.Shift, K.Enter] })
     .set(A.BulletList, [MK.Mod, MK.Shift, 'l'])
     .set(A.OrderedList, [MK.Mod, MK.Shift, 'm'])
     .set(A.SinkListItem, [MK.Tab])

package/build/esm/toolbar/types.d.ts

@@ -38,7 +38,9 @@ export declare enum ToolbarDataType {
     SingleButton = "s-button",
     ListButton = "list-b",
     ButtonPopup = "b-popup",
+    /** @deprecated Use ReactComponent type instead */
     ReactNode = "r-node",
+    /** @deprecated Use ReactComponent type instead */
     ReactNodeFn = "r-node-fn",
     ReactComponent = "r-component"
 }
@@ -73,12 +75,18 @@ export declare type ToolbarButtonPopupData<E> = ToolbarItemData<E> & {
 export declare type ToolbarListButtonItemData<E> = ToolbarItemData<E> & {
     doNotActivateList?: boolean;
 };
+/**
+ * @deprecated Use ReactComponent type instead
+ * */
 export declare type ToolbarReactNodeData = {
     id: string;
     type: ToolbarDataType.ReactNode;
     width: number;
     content: React.ReactNode;
 };
+/**
+ * @deprecated Use ReactComponent type instead
+ * */
 export declare type ToolbarReactNodeFnData<E> = {
     id: string;
     type: ToolbarDataType.ReactNodeFn;

package/build/esm/toolbar/types.js

@@ -3,7 +3,9 @@ export var ToolbarDataType;
     ToolbarDataType["SingleButton"] = "s-button";
     ToolbarDataType["ListButton"] = "list-b";
     ToolbarDataType["ButtonPopup"] = "b-popup";
+    /** @deprecated Use ReactComponent type instead */
     ToolbarDataType["ReactNode"] = "r-node";
+    /** @deprecated Use ReactComponent type instead */
     ToolbarDataType["ReactNodeFn"] = "r-node-fn";
     ToolbarDataType["ReactComponent"] = "r-component";
 })(ToolbarDataType || (ToolbarDataType = {}));

package/build/esm/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "14.8.0",
+  "version": "14.10.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {