Merge pull request #6 from ianwesterfield/feature/display-rtf-articles

works

package.json

@@ -12,10 +12,8 @@
     "@angular/platform-server": "18.1.3",
     "@angular/router": "18.1.3",
     "@angular/ssr": "18.1.3",
-    "@ckeditor/ckeditor5-angular": "^8.0.0",
     "@contentful/rich-text-html-renderer": "^16.6.8",
-    "ckeditor5": "^43.0.0",
-    "ckeditor5-premium-features": "^43.0.0",
+    "@tinymce/tinymce-angular": "^8.0.1",
     "express": "^4.19.2",
     "ng-dynamic-component": "^10.7.0",
     "rxjs": "~7.8.1",

projects/dc/project.json

@@ -49,8 +49,6 @@
         "polyfills": ["@angular/localize/init", "zone.js"],
         "scripts": [],
         "styles": [
-          "node_modules/ckeditor5-premium-features/dist/ckeditor5-premium-features.css",
-          "node_modules/ckeditor5/dist/ckeditor5.css",
           "projects/dc/src/styles.scss",
           "projects/press/assets/styles/index.scss"
         ],

projects/dc/src/app/app.routes.ts

@@ -5,6 +5,7 @@ import { Route } from '@angular/router';
 export const appRoutes: Route[] = [
   {
     path: 'poc',
+    pathMatch: 'prefix',
     component: StoryblokPocComponent,
   },
 ];

projects/dc/src/app/poc/poc.component.html

@@ -1,10 +1,10 @@
 <div class="press-dashboard-grid">
   <mat-card class="press-grid-card" [style.grid-area]="gridItemArea">
-    <mat-card-title>{{ story.name }}</mat-card-title>
-    <ng-container *ngIf="story.content">
+    <mat-card-title>{{ story.content.title }}</mat-card-title>
+    <ng-container *ngIf="story">
       <ndc-dynamic
-        [ndcDynamicComponent]="components[story.content.component]"
-        [ndcDynamicInputs]="story.content"
+        [ndcDynamicComponent]="components[story.content?.component]"
+        [ndcDynamicInputs]="story?.content"
       >
       </ndc-dynamic>
     </ng-container>

projects/dc/src/app/poc/poc.component.ts

@@ -1,8 +1,4 @@
-import {
-  BreakpointObserver,
-  Breakpoints,
-  LayoutModule,
-} from '@angular/cdk/layout';
+import { BreakpointObserver, LayoutModule } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
 import {
   Component,
@@ -21,7 +17,6 @@ import {
 } from '@ctk/press/components/storyblok';
 import { WINDOW } from '@ctk/press/services/window';
 import { DynamicModule } from 'ng-dynamic-component';
-import { takeUntil } from 'rxjs/internal/operators/takeUntil';
 import { Subject } from 'rxjs/internal/Subject';
 
 declare global {
@@ -50,7 +45,6 @@ export class StoryblokPocComponent implements OnInit, OnDestroy {
   story = { content: null, name: '' };
   components = StoryBlokComponents;
 
-  private isViewportSmall = false;
   private destroyed: Subject<void> = new Subject<void>();
 
   constructor(
@@ -63,13 +57,6 @@ export class StoryblokPocComponent implements OnInit, OnDestroy {
     this.window.storyblok.on(['change', 'published'], function () {
       location.reload();
     });
-
-    this.breakpointObserver
-      .observe([Breakpoints.XSmall, Breakpoints.Small])
-      .pipe(takeUntil(this.destroyed))
-      .subscribe((result) => {
-        this.isViewportSmall = result.matches;
-      });
   }
 
   ngOnDestroy(): void {
@@ -80,8 +67,9 @@ export class StoryblokPocComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.storyblokService
       .getStories({ version: 'draft' })
-      .subscribe((values) => {
-        this.story = values.data.stories[0];
+      .subscribe((value) => {
+        this.story = value.data.stories[0];
+        console.log(this.story);
       });
   }
 

projects/press/assets/styles/index.scss

@@ -6,7 +6,9 @@ $my-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500);
 $my-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
 $my-warn: mat.m2-define-palette(mat.$m2-red-palette);
 
-$my-theme: mat.m2-define-dark-theme((color: (primary: $my-primary,
+
+
+$my-theme: mat.m2-define-light-theme((color: (primary: $my-primary,
         accent: $my-accent,
         warn: $my-warn,
       ),
@@ -30,4 +32,4 @@ body {
 
 body {
   user-select: none;
-}
+}

projects/press/storyblok/src/components/article/article.component.html

@@ -0,0 +1,8 @@
+<editor
+  [pressStoryblok]="_editable"
+  contextmenu="true"
+  apiKey="t5cdeua6d43g8mszp3sq4v2twgvsyfsjm5m4vv4syio5ozol"
+  [init]="options"
+  [initialValue]="copyText.content"
+>
+</editor>

projects/press/storyblok/src/components/article/article.component.ts

@@ -0,0 +1,59 @@
+import { CommonModule } from '@angular/common';
+import {
+  AfterViewInit,
+  Component,
+  Inject,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { EditorComponent, EditorModule } from '@tinymce/tinymce-angular';
+import { TinyMCE } from 'tinymce';
+import { StoryblokDirective } from '../../directives/storyblok.directive';
+
+type EditorOptions = Parameters<TinyMCE['init']>[0];
+
+@Component({
+  selector: 'press-storyblok-article',
+  standalone: true,
+  imports: [CommonModule, EditorModule, StoryblokDirective],
+  templateUrl: './article.component.html',
+})
+export class ArticleComponent implements AfterViewInit, OnChanges {
+  @ViewChild(EditorComponent) editor: EditorComponent;
+
+  @Input() name: string;
+  @Input() component: any;
+  @Input() _uid: any;
+  @Input() _editable: any;
+  @Input() copyText: any;
+  @Input() title: any;
+  @Input() publishDate: any;
+
+  options: EditorOptions = {
+    plugins:
+      'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed linkchecker a11ychecker tinymcespellchecker permanentpen powerpaste advtable advcode editimage advtemplate mentions tinycomments tableofcontents footnotes mergetags autocorrect typography inlinecss markdown',
+    toolbar:
+      'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
+    tinycomments_mode: 'embedded',
+    tinycomments_author: 'Author name',
+    mergetags_list: [
+      { value: 'First.Name', title: 'First Name' },
+      { value: 'Email', title: 'Email' },
+    ],
+  } as EditorModule;
+
+  constructor(
+    @Inject('APP_CONFIG') appConfig,
+    private sani: DomSanitizer,
+  ) {}
+  ngOnChanges(changes: SimpleChanges): void {
+    throw new Error('Method not implemented.');
+  }
+
+  ngAfterViewInit(): void {
+    console.log(this.editor);
+  }
+}

projects/press/storyblok/src/components/components.ts

@@ -0,0 +1,7 @@
+import { ArticleComponent } from './article/article.component';
+
+const StoryBlokComponents = {
+  Article: ArticleComponent,
+};
+
+export { StoryBlokComponents };

projects/press/storyblok/src/components/field-plugins/tiny-mce/.env.local.example

@@ -0,0 +1 @@
+STORYBLOK_PERSONAL_ACCESS_TOKEN=

projects/press/storyblok/src/components/field-plugins/tiny-mce/.gitignore

@@ -0,0 +1,32 @@
+.DS_Store
+node_modules
+
+# env files except for .env.local.example
+.env
+.env.*
+!.env.local.example
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+
+# Yarn (https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored)
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

projects/press/storyblok/src/components/field-plugins/tiny-mce/.nvmrc

@@ -0,0 +1 @@
+18.16.0

projects/press/storyblok/src/components/field-plugins/tiny-mce/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 80,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "singleAttributePerLine": true
+}