[NIFI-13844] add copy button to markdown code syntax highlighting (ap…

…ache#9348)

* [NIFI-13844] add copy button to markdown code syntax highlighting

* only show copy button on code block hover

* update markdown-clipboard-toolbar position and prism padding

This closes apache#9348

nifi-frontend/src/main/frontend/apps/nifi/project.json

@@ -43,7 +43,8 @@
                     "node_modules/prismjs/components/prism-xml-doc.min.js",
                     "node_modules/prismjs/components/prism-yaml.min.js",
                     "node_modules/prismjs/components/prism-sql.min.js",
-                    "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js"
+                    "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js",
+                    "node_modules/clipboard/dist/clipboard.min.js"
                 ],
                 "allowedCommonJsDependencies": ["codemirror"],
                 "preserveSymlinks": true

nifi-frontend/src/main/frontend/apps/nifi/src/app/app.module.ts

@@ -47,15 +47,15 @@ import { FlowConfigurationEffects } from './state/flow-configuration/flow-config
 import { ComponentStateEffects } from './state/component-state/component-state.effects';
 import { ErrorEffects } from './state/error/error.effects';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { PipesModule } from '@nifi/shared';
+import { CopyButtonComponent, PipesModule } from '@nifi/shared';
 import { DocumentationEffects } from './state/documentation/documentation.effects';
 import { ClusterSummaryEffects } from './state/cluster-summary/cluster-summary.effects';
 import { PropertyVerificationEffects } from './state/property-verification/property-verification.effects';
 import { loadingInterceptor } from './service/interceptors/loading.interceptor';
 import { LoginConfigurationEffects } from './state/login-configuration/login-configuration.effects';
 import { BannerTextEffects } from './state/banner-text/banner-text.effects';
 import { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions } from '@angular/material/tooltip';
-import { provideMarkdown } from 'ngx-markdown';
+import { CLIPBOARD_OPTIONS, provideMarkdown } from 'ngx-markdown';
 
 const entry = localStorage.getItem('disable-animations');
 let disableAnimations: string = entry !== null ? JSON.parse(entry).item : '';
@@ -121,7 +121,14 @@ export const customTooltipDefaults: MatTooltipDefaultOptions = {
             })
         ),
         { provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: customTooltipDefaults },
-        provideMarkdown()
+        provideMarkdown({
+            clipboardOptions: {
+                provide: CLIPBOARD_OPTIONS,
+                useValue: {
+                    buttonComponent: CopyButtonComponent
+                }
+            }
+        })
     ]
 })
 export class AppModule {}

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/documentation/ui/common/additional-details/additional-details.component.html

@@ -26,7 +26,7 @@
                     <ngx-skeleton-loader count="3"></ngx-skeleton-loader>
                 } @else {
                     @if (additionalDetailsState.additionalDetails; as additionalDetails) {
-                        <markdown [data]="additionalDetails" ngPreserveWhitespaces lineNumbers> </markdown>
+                        <markdown [data]="additionalDetails" ngPreserveWhitespaces lineNumbers clipboard> </markdown>
                     } @else if (additionalDetailsState.error) {
                         <div>
                             {{ additionalDetailsState.error }}

nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss

@@ -825,4 +825,13 @@
     ngx-skeleton-loader .skeleton-loader {
         background: $border-color;
     }
+
+    .markdown-clipboard-toolbar {
+        opacity: 0;
+        transition: opacity 250ms ease-out;
+    }
+
+    .markdown-clipboard-toolbar.hover {
+        opacity: 1;
+    }
 }

nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_prism-theme.scss

@@ -42,6 +42,11 @@
     );
     $selected-color: $material-theme-tertiary-palette-variant;
 
+    pre[class*='language-'] {
+        padding-top: 0.75rem;
+        padding-bottom: 0.75rem;
+    }
+
     code[class*='language-'],
     pre[class*='language-'] {
         color: if($is-material-dark, #f07178, #ec000c);

nifi-frontend/src/main/frontend/libs/shared/src/components/copy-button/copy-button.component.ts

@@ -0,0 +1,27 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+
+@Component({
+    selector: 'copy-button',
+    template: ` <button mat-icon-button class="primary-icon-button"><i class="fa fa-copy"></i></button>`,
+    imports: [MatIconButton],
+    standalone: true
+})
+export class CopyButtonComponent {}

nifi-frontend/src/main/frontend/libs/shared/src/components/index.ts

@@ -19,6 +19,7 @@ export * from './close-on-escape-dialog/close-on-escape-dialog.component';
 export * from './component-context/component-context.component';
 export * from './map-table/editors/text-editor/text-editor.component';
 export * from './map-table/map-table.component';
+export * from './copy-button/copy-button.component';
 export * from './new-map-table-entry-dialog/new-map-table-entry-dialog.component';
 export * from './resizable/resizable.component';
 export * from './tooltips/text-tip/text-tip.component';

nifi-frontend/src/main/frontend/package.json

@@ -33,6 +33,7 @@
         "@ngrx/store": "18.0.2",
         "@ngrx/store-devtools": "18.0.2",
         "@types/js-beautify": "^1.14.3",
+        "clipboard": "^2.0.11",
         "codemirror": "^5.65.16",
         "d3": "^7.8.5",
         "font-awesome": "4.7.0",