Andrii Shvaika
5 years ago
21 changed files with 517 additions and 25 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,18 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2021 The Thingsboard Authors |
|||
|
|||
Licensed 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. |
|||
|
|||
--> |
|||
<markdown [data]="markdownText" class="tb-markdown-view {{markdownClass}}" (click)="markdownClick($event)"></markdown> |
|||
@ -0,0 +1,130 @@ |
|||
/** |
|||
* Copyright © 2016-2021 The Thingsboard Authors |
|||
* |
|||
* Licensed 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. |
|||
*/ |
|||
|
|||
.tb-markdown-view { |
|||
display: block; |
|||
::ng-deep { |
|||
h1 { |
|||
font-size: 32px; |
|||
padding-right: 60px; |
|||
} |
|||
|
|||
h1, h2, h3, h4, h5, h6 { |
|||
line-height: normal; |
|||
font-weight: 500; |
|||
margin-bottom: 30px; |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #ccc; |
|||
} |
|||
|
|||
p { |
|||
font-size: 16px; |
|||
font-weight: 400; |
|||
line-height: 1.25em; |
|||
margin: 0; |
|||
} |
|||
|
|||
p+p { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
table { |
|||
width: 100%; |
|||
border: 1px solid #ccc; |
|||
border-spacing: 0; |
|||
margin-top: 30px; |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
thead { |
|||
background-color: #555; |
|||
color: #fff; |
|||
} |
|||
|
|||
th, td { |
|||
font-size: .85em; |
|||
padding: 8px; |
|||
margin: 0; |
|||
text-align: left; |
|||
} |
|||
|
|||
td[align=center], th[align=center] { |
|||
text-align: center; |
|||
} |
|||
|
|||
td[align=right], th[align=right] { |
|||
text-align: right; |
|||
} |
|||
|
|||
tr:nth-child(even) { |
|||
background-color: #f7f7f7; |
|||
} |
|||
|
|||
code:not([class*=language-]) { |
|||
background: #f5f5f5; |
|||
border-radius: 2px; |
|||
color: #dd4a68; |
|||
padding: 2px 4px; |
|||
} |
|||
|
|||
div.code-wrapper { |
|||
position: relative; |
|||
button.clipboard-btn { |
|||
cursor: pointer; |
|||
margin: 0; |
|||
border: 0; |
|||
outline: none; |
|||
position: absolute; |
|||
top: 5px; |
|||
right: 5px; |
|||
background: #fff; |
|||
box-shadow: 0 1px 8px 0 rgba(0,0,0,0.2), 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12); |
|||
border-radius: 5px; |
|||
opacity: 0; |
|||
transition: opacity .3s; |
|||
padding: 3px 6px; |
|||
line-height: 16px; |
|||
img { |
|||
width: 18px; |
|||
} |
|||
&:hover { |
|||
background: #f9f9f9; |
|||
} |
|||
&:active { |
|||
background-color: #ececec; |
|||
box-shadow: inset 1px -1px 4px 0px rgba(0,0,0,0.4); |
|||
} |
|||
} |
|||
&:hover { |
|||
button.clipboard-btn { |
|||
opacity: .85; |
|||
} |
|||
} |
|||
} |
|||
|
|||
th, td { |
|||
div.code-wrapper { |
|||
display: inline-block; |
|||
button.clipboard-btn { |
|||
top: -5px; |
|||
right: -30px; |
|||
padding: 0 3px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,116 @@ |
|||
///
|
|||
/// Copyright © 2016-2021 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed 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 { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { DatasourceData } from '@shared/models/widget.models'; |
|||
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
|||
import { |
|||
fillPattern, flatData, |
|||
parseData, |
|||
parseFunction, |
|||
processPattern, |
|||
safeExecute |
|||
} from '@home/components/widget/lib/maps/common-maps-utils'; |
|||
import { FormattedData } from '@home/components/widget/lib/maps/map-models'; |
|||
import { hashCode, isNotEmptyStr } from '@core/utils'; |
|||
import cssjs from '@core/css/css'; |
|||
|
|||
interface MarkdownWidgetSettings { |
|||
markdownTextPattern: string; |
|||
useMarkdownTextFunction: boolean; |
|||
markdownTextFunction: string; |
|||
markdownCss: string; |
|||
} |
|||
|
|||
type MarkdownTextFunction = (data: FormattedData[]) => string; |
|||
|
|||
@Component({ |
|||
selector: 'tb-markdown-widget ', |
|||
templateUrl: './markdown-widget.component.html', |
|||
styleUrls: ['./markdown-widget.component.scss'] |
|||
}) |
|||
export class MarkdownWidgetComponent extends PageComponent implements OnInit { |
|||
|
|||
settings: MarkdownWidgetSettings; |
|||
markdownTextFunction: MarkdownTextFunction; |
|||
|
|||
@Input() |
|||
ctx: WidgetContext; |
|||
|
|||
markdownText: string; |
|||
|
|||
markdownClass: string; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private cd: ChangeDetectorRef) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.ctx.$scope.markdownWidget = this; |
|||
this.settings = this.ctx.settings; |
|||
this.markdownTextFunction = this.settings.useMarkdownTextFunction ? parseFunction(this.settings.markdownTextFunction, ['data']) : null; |
|||
this.markdownClass = 'markdown-widget'; |
|||
const cssString = this.settings.markdownCss; |
|||
if (isNotEmptyStr(cssString)) { |
|||
const cssParser = new cssjs(); |
|||
cssParser.testMode = false; |
|||
this.markdownClass += '-' + hashCode(cssString); |
|||
cssParser.cssPreviewNamespace = 'tb-markdown-view.' + this.markdownClass; |
|||
cssParser.createStyleElement(this.markdownClass, cssString); |
|||
} |
|||
} |
|||
|
|||
public onDataUpdated() { |
|||
let initialData: DatasourceData[]; |
|||
if (this.ctx.data?.length) { |
|||
initialData = this.ctx.data; |
|||
} else if (this.ctx.datasources?.length) { |
|||
initialData = [ |
|||
{ |
|||
datasource: this.ctx.datasources[0], |
|||
dataKey: { |
|||
type: DataKeyType.attribute, |
|||
name: 'empty' |
|||
}, |
|||
data: [] |
|||
} |
|||
]; |
|||
} |
|||
let markdownText: string; |
|||
if (initialData) { |
|||
const data = parseData(initialData); |
|||
markdownText = this.settings.useMarkdownTextFunction ? |
|||
safeExecute(this.markdownTextFunction, [data]) : this.settings.markdownTextPattern; |
|||
const allData = flatData(data); |
|||
const replaceInfo = processPattern(markdownText, allData); |
|||
markdownText = fillPattern(markdownText, replaceInfo, allData); |
|||
} |
|||
if (this.markdownText !== markdownText) { |
|||
this.markdownText = markdownText; |
|||
this.cd.detectChanges(); |
|||
} |
|||
} |
|||
|
|||
markdownClick($event: MouseEvent) { |
|||
this.ctx.actionsApi.elementClick($event); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
/* |
|||
* Copyright © 2016-2021 The Thingsboard Authors |
|||
* |
|||
* Licensed 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 * as React from 'react'; |
|||
import ThingsboardAceEditor from './json-form-ace-editor'; |
|||
import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models'; |
|||
|
|||
class ThingsboardMarkdown extends React.Component<JsonFormFieldProps, JsonFormFieldState> { |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<ThingsboardAceEditor {...this.props} mode='markdown' {...this.state}></ThingsboardAceEditor> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default ThingsboardMarkdown; |
|||
@ -0,0 +1,99 @@ |
|||
///
|
|||
/// Copyright © 2016-2021 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed 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 { MarkedOptions, MarkedRenderer } from 'ngx-markdown'; |
|||
|
|||
export function markedOptionsFactory(): MarkedOptions { |
|||
const renderer = new MarkedRenderer(); |
|||
const renderer2 = new MarkedRenderer(); |
|||
|
|||
const copyCodeBlock = '{:copy-code}'; |
|||
|
|||
let id = 1; |
|||
|
|||
renderer.code = (code: string, language: string | undefined, isEscaped: boolean) => { |
|||
if (code.endsWith(copyCodeBlock)) { |
|||
code = code.substring(0, code.length - copyCodeBlock.length); |
|||
const content = renderer2.code(code, language, isEscaped); |
|||
id++; |
|||
return wrapCopyCode(id, content, code); |
|||
} else { |
|||
return renderer2.code(code, language, isEscaped); |
|||
} |
|||
}; |
|||
|
|||
renderer.tablecell = (content: string, flags: { |
|||
header: boolean; |
|||
align: 'center' | 'left' | 'right' | null; |
|||
}) => { |
|||
if (content.endsWith(copyCodeBlock)) { |
|||
content = content.substring(0, content.length - copyCodeBlock.length); |
|||
id++; |
|||
content = wrapCopyCode(id, content, content); |
|||
} |
|||
return renderer2.tablecell(content, flags); |
|||
}; |
|||
|
|||
return { |
|||
renderer, |
|||
headerIds: true, |
|||
gfm: true, |
|||
breaks: false, |
|||
pedantic: false, |
|||
smartLists: true, |
|||
smartypants: false, |
|||
}; |
|||
} |
|||
|
|||
function wrapCopyCode(id: number, content: string, code: string): string { |
|||
return '<div class="code-wrapper">' + content + '<span id="copyCodeId' + id + '" style="display: none;">' + code + '</span>' + |
|||
'<button id="copyCodeBtn' + id + '" onClick="markdownCopyCode(' + id + ')" ' + |
|||
'class="clipboard-btn"><img src="https://clipboardjs.com/assets/images/clippy.svg" alt="Copy to clipboard">' + |
|||
'</button></div>'; |
|||
} |
|||
|
|||
(window as any).markdownCopyCode = (id: number) => { |
|||
const text = $('#copyCodeId' + id).text(); |
|||
navigator.clipboard.writeText(text).then(() => { |
|||
import('tooltipster').then( |
|||
() => { |
|||
const copyBtn = $('#copyCodeBtn' + id); |
|||
if (!copyBtn.hasClass('tooltipstered')) { |
|||
copyBtn.tooltipster( |
|||
{ |
|||
content: 'Copied!', |
|||
theme: 'tooltipster-shadow', |
|||
delay: 0, |
|||
trigger: 'custom', |
|||
triggerClose: { |
|||
click: true, |
|||
tap: true, |
|||
scroll: true, |
|||
mouseleave: true |
|||
}, |
|||
side: 'bottom', |
|||
distance: 12, |
|||
trackOrigin: true |
|||
} |
|||
); |
|||
} |
|||
const tooltip = copyBtn.tooltipster('instance'); |
|||
tooltip.open(); |
|||
} |
|||
); |
|||
}); |
|||
}; |
|||
Loading…
Reference in new issue