feat: copy to clipboard created and block code edited

borjamrd · borjamrd · commit 00a8cfc6729e · 2024-10-10T23:34:37.000+02:00
diff --git a/projects/ngx-notion-cms/package.json b/projects/ngx-notion-cms/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-notion-cms",
-    "version": "0.0.4",
+    "version": "0.0.5",
     "peerDependencies": {
         "@angular/common": "^18.2.0",
         "@angular/core": "^18.2.0",
diff --git a/projects/ngx-notion-cms/src/lib/components/copy-to-clipboard/copy-to-clipboard.component.css b/projects/ngx-notion-cms/src/lib/components/copy-to-clipboard/copy-to-clipboard.component.css
diff --git a/projects/ngx-notion-cms/src/lib/components/copy-to-clipboard/copy-to-clipboard.component.html b/projects/ngx-notion-cms/src/lib/components/copy-to-clipboard/copy-to-clipboard.component.html
@@ -0,0 +1,32 @@
+<span
+    class="hover:bg-fuchsia-200 aspect-square dark:bg-fuchsia-400"
+    (click)="setCopied()">
+    @if (copied()) {
+        <svg
+            width="20px"
+            height="20px"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M4 12.6111L8.92308 17.5L20 6.5"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round" />
+        </svg>
+    } @else {
+        <svg
+            width="20px"
+            height="20px"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M15 1.25H10.9436C9.10583 1.24998 7.65019 1.24997 6.51098 1.40314C5.33856 1.56076 4.38961 1.89288 3.64124 2.64124C2.89288 3.38961 2.56076 4.33856 2.40314 5.51098C2.24997 6.65019 2.24998 8.10582 2.25 9.94357V16C2.25 17.8722 3.62205 19.424 5.41551 19.7047C5.55348 20.4687 5.81753 21.1208 6.34835 21.6517C6.95027 22.2536 7.70814 22.5125 8.60825 22.6335C9.47522 22.75 10.5775 22.75 11.9451 22.75H15.0549C16.4225 22.75 17.5248 22.75 18.3918 22.6335C19.2919 22.5125 20.0497 22.2536 20.6517 21.6517C21.2536 21.0497 21.5125 20.2919 21.6335 19.3918C21.75 18.5248 21.75 17.4225 21.75 16.0549V10.9451C21.75 9.57754 21.75 8.47522 21.6335 7.60825C21.5125 6.70814 21.2536 5.95027 20.6517 5.34835C20.1208 4.81753 19.4687 4.55348 18.7047 4.41551C18.424 2.62205 16.8722 1.25 15 1.25ZM17.1293 4.27117C16.8265 3.38623 15.9876 2.75 15 2.75H11C9.09318 2.75 7.73851 2.75159 6.71085 2.88976C5.70476 3.02502 5.12511 3.27869 4.7019 3.7019C4.27869 4.12511 4.02502 4.70476 3.88976 5.71085C3.75159 6.73851 3.75 8.09318 3.75 10V16C3.75 16.9876 4.38624 17.8265 5.27117 18.1293C5.24998 17.5194 5.24999 16.8297 5.25 16.0549V10.9451C5.24998 9.57754 5.24996 8.47522 5.36652 7.60825C5.48754 6.70814 5.74643 5.95027 6.34835 5.34835C6.95027 4.74643 7.70814 4.48754 8.60825 4.36652C9.47522 4.24996 10.5775 4.24998 11.9451 4.25H15.0549C15.8297 4.24999 16.5194 4.24998 17.1293 4.27117ZM7.40901 6.40901C7.68577 6.13225 8.07435 5.9518 8.80812 5.85315C9.56347 5.75159 10.5646 5.75 12 5.75H15C16.4354 5.75 17.4365 5.75159 18.1919 5.85315C18.9257 5.9518 19.3142 6.13225 19.591 6.40901C19.8678 6.68577 20.0482 7.07435 20.1469 7.80812C20.2484 8.56347 20.25 9.56458 20.25 11V16C20.25 17.4354 20.2484 18.4365 20.1469 19.1919C20.0482 19.9257 19.8678 20.3142 19.591 20.591C19.3142 20.8678 18.9257 21.0482 18.1919 21.1469C17.4365 21.2484 16.4354 21.25 15 21.25H12C10.5646 21.25 9.56347 21.2484 8.80812 21.1469C8.07435 21.0482 7.68577 20.8678 7.40901 20.591C7.13225 20.3142 6.9518 19.9257 6.85315 19.1919C6.75159 18.4365 6.75 17.4354 6.75 16V11C6.75 9.56458 6.75159 8.56347 6.85315 7.80812C6.9518 7.07435 7.13225 6.68577 7.40901 6.40901Z"
+                fill="currentColor" />
+        </svg>
+    }
+</span>
diff --git a/projects/ngx-notion-cms/src/lib/components/copy-to-clipboard/copy-to-clipboard.component.ts b/projects/ngx-notion-cms/src/lib/components/copy-to-clipboard/copy-to-clipboard.component.ts
@@ -0,0 +1,33 @@
+import { CommonModule, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, input, signal } from '@angular/core';
+import { CopyToClipboardDirective } from '../../directives/copy-to-clipboard';
+
+@Component({
+  selector: 'ngx-copy-to-clipboard',
+  standalone: true,
+  imports: [
+    NgIf,
+  ],
+  providers: [
+    CopyToClipboardDirective,
+  ],
+  templateUrl: './copy-to-clipboard.component.html',
+  styleUrl: './copy-to-clipboard.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CopyToClipboardComponent {
+
+  private copyToClipboard = inject(CopyToClipboardDirective);
+
+  public value = input.required<string>();
+  public copied = signal(false);
+
+  setCopied() {
+    this.copyToClipboard.copy(this.value());
+    this.copied.set(true)
+
+    setTimeout(() => {
+      this.copied.set(false);
+    }, 2000);
+  }
+}
diff --git a/projects/ngx-notion-cms/src/lib/components/notion-block-code/notion-block-code.component.html b/projects/ngx-notion-cms/src/lib/components/notion-block-code/notion-block-code.component.html
@@ -1,10 +1,10 @@
 <pre
     class="relative max-w-80 sm:max-w-full whitespace-pre-wrap flex flex-col sm:min-w-80 overflow-auto">
-    <div class="h-fit absolute top-2 right-2 flex gap-2 justify-end">
-            <span  >{{languange}}</span>
-            <!-- <bm-copy-to-clipboard [displayText]="'Copy'" [value]="codeForHighlight" /> -->
+    <div class="h-fit absolute top-2 right-2 flex gap-2 justify-end w-full items-center">
+            <span class="text-sm font-mono text-neutral-400">{{languange}}</span>
+            <ngx-copy-to-clipboard [value]="codeForHighlight" class="text-white" />
     </div>
-    <code class="" [highlightAuto]="codeForHighlight"
+    <code [highlightAuto]="codeForHighlight"
           language="ts"
           lineNumbers>
         </code>
diff --git a/projects/ngx-notion-cms/src/lib/components/notion-block-code/notion-block-code.component.ts b/projects/ngx-notion-cms/src/lib/components/notion-block-code/notion-block-code.component.ts
@@ -5,6 +5,7 @@ import {
     provideHighlightOptions,
 } from 'ngx-highlightjs';
 import { NotionBlock } from '../../types/block.type';
+import { CopyToClipboardComponent } from '../copy-to-clipboard/copy-to-clipboard.component';
 
 @Component({
     selector: 'ngx-notion-block-code',
@@ -17,7 +18,8 @@ import { NotionBlock } from '../../types/block.type';
             lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'),
         }),
     ],
-    imports: [HighlightAuto, Highlight],
+    imports: [HighlightAuto, Highlight, CopyToClipboardComponent],
+
 })
 export class NotionBlockCodeComponent implements OnInit {
     codeForHighlight = '';
@@ -31,4 +33,5 @@ export class NotionBlockCodeComponent implements OnInit {
             this.codeForHighlight = this.notionBlock.properties.title[0][0];
         }
     }
+
 }
diff --git a/projects/ngx-notion-cms/src/lib/directives/copy-to-clipboard.ts b/projects/ngx-notion-cms/src/lib/directives/copy-to-clipboard.ts
@@ -0,0 +1,18 @@
+import { Directive, ElementRef, HostListener, inject, input } from '@angular/core';
+
+@Directive({
+    standalone: true,
+})
+export class CopyToClipboardDirective {
+    copy(text: string) {
+
+        if (!text) {
+            console.error('No text provided to copy or empty element content');
+            return;
+        }
+        navigator.clipboard.writeText(text)
+            .catch(err => {
+                console.error('Error copying text: ', err);
+            });
+    }
+}
diff --git a/projects/ngx-notion-cms/src/lib/directives/post-tag.directive.ts b/projects/ngx-notion-cms/src/lib/directives/post-tag.directive.ts
diff --git a/projects/ngx-notion-cms/src/lib/providers/global-settings.provider.ts b/projects/ngx-notion-cms/src/lib/providers/global-settings.provider.ts
@@ -12,9 +12,11 @@ export const defaultGlobalSettings: GlobalSettings = {
     },
     database: {
         showImage: true,
+        showStatus: true
     },
     page: {
-        showTableOfContents: true
+        showTableOfContents: true,
+        showStatus: true
     }
 
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ngx-notion-cms",`
`3`		`- "version": "0.0.4",`
	`3`	`+ "version": "0.0.5",`
`4`	`4`	`"peerDependencies": {`
`5`	`5`	`"@angular/common": "^18.2.0",`
`6`	`6`	`"@angular/core": "^18.2.0",`
Original file line number	Diff line number	Diff line change
`@@ -12,9 +12,11 @@ export const defaultGlobalSettings: GlobalSettings = {`
`12`	`12`	`},`
`13`	`13`	`database: {`
`14`	`14`	`showImage: true,`
	`15`	`+ showStatus: true`
`15`	`16`	`},`
`16`	`17`	`page: {`
`17`		`- showTableOfContents: true`
	`18`	`+ showTableOfContents: true,`
	`19`	`+ showStatus: true`
`18`	`20`	`}`
`19`	`21`
`20`	`22`	`}`