support-different-text-styles

.github/workflows/builds.yaml

@@ -2,16 +2,15 @@ name: Global build & lint & test
 
 on:
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
     timeout-minutes: 25
     strategy:
       matrix:
-        node-version: [ 20.x ]
+        node-version: [20.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/deploy.yaml

@@ -2,16 +2,15 @@ name: Deployment
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
     timeout-minutes: 25
     strategy:
       matrix:
-        node-version: [ 20.x ]
+        node-version: [20.x]
 
     steps:
       - name: Checkout

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": true,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "trailingComma": "all",
+  "bracketSameLine": true,
+  "printWidth": 180
+}

README.md

@@ -97,31 +97,51 @@ As the signal outputs in angular do not have a possibility to check for observer
 
 The library includes a component to display content of the wysiwyg editor of strapi.
 
+There is a single entry point for the strap called ```@bolzplatzarena/components/strapi```. Everything is standalone no module needs to be imported.
+
+```
+
 ### Support
 
 The library is in experimental state and is not recommended for production use because it does not support all types of the strapi content.
 The component supports the following types:
 
 - paragraph
-- simple text (text content without formatting as child of paragraph)
+- simple text
+  - bold
+  - italic
+  - underline
+  - hyperlink
+- headlines 1 - 6
+- list
+  - unordered
+  - ordered
+- quote
+- code (no syntax highlighting)
+- image (url, width, height, alt)
 
 ### How to use it
 
+Normally the data comes from the api and is a property of the control using the wysiwyg editor.
+
 Example data:
 
 ```
-  protected readonly strapiContent: RootNode[] = [{
-    type: 'paragraph',
-    children: [{type: 'text', text: 'Hello World!'}, {type: 'text', text: 'This is a test.'}]
-  }, {
-    type: 'paragraph',
-    children: [{type: 'text', text: 'Hello World!'}, {type: 'text', text: 'This is a test.'}]
-  }];
+
+protected readonly strapiContent: RootNode[] = [{
+type: 'paragraph',
+children: [{type: 'text', text: 'Hello World!'}, {type: 'text', text: 'This is a test.'}]
+}, {
+type: 'paragraph',
+children: [{type: 'text', text: 'Hello World!'}, {type: 'text', text: 'This is a test.'}]
+}];
+
 ```
 
 Example template:
 
 ```
+
 <bpa-strapi-content [content]="strapiContent"></bpa-strapi-content>
-```
 
+```

angular.json

@@ -23,19 +23,11 @@
             "outputPath": "dist/bolzplatzarena-components",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [
-              "src/polyfills.ts"
-            ],
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss"],
             "scripts": []
           },
           "configurations": {
@@ -90,10 +82,7 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         },
         "deploy": {
@@ -125,10 +114,7 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "projects/components/**/*.ts",
-              "projects/components/**/*.html"
-            ]
+            "lintFilePatterns": ["projects/components/**/*.ts", "projects/components/**/*.html"]
           }
         }
       }

jest.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   preset: 'jest-preset-angular',
-  setupFilesAfterEnv: ['<rootDir>/../../setup-test.ts']
-}
+  setupFilesAfterEnv: ['<rootDir>/../../setup-test.ts'],
+};

package.json

@@ -58,6 +58,7 @@
     "jest": "^29.7.0",
     "jest-preset-angular": "^14.4.2",
     "ng-packagr": "^19.0.1",
+    "prettier": "3.4.2",
     "ts-jest": "^29.1.1",
     "typescript": "~5.6.3"
   }

projects/components/.eslintrc.json

@@ -1,18 +1,11 @@
 {
   "extends": "../../.eslintrc.json",
-  "ignorePatterns": [
-    "!**/*"
-  ],
+  "ignorePatterns": ["!**/*"],
   "overrides": [
     {
-      "files": [
-        "*.ts"
-      ],
+      "files": ["*.ts"],
       "parserOptions": {
-        "project": [
-          "projects/components/tsconfig.lib.json",
-          "projects/components/tsconfig.spec.json"
-        ],
+        "project": ["projects/components/tsconfig.lib.json", "projects/components/tsconfig.spec.json"],
         "createDefaultProgram": true
       },
       "rules": {
@@ -35,9 +28,7 @@
       }
     },
     {
-      "files": [
-        "*.html"
-      ],
+      "files": ["*.html"],
       "rules": {}
     }
   ]

projects/components/README.md

@@ -97,31 +97,51 @@ As the signal outputs in angular do not have a possibility to check for observer
 
 The library includes a component to display content of the wysiwyg editor of strapi.
 
+There is a single entry point for the strap called ```@bolzplatzarena/components/strapi```. Everything is standalone no module needs to be imported.
+
+```
+
 ### Support
 
 The library is in experimental state and is not recommended for production use because it does not support all types of the strapi content.
 The component supports the following types:
 
 - paragraph
-- simple text (text content without formatting as child of paragraph)
+- simple text
+  - bold
+  - italic
+  - underline
+  - hyperlink
+- headlines 1 - 6
+- list
+  - unordered
+  - ordered
+- quote
+- code (no syntax highlighting)
+- image (url, width, height, alt)
 
 ### How to use it
 
+Normally the data comes from the api and is a property of the control using the wysiwyg editor.
+
 Example data:
 
 ```
-  protected readonly strapiContent: RootNode[] = [{
-    type: 'paragraph',
-    children: [{type: 'text', text: 'Hello World!'}, {type: 'text', text: 'This is a test.'}]
-  }, {
-    type: 'paragraph',
-    children: [{type: 'text', text: 'Hello World!'}, {type: 'text', text: 'This is a test.'}]
-  }];
+
+protected readonly strapiContent: RootNode[] = [{
+type: 'paragraph',
+children: [{type: 'text', text: 'Hello World!'}, {type: 'text', text: 'This is a test.'}]
+}, {
+type: 'paragraph',
+children: [{type: 'text', text: 'Hello World!'}, {type: 'text', text: 'This is a test.'}]
+}];
+
 ```
 
 Example template:
 
 ```
+
 <bpa-strapi-content [content]="strapiContent"></bpa-strapi-content>
-```
 
+```

projects/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolzplatzarena/components",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "author": "Thomas Renger",
   "repository": {
     "type": "git",

projects/components/src/lib/components.module.ts

@@ -9,15 +9,9 @@ import { faSkullCrossbones } from '@fortawesome/free-solid-svg-icons/faSkullCros
 import { PaginatorTexts } from './paginator-texts';
 
 @NgModule({
-  imports: [
-    BrowserAnimationsModule,
-  ],
-  exports: [
-    MatDialogModule,
-  ],
-  providers: [
-    { provide: MatPaginatorIntl, useClass: PaginatorTexts },
-  ],
+  imports: [BrowserAnimationsModule],
+  exports: [MatDialogModule],
+  providers: [{ provide: MatPaginatorIntl, useClass: PaginatorTexts }],
 })
 export class ComponentsModule {
   constructor() {

projects/components/src/lib/components/button/button.component.html

@@ -14,11 +14,6 @@
 <ng-template #content>
   <ng-content></ng-content>
   @if (loading) {
-    <mat-spinner
-        color="primary"
-        [strokeWidth]="2"
-        [diameter]="20"
-        style="position: absolute; left: 50%; top: 0; margin-left: -10px;">
-    </mat-spinner>
+    <mat-spinner color="primary" [strokeWidth]="2" [diameter]="20" style="position: absolute; left: 50%; top: 0; margin-left: -10px"> </mat-spinner>
   }
 </ng-template>

projects/components/src/lib/components/button/button.component.ts

@@ -1,15 +1,11 @@
-import {NgTemplateOutlet} from '@angular/common';
-import {Component, input} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 @Component({
   selector: 'bpa-button',
-  imports: [
-    MatButtonModule,
-    MatProgressSpinnerModule,
-    NgTemplateOutlet,
-  ],
+  imports: [MatButtonModule, MatProgressSpinnerModule, NgTemplateOutlet],
   templateUrl: './button.component.html',
 })
 export class ButtonComponent {

projects/components/src/lib/components/strapi-renderer/code-renderer/code-renderer.component.css

@@ -0,0 +1,4 @@
+code {
+  padding: 1rem;
+  background-color: #e1e1e1;
+}

projects/components/src/lib/components/strapi-renderer/code-renderer/code-renderer.component.html

@@ -0,0 +1,3 @@
+<code>
+  <ng-content></ng-content>
+</code>

projects/components/src/lib/components/strapi-renderer/code-renderer/code-renderer.component.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'bpa-code-renderer',
+  imports: [],
+  templateUrl: './code-renderer.component.html',
+  styleUrl: './code-renderer.component.css'
+})
+export class CodeRendererComponent {
+}