feat: header anchor button (#698)

Author: PahaN47

e2e/fixtures/utils/storyMeta.ts

@@ -3,22 +3,25 @@ import '@diplodoc/transform/dist/css/yfm.min.css';
 import '@diplodoc/transform/dist/css/print.css';
 import '@diplodoc/transform/dist/js/yfm.js';
 
+import {OptionsType} from '../../../lib/typings';
+
 import {transformMd} from './transformPreset';
 
 export type MarkdownSnippetProps = {
     snippet: string;
     additionalRootClassnames?: string[];
+    extraOptions?: OptionsType;
 };
 
 export type MarkdownSnippetStory = StoryObj<MarkdownSnippetProps>;
 
 export const getSnippetMeta = (): Meta<MarkdownSnippetProps> => ({
-    render: ({snippet, additionalRootClassnames = []}) => {
+    render: ({snippet, additionalRootClassnames = [], extraOptions}) => {
         const div = document.createElement('div');
 
         div.classList.add('yfm', ...additionalRootClassnames);
         div.id = 'yfm-root';
-        div.innerHTML = transformMd(snippet);
+        div.innerHTML = transformMd(snippet, extraOptions);
 
         return div;
     },

e2e/fixtures/utils/transformPreset.ts

@@ -13,7 +13,9 @@ import table from '@diplodoc/transform/lib/plugins/table';
 import notes from '@diplodoc/transform/lib/plugins/notes';
 import transform from '@diplodoc/transform';
 
-const transformOptions = {
+import {OptionsType} from '../../../lib/typings';
+
+const transformOptions: OptionsType = {
     lang: 'en',
     path: '',
     plugins: [
@@ -33,8 +35,8 @@ const transformOptions = {
     ],
 };
 
-export const transformMd = (input: string): string => {
-    const {result} = transform(input, transformOptions);
+export const transformMd = (input: string, customOptions?: OptionsType): string => {
+    const {result} = transform(input, {...transformOptions, ...customOptions});
 
     return result.html;
 };

e2e/playwright/playwright.config.ts

@@ -31,7 +31,13 @@ export default defineConfig({
     projects: [
         {
             name: 'chromium',
-            use: {...devices['Desktop Chrome'], viewport: narrowerViewport},
+            use: {
+                ...devices['Desktop Chrome'],
+                viewport: narrowerViewport,
+                contextOptions: {
+                    permissions: ['clipboard-read', 'clipboard-write'],
+                },
+            },
         },
 
         {

e2e/stories/anchor/ClipboardAnchor.stories.ts

@@ -0,0 +1,29 @@
+import dedent from 'ts-dedent';
+
+import {MarkdownSnippetStory, getSnippetMeta} from '../../fixtures/utils/storyMeta';
+
+export default {...getSnippetMeta(), title: 'Builtins/Anchor/ClipboardAnchor'};
+
+export const Base: MarkdownSnippetStory = {
+    name: 'Base Clipboard Anchor',
+    args: {
+        snippet: dedent`
+        ## Title
+        `,
+        extraOptions: {
+            useCommonAnchorButtons: true,
+        },
+    },
+};
+
+export const Custom: MarkdownSnippetStory = {
+    name: 'Custom Clipboard Anchor',
+    args: {
+        snippet: dedent`
+        ## Title {#test-id}
+        `,
+        extraOptions: {
+            useCommonAnchorButtons: true,
+        },
+    },
+};

e2e/tests/anchor.spec.ts

@@ -0,0 +1,32 @@
+import {describeStory} from 'fixtures/utils/testStoryModule';
+
+import * as stories from '../stories/anchor/ClipboardAnchor.stories';
+import {expect, test} from '../fixtures/test';
+
+test.beforeEach(({browserName}) =>
+    test.skip(browserName !== 'chromium', `"${browserName}" does not support clipboard`),
+);
+
+describeStory(stories, 'Base', () => {
+    test('Clipboard anchor click should return correct page url', async ({yfmRoot, page}) => {
+        const anchorButton = yfmRoot.getByRole('button');
+        await anchorButton.click();
+
+        const handle = await page.evaluateHandle(() => navigator.clipboard.readText());
+        const clipboardContent = await handle.jsonValue();
+
+        expect(clipboardContent).toEqual(page.url() + '#title');
+    });
+});
+
+describeStory(stories, 'Custom', () => {
+    test('Clipboard anchor click should return custom anchor url', async ({yfmRoot, page}) => {
+        const anchorButton = yfmRoot.getByRole('button');
+        await anchorButton.click();
+
+        const handle = await page.evaluateHandle(() => navigator.clipboard.readText());
+        const clipboardContent = await handle.jsonValue();
+
+        expect(clipboardContent).toEqual(page.url() + '#test-id');
+    });
+});

playground/package-lock.json

@@ -72,7 +72,7 @@
   },
   "dependencies": {
     "@diplodoc/markdown-it-markdown-renderer": "^0.14.4",
-    "@doc-tools/yfm-editor": "^12.2.1",
+    "@doc-tools/yfm-editor": "^12.4.0",
     "@gravity-ui/page-constructor": "^5.12.0",
     "@monaco-editor/react": "^4.5.2",
     "js-yaml": "^4.1.0",

playground/package.json

@@ -0,0 +1,18 @@
+import {copyToClipboard, getEventTarget, isCustom} from './utils';
+
+const ANCHOR_BUTTON_SELECTOR = '.yfm-clipboard-anchor';
+
+if (typeof document !== 'undefined') {
+    document.addEventListener('click', (event) => {
+        const target = getEventTarget(event) as HTMLElement;
+
+        if (isCustom(event) || !target.matches(ANCHOR_BUTTON_SELECTOR)) {
+            return;
+        }
+
+        const href = target.getAttribute('data-href') || '';
+        const link = new URL(href, window.location.href).toString();
+
+        copyToClipboard(link);
+    });
+}

src/js/anchor.ts

@@ -1,2 +1,3 @@
 import './polyfill';
 import './code';
+import './anchor';

src/js/base.ts

@@ -1,28 +1,7 @@
-import {getEventTarget, isCustom} from './utils';
+import {copyToClipboard, getEventTarget, isCustom} from './utils';
 
 const BUTTON_SELECTOR = '.yfm-clipboard-button';
 
-function copyToClipboard(text: string) {
-    if (!text) {
-        return Promise.resolve();
-    }
-
-    if (navigator.clipboard && typeof navigator.clipboard.writeText) {
-        return navigator.clipboard.writeText(text);
-    }
-    const textarea = document.createElement('textarea');
-    textarea.setAttribute('style', 'position: absolute; left: 1000%');
-    textarea.textContent = text;
-    document.body.append(textarea);
-
-    textarea.select();
-    document.execCommand('copy');
-
-    document.body.removeChild(textarea);
-
-    return Promise.resolve();
-}
-
 function notifySuccess(svgButton: HTMLElement | null) {
     if (!svgButton) {
         return;