mirror of https://github.com/apache/nifi.git
[NIFI-13844] add copy button to markdown code syntax highlighting (#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 #9348
This commit is contained in:
Scott Aslan
GitHub
parent
da407b106f
commit
f3fcedc864
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ 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';
|
||||
|
|
@ -55,7 +55,7 @@ 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 {}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 {}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -27,6 +27,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",
|
||||
|
|
@ -10799,7 +10800,6 @@
|
|||
"version": "2.0.11",
|
||||
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
|
||||
"integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"good-listener": "^1.2.2",
|
||||
"select": "^1.1.2",
|
||||
|
|
@ -12430,8 +12430,7 @@
|
|||
"node_modules/delegate": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
|
||||
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
|
||||
"optional": true
|
||||
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
|
||||
},
|
||||
"node_modules/delegates": {
|
||||
"version": "1.0.0",
|
||||
|
|
@ -12756,9 +12755,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.35",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.35.tgz",
|
||||
"integrity": "sha512-hOSRInrIDm0Brzp4IHW2F/VM+638qOL2CzE0DgpnGzKW27C95IqqeqgKz/hxHGnvPxvQGpHUGD5qRVC9EZY2+A==",
|
||||
"version": "1.5.36",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.36.tgz",
|
||||
"integrity": "sha512-HYTX8tKge/VNp6FGO+f/uVDmUkq+cEfcxYhKf15Akc4M5yxt5YmorwlAitKWjWhWQnKcDRBAQKXkhqqXMqcrjw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/emittery": {
|
||||
|
|
@ -14540,7 +14539,6 @@
|
|||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
|
||||
"integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"delegate": "^3.1.2"
|
||||
}
|
||||
|
|
@ -22388,8 +22386,7 @@
|
|||
"node_modules/select": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
|
||||
"integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==",
|
||||
"optional": true
|
||||
"integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
|
||||
},
|
||||
"node_modules/select-hose": {
|
||||
"version": "2.0.0",
|
||||
|
|
@ -23793,8 +23790,7 @@
|
|||
"node_modules/tiny-emitter": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
|
||||
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
|
||||
"optional": true
|
||||
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
|
||||
},
|
||||
"node_modules/tinyexec": {
|
||||
"version": "0.3.0",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue