feat(quoteLink): add quote link additional plugin

demo/stories/quoteLink/QuoteLink.tsx

@@ -0,0 +1,96 @@
+import {memo, useCallback} from 'react';
+
+import {transform as quoteLink} from '@diplodoc/quote-link-extension';
+import type {PluginWithParams} from 'markdown-it/lib';
+
+import {QuoteLink as QuoteLinkExtension} from 'src/extensions/additional/QuoteLink';
+import {
+    MarkdownEditorView,
+    type RenderPreview,
+    mQuoteLinkItemData,
+    markupToolbarConfigs,
+    useMarkdownEditor,
+    wQuoteLinkItemData,
+    wysiwygToolbarConfigs,
+} from 'src/index';
+import {cloneDeep} from 'src/lodash';
+
+import {PlaygroundLayout} from '../../components/PlaygroundLayout';
+import {SplitModePreview} from '../../components/SplitModePreview';
+import {plugins as defaultPlugins} from '../../defaults/md-plugins';
+import {useLogs} from '../../hooks/useLogs';
+
+const wToolbarConfig = cloneDeep(wysiwygToolbarConfigs.wToolbarConfig);
+wToolbarConfig.push([wQuoteLinkItemData]);
+
+const wCommandMenuConfig = cloneDeep(wysiwygToolbarConfigs.wCommandMenuConfig);
+wCommandMenuConfig.push(wQuoteLinkItemData);
+
+const mToolbarConfig = cloneDeep(markupToolbarConfigs.mToolbarConfig);
+mToolbarConfig.push([mQuoteLinkItemData]);
+
+const plugins: PluginWithParams[] = [...defaultPlugins, quoteLink({bundle: false})];
+
+export const QuoteLink = memo(() => {
+    const wSelectionMenuConfig = [
+        [wQuoteLinkItemData],
+        ...wysiwygToolbarConfigs.wSelectionMenuConfig,
+    ];
+
+    const renderPreview = useCallback<RenderPreview>(
+        ({getValue, md}) => (
+            <SplitModePreview
+                getValue={getValue}
+                allowHTML={md.html}
+                linkify={md.linkify}
+                linkifyTlds={md.linkifyTlds}
+                breaks={md.breaks}
+                needToSanitizeHtml
+                plugins={plugins}
+            />
+        ),
+        [],
+    );
+
+    const editor = useMarkdownEditor({
+        initial: {markup: ''},
+        markupConfig: {renderPreview},
+        wysiwygConfig: {
+            extensions: QuoteLinkExtension,
+            extensionOptions: {
+                commandMenu: {
+                    actions: wCommandMenuConfig,
+                },
+                selectionContext: {
+                    config: wSelectionMenuConfig,
+                },
+                yfmConfigs: {
+                    attrs: {
+                        allowedAttributes: ['data-quotelink'],
+                    },
+                },
+            },
+        },
+    });
+
+    useLogs(editor.logger);
+
+    return (
+        <PlaygroundLayout
+            editor={editor}
+            view={({className}) => (
+                <MarkdownEditorView
+                    autofocus
+                    stickyToolbar
+                    settingsVisible
+                    editor={editor}
+                    className={className}
+                    markupToolbarConfig={mToolbarConfig}
+                    wysiwygToolbarConfig={wToolbarConfig}
+                />
+            )}
+        />
+    );
+});
+
+QuoteLink.displayName = 'GPT';

demo/stories/quoteLink/quoteLink.stories.ts

@@ -0,0 +1,11 @@
+import type {StoryObj} from '@storybook/react';
+
+import {QuoteLink as component} from './QuoteLink';
+
+export const Story: StoryObj<typeof component> = {};
+Story.storyName = 'QuoteLink';
+
+export default {
+    title: 'Experiments / QuoteLink',
+    component,
+};

package.json

@@ -213,6 +213,7 @@
     "@diplodoc/html-extension": "^2.5.0",
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
+    "@diplodoc/quote-link-extension": "0.0.0",
     "@diplodoc/tabs-extension": "^3.5.1",
     "@diplodoc/transform": "^4.43.0",
     "@gravity-ui/eslint-config": "3.3.0",
@@ -295,11 +296,12 @@
   },
   "peerDependencies": {
     "@diplodoc/cut-extension": "^0.5.0 || ^0.6.1 || ^0.7.1",
-    "@diplodoc/folding-headings-extension": "^0.1.0",
     "@diplodoc/file-extension": "^0.2.1",
+    "@diplodoc/folding-headings-extension": "^0.1.0",
     "@diplodoc/html-extension": "^2.3.2",
     "@diplodoc/latex-extension": "^1.0.3",
     "@diplodoc/mermaid-extension": "^1.0.0",
+    "@diplodoc/quote-link-extension": "^0.0.0",
     "@diplodoc/tabs-extension": "^3.5.1",
     "@diplodoc/transform": "^4.43.0",
     "@gravity-ui/uikit": "^7.1.0",

src/bundle/config/action-names.ts

@@ -41,6 +41,7 @@ const names = [
     'orderedList',
     'paragraph',
     'quote',
+    'quoteLink',
     'redo',
     'sinkListItem',
     'strike',

src/bundle/config/icons.ts

@@ -1,6 +1,7 @@
 import {
     BoldIcon,
     CheckListIcon,
+    CircleLinkIcon,
     CodeBlockIcon,
     CodeInlineIcon,
     CutIcon,
@@ -72,6 +73,7 @@ type Icon =
     | 'image'
     | 'table'
     | 'quote'
+    | 'quoteLink'
     | 'checklist'
     | 'horizontalRule'
     | 'file'
@@ -125,6 +127,7 @@ export const icons: Icons = {
 
     table: {data: TableIcon},
     quote: {data: QuoteIcon},
+    quoteLink: {data: CircleLinkIcon},
     checklist: {data: CheckListIcon},
 
     html: {data: HtmlBlockIcon},

src/bundle/config/markup.tsx

@@ -4,6 +4,7 @@
 
 import {i18n} from '../../i18n/menubar';
 import {
+    insertBlockquoteLink,
     insertHRule,
     insertLink,
     insertMermaidDiagram,
@@ -197,6 +198,17 @@ export const mQuoteButton: MToolbarSingleItemData = {
 };
 export const mQuoteItemData = mQuoteButton;
 
+export const mQuoteLinkButton: MToolbarSingleItemData = {
+    id: ActionName.quoteLink,
+    type: ToolbarDataType.SingleButton,
+    title: i18n.bind(null, 'quotelink'),
+    icon: icons.quoteLink,
+    exec: (e) => insertBlockquoteLink(e.cm),
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mQuoteLinkItemData = mQuoteLinkButton;
+
 export const mCutButton: MToolbarSingleItemData = {
     id: ActionName.yfm_cut,
     type: ToolbarDataType.SingleButton,

src/bundle/config/wysiwyg.ts

@@ -271,6 +271,19 @@ export const wMermaidItemData: WToolbarSingleItemData = {
     isEnable: (e) => e.actions.createMermaid.isEnable(),
 };
 
+export const wQuoteLinkItemData: WToolbarSingleItemData = {
+    id: ActionName.quoteLink,
+    type: ToolbarDataType.SingleButton,
+    title: i18n.bind(null, 'quotelink'),
+    icon: icons.quoteLink,
+    exec: (e) => {
+        e.actions.quoteLink.run();
+        e.actions.addLinkToQuoteLink.run();
+    },
+    isActive: (e) => e.actions.quoteLink.isActive(),
+    isEnable: (e) => e.actions.quoteLink.isEnable(),
+};
+
 export const wCodeBlockItemData: WToolbarItemData = {
     id: ActionName.code_block,
     title: i18n.bind(null, 'codeblock'),

src/extensions/additional/QuoteLink/PlaceholderWidget/commands.ts

@@ -0,0 +1,12 @@
+import type {Command} from 'prosemirror-state';
+
+import type {ExtensionDeps} from '#core';
+
+import {addPlaceholder} from './descriptor';
+
+export const addQuoteLinkPlaceholder =
+    (deps: ExtensionDeps): Command =>
+    (state, dispatch) => {
+        dispatch?.(addPlaceholder(state.tr, deps).scrollIntoView());
+        return true;
+    };

src/extensions/additional/QuoteLink/PlaceholderWidget/descriptor.tsx

@@ -0,0 +1,97 @@
+import type React from 'react';
+
+import type {Transaction} from 'prosemirror-state';
+import {TextSelection} from 'prosemirror-state';
+import type {EditorView} from 'prosemirror-view';
+
+import type {ExtensionDeps} from '#core';
+import {
+    LinkAttr,
+    ReactWidgetDescriptor,
+    linkType,
+    normalizeUrlFactory,
+    pType,
+    removeDecoration,
+} from 'src/extensions';
+import {
+    LinkPlaceholderWidget,
+    type LinkPlaceholderWidgetProps,
+} from 'src/extensions/markdown/Link/PlaceholderWidget/widget';
+import {isTextSelection} from 'src/utils';
+
+export class QuoteLinkWidgetDescriptor extends ReactWidgetDescriptor {
+    #domElem;
+    #view?: EditorView;
+    #getPos?: () => number;
+    #schema?: ExtensionDeps['schema'];
+
+    private normalizeUrl;
+
+    constructor(initPos: number, deps: ExtensionDeps) {
+        super(initPos, 'link-empty');
+        this.#domElem = document.createElement('span');
+        this.#schema = deps.schema;
+        this.normalizeUrl = normalizeUrlFactory(deps);
+    }
+
+    getDomElem(): HTMLElement {
+        return this.#domElem;
+    }
+
+    renderReactElement(view: EditorView, getPos: () => number): React.ReactElement {
+        this.#view = view;
+        this.#getPos = getPos;
+        return <LinkPlaceholderWidget onCancel={this.onCancel} onSubmit={this.onSubmit} />;
+    }
+
+    onCancel: LinkPlaceholderWidgetProps['onCancel'] = () => {
+        if (!this.#view) return;
+
+        this.#view.dispatch(removeDecoration(this.#view.state.tr, this.id));
+        this.#view.focus();
+    };
+
+    onSubmit: LinkPlaceholderWidgetProps['onSubmit'] = (params) => {
+        const normalizeResult = this.normalizeUrl(params.url);
+        if (!normalizeResult || !this.#view || !this.#getPos) return;
+
+        let tr = this.#view.state.tr;
+
+        const {url} = normalizeResult;
+        const text = params.text.trim() || normalizeResult.text;
+
+        const from = this.#getPos();
+        const isAllSelected =
+            from === 1 && (!isTextSelection(tr.selection) || !tr.selection.$cursor);
+        const to = from + text.length + (isAllSelected ? 1 : 0);
+
+        tr = tr.insertText(text, from);
+        tr = tr.addMark(
+            from,
+            to,
+            linkType(this.#view.state.schema).create({
+                [LinkAttr.Href]: url,
+                [LinkAttr.DataQuoteLink]: true,
+            }),
+        );
+
+        tr = removeDecoration(tr, this.id);
+
+        tr = tr.insert(
+            to,
+            pType(this.#view.state.schema).create(null, text ? this.#schema?.text(text) : null),
+        );
+        tr.setSelection(TextSelection.create(tr.doc, to + 1 + text.length + 1));
+
+        this.#view.dispatch(tr);
+        this.#view.focus();
+    };
+}
+
+export const addPlaceholder = (tr: Transaction, deps: ExtensionDeps) => {
+    const isAllSelected =
+        tr.selection.from === 0 && (!isTextSelection(tr.selection) || !tr.selection.$cursor);
+    return new QuoteLinkWidgetDescriptor(tr.selection.from + (isAllSelected ? 1 : 0), deps).applyTo(
+        tr,
+    );
+};