<div class="anchor" id="information"></div>
<a
- *ngIf="html.description"
+ *ngIf="descriptionContent"
class="anchor-link"
routerLink="/about/instance"
fragment="information"
<h3 i18n class="section-title">Description</h3>
</a>
- <div [innerHTML]="html.description"></div>
+ <my-custom-markup-container [content]="descriptionContent"></my-custom-markup-container>
</div>
<div class="anchor" id="moderation"></div>
import { ViewportScroller } from '@angular/common'
-import { AfterViewChecked, Component, OnInit, ViewChild } from '@angular/core'
+import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
import { Notifier } from '@app/core'
-import { copyToClipboard } from '../../../root-helpers/utils'
+import { CustomMarkupService } from '@app/shared/shared-custom-markup'
import { InstanceService } from '@app/shared/shared-instance'
-import { ServerConfig } from '@shared/models'
+import { About, ServerConfig } from '@shared/models'
+import { copyToClipboard } from '../../../root-helpers/utils'
import { ResolverData } from './about-instance.resolver'
@Component({
styleUrls: [ './about-instance.component.scss' ]
})
export class AboutInstanceComponent implements OnInit, AfterViewChecked {
+ @ViewChild('descriptionWrapper') descriptionWrapper: ElementRef<HTMLInputElement>
@ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent
shortDescription = ''
+ descriptionContent: string
html = {
- description: '',
terms: '',
codeOfConduct: '',
moderationInformation: '',
private lastScrollHash: string
constructor (
+ private customMarkupService: CustomMarkupService,
private viewportScroller: ViewportScroller,
private route: ActivatedRoute,
private notifier: Notifier,
this.categories = categories
this.shortDescription = about.instance.shortDescription
+ this.descriptionContent = about.instance.description
this.html = await this.instanceService.buildHtml(about)
+ await this.injectDescription(about)
+
this.initialized = true
}
copyToClipboard(link)
this.notifier.success(link, $localize `Link copied`)
}
+
+ private async injectDescription (about: About) {
+ const element = await this.customMarkupService.buildElement(about.instance.description)
+
+ this.descriptionWrapper.nativeElement.appendChild(element)
+ }
}
import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
import { AboutPeertubeContributorsComponent } from '@app/+about/about-peertube/about-peertube-contributors.component'
import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
+import { SharedCustomMarkupModule } from '@app/shared/shared-custom-markup'
import { SharedFormModule } from '@app/shared/shared-forms'
import { SharedGlobalIconModule } from '@app/shared/shared-icons'
import { SharedInstanceModule } from '@app/shared/shared-instance'
SharedMainModule,
SharedFormModule,
SharedInstanceModule,
- SharedGlobalIconModule
+ SharedGlobalIconModule,
+ SharedCustomMarkupModule
],
declarations: [
<my-markdown-textarea
name="instanceCustomHomepageContent" formControlName="content" textareaMaxWidth="90%" textareaHeight="300px"
- [customMarkdownRenderer]="customMarkdownRenderer"
+ [customMarkdownRenderer]="getCustomMarkdownRenderer()"
[classes]="{ 'input-error': formErrors['instanceCustomHomepage.content'] }"
></my-markdown-textarea>
templateUrl: './edit-homepage.component.html',
styleUrls: [ './edit-custom-config.component.scss' ]
})
-export class EditHomepageComponent implements OnInit {
+export class EditHomepageComponent {
@Input() form: FormGroup
@Input() formErrors: any
}
- ngOnInit () {
- this.customMarkdownRenderer = async (text: string) => {
- return this.customMarkup.buildElement(text)
- }
+ getCustomMarkdownRenderer () {
+ return this.customMarkup.getCustomMarkdownRenderer()
}
}
</div>
<div class="form-group">
- <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
+ <label i18n for="instanceDescription">Description</label>
+ <div class="label-small-info">
+ <my-custom-markup-help></my-custom-markup-help>
+ </div>
<my-markdown-textarea
name="instanceDescription" formControlName="description" textareaMaxWidth="500px"
+ [customMarkdownRenderer]="getCustomMarkdownRenderer()"
[classes]="{ 'input-error': formErrors['instance.description'] }"
></my-markdown-textarea>
import { SelectOptionsItem } from 'src/types/select-options-item.model'
import { Component, Input } from '@angular/core'
import { FormGroup } from '@angular/forms'
+import { CustomMarkupService } from '@app/shared/shared-custom-markup'
@Component({
selector: 'my-edit-instance-information',
@Input() languageItems: SelectOptionsItem[] = []
@Input() categoryItems: SelectOptionsItem[] = []
+
+ constructor (private customMarkup: CustomMarkupService) {
+
+ }
+
+ getCustomMarkdownRenderer () {
+ return this.customMarkup.getCustomMarkdownRenderer()
+ }
}
<div class="root margin-content">
- <div #contentWrapper></div>
+ <my-custom-markup-container [content]="homepageContent"></my-custom-markup-container>
</div>
-
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
-import { CustomMarkupService } from '@app/shared/shared-custom-markup'
import { CustomPageService } from '@app/shared/shared-main/custom-page'
@Component({
export class HomeComponent implements OnInit {
@ViewChild('contentWrapper') contentWrapper: ElementRef<HTMLInputElement>
+ homepageContent: string
+
constructor (
- private customMarkupService: CustomMarkupService,
private customPageService: CustomPageService
) { }
async ngOnInit () {
this.customPageService.getInstanceHomepage()
- .subscribe(async ({ content }) => {
- const element = await this.customMarkupService.buildElement(content)
- this.contentWrapper.nativeElement.appendChild(element)
- })
+ .subscribe(({ content }) => this.homepageContent = content)
}
}
--- /dev/null
+<div #contentWrapper></div>
--- /dev/null
+import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
+import { CustomMarkupService } from './custom-markup.service'
+
+@Component({
+ selector: 'my-custom-markup-container',
+ templateUrl: './custom-markup-container.component.html'
+})
+export class CustomMarkupContainerComponent implements OnChanges {
+ @ViewChild('contentWrapper') contentWrapper: ElementRef<HTMLInputElement>
+
+ @Input() content: string
+
+ constructor (
+ private customMarkupService: CustomMarkupService
+ ) { }
+
+ async ngOnChanges () {
+ await this.buildElement()
+ }
+
+ private async buildElement () {
+ const element = await this.customMarkupService.buildElement(this.content)
+ this.contentWrapper.nativeElement.appendChild(element)
+ }
+
+}
VideoMiniatureMarkupData,
VideosListMarkupData
} from '@shared/models'
-import { ButtonMarkupComponent } from './button-markup.component'
-import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
import { DynamicElementService } from './dynamic-element.service'
-import { EmbedMarkupComponent } from './embed-markup.component'
-import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component'
-import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component'
-import { VideosListMarkupComponent } from './videos-list-markup.component'
+import {
+ ButtonMarkupComponent,
+ ChannelMiniatureMarkupComponent,
+ EmbedMarkupComponent,
+ PlaylistMiniatureMarkupComponent,
+ VideoMiniatureMarkupComponent,
+ VideosListMarkupComponent
+} from './peertube-custom-tags'
type BuilderFunction = (el: HTMLElement) => ComponentRef<any>
'peertube-videos-list': el => this.videosListBuilder(el)
}
+ private customMarkdownRenderer: (text: string) => Promise<HTMLElement>
+
constructor (
private dynamicElementService: DynamicElementService,
private markdown: MarkdownService
- ) { }
+ ) {
+ this.customMarkdownRenderer = async (text: string) => this.buildElement(text)
+ }
+
+ getCustomMarkdownRenderer () {
+ return this.customMarkdownRenderer
+ }
async buildElement (text: string) {
const html = await this.markdown.customPageMarkdownToHTML(text, this.getSupportedTags())
export * from './custom-markup.service'
+export * from './custom-markup-container.component'
export * from './dynamic-element.service'
export * from './custom-markup-help.component'
export * from './shared-custom-markup.module'
import { Component, Input } from '@angular/core'
-import { VideoChannel } from '../shared-main'
+import { VideoChannel } from '../../shared-main'
/*
* Markup component that creates a button
import { Component, Input, OnInit } from '@angular/core'
-import { VideoChannel, VideoChannelService } from '../shared-main'
+import { VideoChannel, VideoChannelService } from '../../shared-main'
/*
* Markup component that creates a channel miniature only
--- /dev/null
+export * from './button-markup.component'
+export * from './channel-miniature-markup.component'
+export * from './embed-markup.component'
+export * from './playlist-miniature-markup.component'
+export * from './video-miniature-markup.component'
+export * from './videos-list-markup.component'
import { Component, Input, OnInit } from '@angular/core'
-import { MiniatureDisplayOptions } from '../shared-video-miniature'
-import { VideoPlaylist, VideoPlaylistService } from '../shared-video-playlist'
+import { MiniatureDisplayOptions } from '../../shared-video-miniature'
+import { VideoPlaylist, VideoPlaylistService } from '../../shared-video-playlist'
/*
* Markup component that creates a playlist miniature only
import { Component, Input, OnInit } from '@angular/core'
import { AuthService } from '@app/core'
-import { Video, VideoService } from '../shared-main'
-import { MiniatureDisplayOptions } from '../shared-video-miniature'
+import { Video, VideoService } from '../../shared-main'
+import { MiniatureDisplayOptions } from '../../shared-video-miniature'
/*
* Markup component that creates a video miniature only
import { Component, Input, OnInit } from '@angular/core'
import { AuthService } from '@app/core'
import { VideoSortField } from '@shared/models'
-import { Video, VideoService } from '../shared-main'
-import { MiniatureDisplayOptions } from '../shared-video-miniature'
+import { Video, VideoService } from '../../shared-main'
+import { MiniatureDisplayOptions } from '../../shared-video-miniature'
/*
* Markup component list videos depending on criterias
import { SharedMainModule } from '../shared-main'
import { SharedVideoMiniatureModule } from '../shared-video-miniature'
import { SharedVideoPlaylistModule } from '../shared-video-playlist'
-import { ButtonMarkupComponent } from './button-markup.component'
-import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
+import { CustomMarkupContainerComponent } from './custom-markup-container.component'
import { CustomMarkupHelpComponent } from './custom-markup-help.component'
import { CustomMarkupService } from './custom-markup.service'
import { DynamicElementService } from './dynamic-element.service'
-import { EmbedMarkupComponent } from './embed-markup.component'
-import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component'
-import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component'
-import { VideosListMarkupComponent } from './videos-list-markup.component'
+import {
+ ButtonMarkupComponent,
+ ChannelMiniatureMarkupComponent,
+ EmbedMarkupComponent,
+ PlaylistMiniatureMarkupComponent,
+ VideoMiniatureMarkupComponent,
+ VideosListMarkupComponent
+} from './peertube-custom-tags'
@NgModule({
imports: [
EmbedMarkupComponent,
VideosListMarkupComponent,
ButtonMarkupComponent,
- CustomMarkupHelpComponent
+ CustomMarkupHelpComponent,
+ CustomMarkupContainerComponent
],
exports: [
VideosListMarkupComponent,
EmbedMarkupComponent,
ButtonMarkupComponent,
- CustomMarkupHelpComponent
+ CustomMarkupHelpComponent,
+ CustomMarkupContainerComponent
],
providers: [
about: About
aboutHtml = {
- description: '',
terms: '',
codeOfConduct: '',
moderationInformation: '',
async buildHtml (about: About) {
const html = {
- description: '',
terms: '',
codeOfConduct: '',
moderationInformation: '',
import { NgModule } from '@angular/core'
import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
+import { SharedCustomMarkupModule } from '../shared-custom-markup'
import { SharedMainModule } from '../shared-main/shared-main.module'
import { FeatureBooleanComponent } from './feature-boolean.component'
import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
@NgModule({
imports: [
SharedMainModule,
- NgbAccordionModule
+ NgbAccordionModule,
+ SharedCustomMarkupModule
],
declarations: [
projects / github / Chocobozzz / PeerTube.git / commitdiff
