@gravity-ui/markdown-editor 13.0.0

package/build/cjs/extensions/behavior/History/index.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.History = void 0;
+const prosemirror_history_1 = require("prosemirror-history");
+const keymap_1 = require("../../../utils/keymap");
+var HistoryAction;
+(function (HistoryAction) {
+    HistoryAction["Undo"] = "undo";
+    HistoryAction["Redo"] = "redo";
+})(HistoryAction || (HistoryAction = {}));
+const History = (builder, opts) => {
+    builder.addPlugin(() => (0, prosemirror_history_1.history)(opts === null || opts === void 0 ? void 0 : opts.config));
+    builder.addKeymap(() => {
+        const { undoKey, redoKey } = opts !== null && opts !== void 0 ? opts : {};
+        const bindings = {};
+        if (undoKey)
+            bindings[undoKey] = (0, keymap_1.withLogAction)('undo', prosemirror_history_1.undo);
+        if (redoKey)
+            bindings[redoKey] = (0, keymap_1.withLogAction)('redo', prosemirror_history_1.redo);
+        return bindings;
+    });
+    builder
+        .addAction(HistoryAction.Undo, createHistoryAction(prosemirror_history_1.undo))
+        .addAction(HistoryAction.Redo, createHistoryAction(prosemirror_history_1.redo));
+};
+exports.History = History;
+function createHistoryAction(command) {
+    return () => ({
+        isEnable: command,
+        run: command,
+    });
+}

package/build/cjs/extensions/behavior/Placeholder/index.css

@@ -0,0 +1,33 @@
+.ProseMirror .g-md-placeholder {
+  display: inline-block;
+  pointer-events: none;
+  color: var(--g-color-text-secondary);
+}
+
+.ProseMirror.g-md-editor-hidecursor {
+  caret-color: transparent;
+}
+
+@keyframes placeholder_blink {
+  49% {
+    border-color: unset;
+  }
+  50% {
+    border-color: transparent;
+  }
+  99% {
+    border-color: transparent;
+  }
+}
+.g-md-placeholder {
+  caret-color: transparent;
+}
+.ProseMirror-focused .g-md-placeholder_focus .g-md-placeholder__cursor {
+  position: relative;
+  z-index: 1;
+  margin-right: -1px;
+  border-left-width: 1px;
+  border-left-style: solid;
+  animation: placeholder_blink 1s;
+  animation-iteration-count: infinite;
+}

package/build/cjs/extensions/behavior/Placeholder/index.d.ts

@@ -0,0 +1,23 @@
+import type { Node } from 'prosemirror-model';
+import { PluginKey } from 'prosemirror-state';
+import { DecorationSet } from 'prosemirror-view';
+import type { ExtensionAuto } from '../../../core';
+import { PlaceholderOptions } from '../../../utils/placeholder';
+export declare const createPlaceholder: (node: Node, parent: Node | null, focus?: boolean) => HTMLDivElement | null;
+export declare const Placeholder: ExtensionAuto<PlaceholderOptions>;
+declare module 'prosemirror-model' {
+    interface NodeSpec {
+        placeholder?: {
+            content: string | ((node: Node, parent?: Node | null) => string | null);
+            customPlugin?: PluginKey<DecorationSet>;
+            alwaysVisible?: boolean;
+        };
+    }
+}
+declare global {
+    namespace WysiwygEditor {
+        interface Context {
+            placeholder: PlaceholderOptions;
+        }
+    }
+}

package/build/cjs/extensions/behavior/Placeholder/index.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Placeholder = exports.createPlaceholder = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_utils_1 = require("prosemirror-utils");
+const prosemirror_view_1 = require("prosemirror-view");
+const classname_1 = require("../../../classname");
+const lodash_1 = require("../../../lodash");
+const nodes_1 = require("../../../utils/nodes");
+const placeholder_1 = require("../../../utils/placeholder");
+const selection_1 = require("../../../utils/selection");
+const getPlaceholderPluginKeys = (schema) => {
+    var _a;
+    const pluginKeys = [];
+    for (const node in schema.nodes) {
+        if (schema.nodes[node]) {
+            const spec = schema.nodes[node].spec;
+            if ((_a = spec.placeholder) === null || _a === void 0 ? void 0 : _a.customPlugin) {
+                pluginKeys.push(spec.placeholder.customPlugin);
+            }
+        }
+    }
+    return pluginKeys;
+};
+const b = (0, classname_1.cn)('placeholder');
+const createPlaceholder = (node, parent, focus) => {
+    const content = (0, placeholder_1.getPlaceholderContent)(node, parent);
+    if (!content)
+        return null;
+    const placeholder = document.createElement('div');
+    placeholder.className = b({ focus });
+    const placeholderCursor = document.createElement('span');
+    placeholderCursor.className = b('cursor');
+    const placeholderText = document.createElement('span');
+    placeholderText.className = b('text');
+    placeholderText.textContent = content;
+    placeholder.append(placeholderCursor, placeholderText);
+    return placeholder;
+};
+exports.createPlaceholder = createPlaceholder;
+const placeholderNeeded = (node) => {
+    const childrenWithPlaceholderVisible = (0, prosemirror_utils_1.findChildren)(node, (n) => { var _a; return Boolean((_a = n.type.spec.placeholder) === null || _a === void 0 ? void 0 : _a.alwaysVisible); });
+    return ((0, nodes_1.isNodeEmpty)(node) &&
+        // If there are child nodes with constant placeholder - give them the priority
+        !childrenWithPlaceholderVisible.length);
+};
+const addDecoration = (widgetsMap, node, pos, parent, cursorPos, globalState) => {
+    const placeholderSpec = node.type.spec.placeholder;
+    const decorationPosition = pos + node.childCount + 1;
+    // We do not add decoration if there is already a placeholder at this position
+    if (!placeholderSpec || widgetsMap[decorationPosition])
+        return;
+    if (placeholderSpec.customPlugin) {
+        widgetsMap[decorationPosition] = placeholderSpec.customPlugin;
+        return;
+    }
+    const focus = decorationPosition === cursorPos;
+    const placeholderDOM = (0, exports.createPlaceholder)(node, parent, focus);
+    if (!placeholderDOM)
+        return;
+    if (focus)
+        globalState.hasFocus = true;
+    widgetsMap[decorationPosition] = {
+        pos: decorationPosition,
+        toDOM: placeholderDOM,
+        spec: { focus },
+    };
+};
+const pluginKey = new prosemirror_state_1.PluginKey('placeholder_plugin');
+const Placeholder = (builder, opts) => {
+    builder.context.set('placeholder', opts);
+    builder.addPlugin(() => new prosemirror_state_1.Plugin({
+        key: pluginKey,
+        props: {
+            attributes(state) {
+                const attrs = {};
+                if (pluginKey.getState(state).hasFocus) {
+                    // hide native cursor
+                    attrs.class = 'g-md-editor-hidecursor';
+                }
+                return attrs;
+            },
+            decorations(state) {
+                var _a;
+                return (_a = pluginKey.getState(state)) === null || _a === void 0 ? void 0 : _a.decorationSet;
+            },
+        },
+        state: {
+            init: (_config, state) => initState(state),
+            apply: applyState,
+        },
+    }), builder.Priority.VeryHigh);
+};
+exports.Placeholder = Placeholder;
+function getPlaceholderWidgetSpecs(state) {
+    var _a;
+    const globalState = { hasFocus: false };
+    const widgetsMap = {};
+    const { selection } = state;
+    const cursorPos = (0, selection_1.isTextSelection)(selection) ? (_a = selection.$cursor) === null || _a === void 0 ? void 0 : _a.pos : null;
+    getPlaceholderPluginKeys(state.schema).forEach((f) => {
+        var _a;
+        // We use find because it can be used to iterate over the DecorationSet.
+        (_a = f.getState(state)) === null || _a === void 0 ? void 0 : _a.find(undefined, undefined, (spec) => {
+            widgetsMap[spec.pos] = f;
+            return false;
+        });
+    });
+    // Fraw placeholder for all nodes where placeholder is alwaysVisible
+    const decorate = (node, pos, parent) => {
+        const placeholderSpec = node.type.spec.placeholder;
+        if (placeholderSpec && placeholderSpec.alwaysVisible && placeholderNeeded(node)) {
+            addDecoration(widgetsMap, node, pos, parent, cursorPos, globalState);
+        }
+    };
+    state.doc.descendants(decorate);
+    const parentNode = (0, prosemirror_utils_1.findParentNodeClosestToPos)(state.selection.$from, (node) => {
+        return Boolean(node.type.spec.placeholder);
+    });
+    const placeholderSpec = parentNode === null || parentNode === void 0 ? void 0 : parentNode.node.type.spec.placeholder;
+    // Draw placeholder if it needs to be draw in the place of cursor
+    if (parentNode &&
+        placeholderNeeded(parentNode.node) &&
+        placeholderSpec &&
+        !placeholderSpec.alwaysVisible) {
+        const { node, pos, depth } = parentNode;
+        const parent = depth > 0 ? state.selection.$from.node(depth - 1) : null;
+        addDecoration(widgetsMap, node, pos, parent, cursorPos, globalState);
+    }
+    const widgetSpecs = Object.values(widgetsMap).filter((decoration) => !(decoration instanceof prosemirror_state_1.PluginKey));
+    return { widgetSpecs, hasFocus: globalState.hasFocus };
+}
+function initState(state) {
+    const { widgetSpecs, hasFocus } = getPlaceholderWidgetSpecs(state);
+    const decorationSet = prosemirror_view_1.DecorationSet.create(state.doc, widgetSpecs.map((widget) => prosemirror_view_1.Decoration.widget(widget.pos, widget.toDOM, widget.spec)));
+    return { decorationSet, hasFocus };
+}
+function applyState(tr, oldPluginState, _oldState, newState) {
+    const { widgetSpecs, hasFocus } = getPlaceholderWidgetSpecs(newState);
+    const { decorationSet } = oldPluginState;
+    const oldMappedSet = decorationSet.map(tr.mapping, tr.doc);
+    // Find all decorations that are present in old and new set
+    const decorationsThatDidNotChange = widgetSpecs.reduce((a, { pos, spec }) => {
+        const deco = oldMappedSet.find(pos, pos);
+        if (deco.length && (0, lodash_1.isEqual)(deco[0].spec, spec))
+            a.push(...deco);
+        return a;
+    }, []);
+    // Those are decorations that are presenr only in new set
+    const newAddedDecorations = widgetSpecs.filter(({ pos }) => !decorationsThatDidNotChange.map(({ from }) => from).includes(pos));
+    // That is a set with decorations that are present in old set and absent in new set
+    const notRelevantDecorations = oldMappedSet.remove(decorationsThatDidNotChange);
+    let newSet = oldMappedSet;
+    // Remove decorations that are not present in new set
+    if (notRelevantDecorations.find().length)
+        newSet = newSet.remove(notRelevantDecorations.find());
+    // Add new decorations
+    if (newAddedDecorations.length)
+        newSet = newSet.add(tr.doc, newAddedDecorations.map((widget) => prosemirror_view_1.Decoration.widget(widget.pos, widget.toDOM, widget.spec)));
+    return { decorationSet: newSet, hasFocus };
+}

package/build/cjs/extensions/behavior/ReactRenderer/index.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { EditorState } from 'prosemirror-state';
+import type { ExtensionAuto } from '../../../core';
+import { EventEmitter } from '../../../utils/event-emitter';
+import { RenderStorage, RenderStorageEventMap, RenderStorageItem, Renderer, RendererItem } from './types';
+export type { RendererItem, RenderStorage } from './types';
+export { Renderer as ReactRendererComponent } from './react';
+export type { RendererProps as ReactRendererComponentProps } from './react';
+export declare function getReactRendererFromState(state: EditorState): ReactRenderer;
+export declare type ReactRenderer = Renderer<React.ReactNode>;
+export declare const ReactRendererExtension: ExtensionAuto<ReactRenderer>;
+declare global {
+    namespace WysiwygEditor {
+        interface Context {
+            reactrenderer: ReactRenderer;
+        }
+    }
+}
+declare type RenderFn = () => React.ReactNode;
+export declare class ReactRenderStorage extends EventEmitter<RenderStorageEventMap> implements ReactRenderer, RenderStorage<React.ReactNode> {
+    #private;
+    private static Item;
+    getItems(): readonly RenderStorageItem<React.ReactNode>[];
+    createItem(idPrefix: string, render: RenderFn): RendererItem;
+    removeItem(item: RendererItem): void;
+    removeItem(id: string): void;
+}

package/build/cjs/extensions/behavior/ReactRenderer/index.js

@@ -0,0 +1,77 @@
+"use strict";
+var _ReactRenderStorage_items, _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactRenderStorage = exports.ReactRendererExtension = exports.getReactRendererFromState = exports.ReactRendererComponent = void 0;
+const tslib_1 = require("tslib");
+const prosemirror_state_1 = require("prosemirror-state");
+const event_emitter_1 = require("../../../utils/event-emitter");
+var react_1 = require("./react");
+Object.defineProperty(exports, "ReactRendererComponent", { enumerable: true, get: function () { return react_1.Renderer; } });
+const key = new prosemirror_state_1.PluginKey('reactrenderer');
+function getReactRendererFromState(state) {
+    const renderer = key.getState(state);
+    if (!renderer) {
+        throw new Error('ReactRenderer is missing in the editor state. Probably, you forgot to use ReactRendererExtension');
+    }
+    return renderer;
+}
+exports.getReactRendererFromState = getReactRendererFromState;
+const ReactRendererExtension = (builder, renderer) => {
+    builder.context.set('reactrenderer', renderer);
+    builder.addPlugin(() => new prosemirror_state_1.Plugin({
+        key,
+        state: {
+            init: () => renderer,
+            apply: () => renderer,
+        },
+    }), builder.Priority.Highest);
+};
+exports.ReactRendererExtension = ReactRendererExtension;
+class ReactRenderStorage extends event_emitter_1.EventEmitter {
+    constructor() {
+        super(...arguments);
+        _ReactRenderStorage_items.set(this, []);
+    }
+    getItems() {
+        return tslib_1.__classPrivateFieldGet(this, _ReactRenderStorage_items, "f");
+    }
+    createItem(idPrefix, render) {
+        const item = new ReactRenderStorage.Item(idPrefix, render, this.removeItem.bind(this));
+        tslib_1.__classPrivateFieldGet(this, _ReactRenderStorage_items, "f").push(item);
+        this.emit('update', null);
+        return item;
+    }
+    removeItem(itemOrId) {
+        if (typeof itemOrId === 'string') {
+            tslib_1.__classPrivateFieldSet(this, _ReactRenderStorage_items, tslib_1.__classPrivateFieldGet(this, _ReactRenderStorage_items, "f").filter((item) => item.id !== itemOrId), "f");
+        }
+        else {
+            tslib_1.__classPrivateFieldSet(this, _ReactRenderStorage_items, tslib_1.__classPrivateFieldGet(this, _ReactRenderStorage_items, "f").filter((item) => item !== itemOrId), "f");
+        }
+        this.emit('update', null);
+    }
+}
+exports.ReactRenderStorage = ReactRenderStorage;
+_ReactRenderStorage_items = new WeakMap();
+ReactRenderStorage.Item = (_a = class Item extends event_emitter_1.EventEmitter {
+        constructor(idPrefix, renderFn, removeFn) {
+            super();
+            this.id = idPrefix + Item.getNextId();
+            this.renderFn = renderFn;
+            this.removeFn = removeFn;
+        }
+        static getNextId() {
+            return this.GlobalId++;
+        }
+        render() {
+            return this.renderFn();
+        }
+        remove() {
+            this.removeFn(this);
+        }
+        rerender() {
+            this.emit('rerender', null);
+        }
+    },
+    _a.GlobalId = 0,
+    _a);

package/build/cjs/extensions/behavior/ReactRenderer/react.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { RenderStorage } from './types';
+export declare type RendererProps = {
+    storage: RenderStorage<React.ReactNode>;
+};
+export declare const Renderer: React.NamedExoticComponent<RendererProps>;

package/build/cjs/extensions/behavior/ReactRenderer/react.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Renderer = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_use_1 = require("react-use");
+exports.Renderer = (0, react_1.memo)(({ storage }) => {
+    const update = (0, react_use_1.useUpdate)();
+    (0, react_1.useEffect)(() => {
+        storage.on('update', update);
+        return () => {
+            storage.off('update', update);
+        };
+    }, [storage, update]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, storage.getItems().map((item) => (react_1.default.createElement(ItemRenderer, { key: item.id, item: item })))));
+});
+exports.Renderer.displayName = 'ReactRenderer';
+const ItemRenderer = (0, react_1.memo)(({ item }) => {
+    const update = (0, react_use_1.useUpdate)();
+    (0, react_1.useEffect)(() => {
+        item.on('rerender', update);
+        return () => {
+            item.off('rerender', update);
+        };
+    }, [item, update]);
+    return react_1.default.createElement(react_1.default.Fragment, null, item.render());
+});
+ItemRenderer.displayName = 'ReactItemRenderer';

package/build/cjs/extensions/behavior/ReactRenderer/types.d.ts

@@ -0,0 +1,24 @@
+import type { Receiver } from '../../../utils/event-emitter';
+export interface Renderer<R> {
+    createItem(idPrefix: string, render: () => R): RendererItem;
+    removeItem(item: RendererItem): void;
+    removeItem(id: string): void;
+}
+export declare type RendererItem = {
+    readonly id: string;
+    rerender(): void;
+    remove(): void;
+};
+export declare type RenderStorageEventMap = {
+    update: null;
+};
+export interface RenderStorage<R> extends Receiver<RenderStorageEventMap> {
+    getItems(): readonly RenderStorageItem<R>[];
+}
+export declare type RenderStorageItemEventMap = {
+    rerender: null;
+};
+export interface RenderStorageItem<R> extends Receiver<RenderStorageItemEventMap> {
+    readonly id: string;
+    render(): R;
+}

package/build/cjs/extensions/behavior/ReactRenderer/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/extensions/behavior/Selection/commands.d.ts

@@ -0,0 +1,19 @@
+import type { ResolvedPos } from 'prosemirror-model';
+import type { Command, NodeSelection, TextSelection, Transaction } from 'prosemirror-state';
+import { GapCursorSelection } from '../Cursor/GapCursorSelection';
+export declare type Direction = 'before' | 'after';
+declare type TextSelectionFinder = (selection: TextSelection, dir: Direction) => ResolvedPos | null;
+declare type NodeSelectionFinder = (selection: NodeSelection, dir: Direction) => ResolvedPos | null;
+declare type GapCursorSelectionFinder = (selection: GapCursorSelection, dir: Direction) => ResolvedPos | null;
+export declare const findNextFakeParaPosForGapCursorSelection: GapCursorSelectionFinder;
+export declare const findFakeParaPosForNodeSelection: NodeSelectionFinder;
+export declare const findFakeParaPosForCodeBlock: ($cursor: ResolvedPos, dir: Direction) => ResolvedPos | null;
+export declare const findFakeParaPosForTextSelection: TextSelectionFinder;
+export declare function findFakeParaPosClosestToPos($pos: ResolvedPos, depth: number, dir: Direction): ResolvedPos | null;
+export declare function createFakeParagraph(tr: Transaction, $pos: ResolvedPos, direction: Direction): Transaction;
+export declare const arrowLeft: Command;
+export declare const arrowDown: Command;
+export declare const arrowUp: Command;
+export declare const arrowRight: Command;
+export declare const backspace: Command;
+export {};

package/build/cjs/extensions/behavior/Selection/commands.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.backspace = exports.arrowRight = exports.arrowUp = exports.arrowDown = exports.arrowLeft = exports.createFakeParagraph = exports.findFakeParaPosClosestToPos = exports.findFakeParaPosForTextSelection = exports.findFakeParaPosForCodeBlock = exports.findFakeParaPosForNodeSelection = exports.findNextFakeParaPosForGapCursorSelection = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const nodes_1 = require("../../../utils/nodes");
+const selection_1 = require("../../../utils/selection");
+const GapCursorSelection_1 = require("../Cursor/GapCursorSelection");
+const isUp = (dir) => dir === 'left' || dir === 'up';
+function isTextblock(node) {
+    return node.isTextblock && !(0, nodes_1.isCodeBlock)(node);
+}
+function isEdgeTextblock($cursor, dir) {
+    const index = $cursor.index($cursor.depth - 1);
+    if (dir === 'before')
+        return index === 0;
+    if (dir === 'after')
+        return index === $cursor.node($cursor.depth - 1).childCount - 1;
+    return false;
+}
+const findNextFakeParaPosForGapCursorSelection = ({ $pos }, dir) => {
+    if ($pos.pos !== $pos.start() && $pos.pos !== $pos.end())
+        return null;
+    return findFakeParaPosClosestToPos($pos, $pos.depth, dir);
+};
+exports.findNextFakeParaPosForGapCursorSelection = findNextFakeParaPosForGapCursorSelection;
+const findFakeParaPosForNodeSelection = (selection, dir) => {
+    const selectedNode = selection.node;
+    if (selectedNode.isInline || isTextblock(selectedNode))
+        return null;
+    const { $from } = selection;
+    const index = $from.index();
+    const parentNode = $from.parent;
+    if (dir === 'before') {
+        if (parentNode.firstChild === selectedNode || !isTextblock(parentNode.child(index - 1))) {
+            return $from;
+        }
+    }
+    else if (dir === 'after') {
+        if (parentNode.lastChild === selectedNode || !isTextblock(parentNode.child(index + 1))) {
+            return selection.$to;
+        }
+    }
+    return null;
+};
+exports.findFakeParaPosForNodeSelection = findFakeParaPosForNodeSelection;
+const findFakeParaPosForCodeBlock = ($cursor, dir) => {
+    if (!(0, nodes_1.isCodeBlock)($cursor.parent))
+        return null;
+    let foundPos = -1;
+    const index = $cursor.index($cursor.depth - 1);
+    const parent = $cursor.node($cursor.depth - 1);
+    if (dir === 'before') {
+        if (index === 0 || !isTextblock(parent.child(index - 1))) {
+            foundPos = $cursor.before();
+        }
+    }
+    else if (dir === 'after') {
+        if (index === parent.childCount - 1 || !isTextblock(parent.child(index + 1))) {
+            foundPos = $cursor.after();
+        }
+    }
+    return foundPos !== -1 ? $cursor.doc.resolve(foundPos) : null;
+};
+exports.findFakeParaPosForCodeBlock = findFakeParaPosForCodeBlock;
+const findFakeParaPosForTextSelection = (selection, dir) => {
+    const $cursor = dir === 'before' ? selection.$from : selection.$to;
+    if ($cursor.parent.isInline)
+        return null;
+    const $pos = (0, exports.findFakeParaPosForCodeBlock)($cursor, dir);
+    if ($pos)
+        return $pos;
+    if (!isEdgeTextblock($cursor, dir))
+        return null;
+    return findFakeParaPosClosestToPos($cursor, $cursor.depth - 1, dir);
+};
+exports.findFakeParaPosForTextSelection = findFakeParaPosForTextSelection;
+function findFakeParaPosClosestToPos($pos, depth, dir) {
+    depth++;
+    while (--depth > 0) {
+        const node = $pos.node(depth);
+        const index = $pos.index(depth - 1);
+        const parent = $pos.node(depth - 1);
+        const isFirstChild = index === 0;
+        const isLastChild = index === parent.childCount - 1;
+        const isComplexChild = node.type.spec.complex === 'inner' || node.type.spec.complex === 'leaf';
+        const disabledGapCursor = parent.type.spec.gapcursor === false;
+        if (isComplexChild || disabledGapCursor) {
+            if (dir === 'before' && isFirstChild)
+                continue;
+            if (dir === 'after' && isLastChild)
+                continue;
+            return null;
+        }
+        if (dir === 'before') {
+            if (isFirstChild || !isTextblock(parent.child(index - 1))) {
+                return $pos.doc.resolve($pos.before(depth));
+            }
+        }
+        else if (dir === 'after') {
+            if (isLastChild || !isTextblock(parent.child(index + 1))) {
+                return $pos.doc.resolve($pos.after(depth));
+            }
+        }
+        return null;
+    }
+    return null;
+}
+exports.findFakeParaPosClosestToPos = findFakeParaPosClosestToPos;
+const arrow = (dir) => (state, dispatch, view) => {
+    var _a;
+    const { selection } = state;
+    const direction = isUp(dir) ? 'before' : 'after';
+    let $pos = null;
+    if ((0, GapCursorSelection_1.isGapCursorSelection)(selection)) {
+        if (((_a = selection.meta) === null || _a === void 0 ? void 0 : _a.direction) !== direction) {
+            return false;
+        }
+        // if gap selection is at start or end of doc
+        if (dir === 'up' && selection.pos === 0)
+            return true;
+        if (dir === 'down' && selection.pos === state.doc.nodeSize - 2)
+            return true;
+        $pos = (0, exports.findNextFakeParaPosForGapCursorSelection)(selection, direction);
+    }
+    if ((0, selection_1.isNodeSelection)(selection)) {
+        $pos = (0, exports.findFakeParaPosForNodeSelection)(selection, direction);
+    }
+    if ((0, selection_1.isTextSelection)(selection) && (view === null || view === void 0 ? void 0 : view.endOfTextblock(dir))) {
+        $pos = (0, exports.findFakeParaPosForTextSelection)(selection, direction);
+    }
+    if ($pos) {
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch(createFakeParagraph(state.tr, $pos, direction).scrollIntoView());
+        return true;
+    }
+    return false;
+};
+function createFakeParagraph(tr, $pos, direction) {
+    return tr.setSelection(new GapCursorSelection_1.GapCursorSelection($pos, { meta: { direction } }));
+}
+exports.createFakeParagraph = createFakeParagraph;
+exports.arrowLeft = arrow('left');
+exports.arrowDown = arrow('down');
+exports.arrowUp = arrow('up');
+exports.arrowRight = arrow('right');
+const backspace = (state, dispatch) => {
+    const sel = state.selection;
+    if ((0, GapCursorSelection_1.isGapCursorSelection)(sel)) {
+        const newSel = prosemirror_state_1.Selection.findFrom(sel.$pos, -1);
+        if (newSel) {
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch(state.tr.setSelection(newSel).scrollIntoView());
+            return true;
+        }
+    }
+    return false;
+};
+exports.backspace = backspace;

package/build/cjs/extensions/behavior/Selection/index.d.ts

@@ -0,0 +1,4 @@
+import type { ExtensionAuto } from '../../../core';
+export { createFakeParagraph, findFakeParaPosForNodeSelection, findFakeParaPosForTextSelection, findFakeParaPosForCodeBlock, findFakeParaPosClosestToPos, } from './commands';
+export type { Direction as SelectionDirection } from './commands';
+export declare const Selection: ExtensionAuto;

package/build/cjs/extensions/behavior/Selection/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Selection = exports.findFakeParaPosClosestToPos = exports.findFakeParaPosForCodeBlock = exports.findFakeParaPosForTextSelection = exports.findFakeParaPosForNodeSelection = exports.createFakeParagraph = void 0;
+const selection_1 = require("./selection");
+var commands_1 = require("./commands");
+Object.defineProperty(exports, "createFakeParagraph", { enumerable: true, get: function () { return commands_1.createFakeParagraph; } });
+Object.defineProperty(exports, "findFakeParaPosForNodeSelection", { enumerable: true, get: function () { return commands_1.findFakeParaPosForNodeSelection; } });
+Object.defineProperty(exports, "findFakeParaPosForTextSelection", { enumerable: true, get: function () { return commands_1.findFakeParaPosForTextSelection; } });
+Object.defineProperty(exports, "findFakeParaPosForCodeBlock", { enumerable: true, get: function () { return commands_1.findFakeParaPosForCodeBlock; } });
+Object.defineProperty(exports, "findFakeParaPosClosestToPos", { enumerable: true, get: function () { return commands_1.findFakeParaPosClosestToPos; } });
+const Selection = (builder) => {
+    builder.addPlugin(selection_1.selection);
+};
+exports.Selection = Selection;

package/build/cjs/extensions/behavior/Selection/selection.css

@@ -0,0 +1,3 @@
+.g-md-editor.ProseMirror-focused .pm-node-selected {
+  box-shadow: var(--g-color-text-info) 0 0 0 1px;
+}

package/build/cjs/extensions/behavior/Selection/selection.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'prosemirror-state';
+export declare const selection: () => Plugin<any>;
+declare module 'prosemirror-model' {
+    interface NodeSpec {
+        allowSelection?: boolean | undefined;
+    }
+}