@semantic-components/editor 0.4.0 → 0.62.0

package/src/lib/components/editor/editor-italic-button.ts

@@ -0,0 +1,44 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  computed,
+  input,
+  inject,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+
+@Component({
+  selector: 'button[sc-editor-italic]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-italic',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled()',
+    '[attr.aria-pressed]': 'editor.isItalic()',
+    '[attr.title]': '"Italic (Ctrl+I)"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorItalicButton {
+  readonly editor = inject(SC_EDITOR);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',
+      this.editor.isItalic() && 'bg-accent text-accent-foreground',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    this.editor.execCommand('italic');
+  }
+}

package/src/lib/components/editor/editor-link-button.ts

@@ -0,0 +1,58 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  computed,
+  input,
+  inject,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+
+@Component({
+  selector: 'button[sc-editor-link]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-link',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled()',
+    '[attr.title]': '"Insert link (Ctrl+K)"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorLinkButton {
+  readonly editor = inject(SC_EDITOR);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    if (this.editor.disabled() || this.editor.readonly()) return;
+
+    const selection = window.getSelection();
+    const selectedText = selection?.toString() || '';
+
+    const url = prompt('Enter URL:', 'https://');
+    if (url) {
+      if (selectedText) {
+        this.editor.execCommand('createLink', url);
+      } else {
+        const linkText = prompt('Enter link text:', 'Link');
+        if (linkText) {
+          const link = `<a href="${url}" target="_blank" rel="noopener noreferrer">${linkText}</a>`;
+          this.editor.execCommand('insertHTML', link);
+        }
+      }
+    }
+  }
+}

package/src/lib/components/editor/editor-numbered-list-button.ts

@@ -0,0 +1,44 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  computed,
+  input,
+  inject,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+
+@Component({
+  selector: 'button[sc-editor-numbered-list]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-numbered-list',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled()',
+    '[attr.aria-pressed]': 'editor.isOrderedList()',
+    '[attr.title]': '"Numbered list"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorNumberedListButton {
+  readonly editor = inject(SC_EDITOR);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',
+      this.editor.isOrderedList() && 'bg-accent text-accent-foreground',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    this.editor.execCommand('insertOrderedList');
+  }
+}

package/src/lib/components/editor/editor-redo-button.ts

@@ -0,0 +1,42 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  computed,
+  input,
+  inject,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+
+@Component({
+  selector: 'button[sc-editor-redo]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-redo',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled() || !editor.canRedo()',
+    '[attr.title]': '"Redo (Ctrl+Y)"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorRedoButton {
+  readonly editor = inject(SC_EDITOR);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    this.editor.execCommand('redo');
+  }
+}

package/src/lib/components/editor/editor-separator.ts

@@ -0,0 +1,25 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-editor-separator]',
+  template: ``,
+  host: {
+    'data-slot': 'editor-separator',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorSeparator {
+  readonly classInput = input<string>('', { alias: 'class' });
+  protected readonly class = computed(() =>
+    cn('w-px h-6 bg-border mx-1', this.classInput()),
+  );
+}

package/src/lib/components/editor/editor-strikethrough-button.ts

@@ -0,0 +1,44 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  computed,
+  input,
+  inject,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+
+@Component({
+  selector: 'button[sc-editor-strikethrough]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-strikethrough',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled()',
+    '[attr.aria-pressed]': 'editor.isStrikethrough()',
+    '[attr.title]': '"Strikethrough"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorStrikethroughButton {
+  readonly editor = inject(SC_EDITOR);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',
+      this.editor.isStrikethrough() && 'bg-accent text-accent-foreground',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    this.editor.execCommand('strikethrough');
+  }
+}

package/src/lib/components/editor/editor-toolbar-group.ts

@@ -0,0 +1,27 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-editor-toolbar-group]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-toolbar-group',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorToolbarGroup {
+  readonly classInput = input<string>('', { alias: 'class' });
+  protected readonly class = computed(() =>
+    cn('flex items-center gap-1', this.classInput()),
+  );
+}

package/src/lib/components/editor/editor-toolbar.ts

@@ -0,0 +1,32 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-editor-toolbar]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-toolbar',
+    role: 'toolbar',
+    '[attr.aria-label]': '"Text formatting"',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorToolbar {
+  readonly classInput = input<string>('', { alias: 'class' });
+  protected readonly class = computed(() =>
+    cn(
+      'flex flex-wrap items-center gap-1 p-2 border-b bg-muted/30',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/editor/editor-underline-button.ts

@@ -0,0 +1,44 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  computed,
+  input,
+  inject,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+
+@Component({
+  selector: 'button[sc-editor-underline]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-underline',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled()',
+    '[attr.aria-pressed]': 'editor.isUnderline()',
+    '[attr.title]': '"Underline (Ctrl+U)"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorUnderlineButton {
+  readonly editor = inject(SC_EDITOR);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',
+      this.editor.isUnderline() && 'bg-accent text-accent-foreground',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    this.editor.execCommand('underline');
+  }
+}

package/src/lib/components/editor/editor-undo-button.ts

@@ -0,0 +1,42 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  computed,
+  input,
+  inject,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+
+@Component({
+  selector: 'button[sc-editor-undo]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-undo',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled() || !editor.canUndo()',
+    '[attr.title]': '"Undo (Ctrl+Z)"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorUndoButton {
+  readonly editor = inject(SC_EDITOR);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    this.editor.execCommand('undo');
+  }
+}

package/src/lib/components/editor/editor-word-count.ts

@@ -0,0 +1,43 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  computed,
+  input,
+  inject,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+
+@Component({
+  selector: 'span[sc-editor-word-count]',
+  template: `
+    {{ wordCount() }} words
+  `,
+  host: {
+    'data-slot': 'editor-word-count',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorWordCount {
+  readonly editor = inject(SC_EDITOR);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() => cn('', this.classInput()));
+
+  protected readonly wordCount = computed(() => {
+    const text = this.getPlainText().trim();
+    if (!text) return 0;
+    return text.split(/\s+/).filter(Boolean).length;
+  });
+
+  private getPlainText(): string {
+    const editorInstance = this.editor.editorInstance();
+    if (editorInstance) {
+      return editorInstance.getText();
+    }
+    return this.editor.contentElement()?.textContent || '';
+  }
+}

package/src/lib/components/editor/editor.ts

@@ -0,0 +1,211 @@
+import { Directive, InjectionToken, input, signal } from '@angular/core';
+import { Editor } from '@tiptap/core';
+import Placeholder from '@tiptap/extension-placeholder';
+import TextAlign from '@tiptap/extension-text-align';
+import StarterKit from '@tiptap/starter-kit';
+
+export type ScEditorAlignment = 'left' | 'center' | 'right' | 'justify';
+export type ScEditorHeading = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export const SC_EDITOR = new InjectionToken<ScEditor>('SC_EDITOR');
+
+@Directive({
+  selector: '[sc-editor]',
+  exportAs: 'scEditor',
+  providers: [{ provide: SC_EDITOR, useExisting: ScEditor }],
+  host: {
+    'data-slot': 'editor',
+    '[attr.data-disabled]': 'disabled() || null',
+  },
+})
+export class ScEditor {
+  readonly disabled = input<boolean>(false);
+  readonly readonly = input<boolean>(false);
+
+  // State signals
+  readonly isBold = signal(false);
+  readonly isItalic = signal(false);
+  readonly isUnderline = signal(false);
+  readonly isStrikethrough = signal(false);
+  readonly isOrderedList = signal(false);
+  readonly isUnorderedList = signal(false);
+  readonly isBlockquote = signal(false);
+  readonly alignment = signal<ScEditorAlignment>('left');
+  readonly currentHeading = signal<ScEditorHeading>('p');
+  readonly canUndo = signal(false);
+  readonly canRedo = signal(false);
+
+  // Reference to content element
+  readonly contentElement = signal<HTMLElement | null>(null);
+
+  // Tiptap editor instance
+  readonly editorInstance = signal<Editor | null>(null);
+
+  // Initialize Tiptap editor
+  initializeEditor(
+    element: HTMLElement,
+    initialContent: string,
+    placeholder = 'Start typing...',
+  ): void {
+    const editor = new Editor({
+      element,
+      extensions: [
+        StarterKit.configure({
+          link: {
+            openOnClick: false,
+            HTMLAttributes: {
+              target: '_blank',
+              rel: 'noopener noreferrer',
+            },
+          },
+        }),
+        TextAlign.configure({
+          types: ['heading', 'paragraph'],
+        }),
+        Placeholder.configure({
+          placeholder,
+        }),
+      ],
+      content: initialContent,
+      editable: !this.disabled() && !this.readonly(),
+      onUpdate: () => {
+        this.updateToolbarState();
+      },
+      onSelectionUpdate: () => {
+        this.updateToolbarState();
+      },
+    });
+
+    this.editorInstance.set(editor);
+    this.contentElement.set(element);
+  }
+
+  // Execute a formatting command
+  execCommand(command: string, value?: string): void {
+    if (this.disabled() || this.readonly()) return;
+
+    const editor = this.editorInstance();
+    if (!editor) return;
+
+    editor.chain().focus();
+
+    switch (command) {
+      case 'bold':
+        editor.chain().focus().toggleBold().run();
+        break;
+      case 'italic':
+        editor.chain().focus().toggleItalic().run();
+        break;
+      case 'underline':
+        editor.chain().focus().toggleUnderline().run();
+        break;
+      case 'strikethrough':
+        editor.chain().focus().toggleStrike().run();
+        break;
+      case 'insertUnorderedList':
+        editor.chain().focus().toggleBulletList().run();
+        break;
+      case 'insertOrderedList':
+        editor.chain().focus().toggleOrderedList().run();
+        break;
+      case 'justifyLeft':
+        editor.chain().focus().setTextAlign('left').run();
+        break;
+      case 'justifyCenter':
+        editor.chain().focus().setTextAlign('center').run();
+        break;
+      case 'justifyRight':
+        editor.chain().focus().setTextAlign('right').run();
+        break;
+      case 'justifyFull':
+        editor.chain().focus().setTextAlign('justify').run();
+        break;
+      case 'formatBlock':
+        if (value === 'blockquote') {
+          editor.chain().focus().toggleBlockquote().run();
+        } else if (value && value !== 'p') {
+          const level = parseInt(value.replace('h', '')) as
+            | 1
+            | 2
+            | 3
+            | 4
+            | 5
+            | 6;
+          editor.chain().focus().setHeading({ level }).run();
+        } else {
+          editor.chain().focus().setParagraph().run();
+        }
+        break;
+      case 'createLink':
+        if (value) {
+          editor.chain().focus().setLink({ href: value }).run();
+        }
+        break;
+      case 'insertHTML':
+        if (value) {
+          editor.chain().focus().insertContent(value).run();
+        }
+        break;
+      case 'insertHorizontalRule':
+        editor.chain().focus().setHorizontalRule().run();
+        break;
+      case 'removeFormat':
+        editor.chain().focus().clearNodes().unsetAllMarks().run();
+        break;
+      case 'undo':
+        editor.chain().focus().undo().run();
+        break;
+      case 'redo':
+        editor.chain().focus().redo().run();
+        break;
+    }
+  }
+
+  // Destroy editor
+  destroyEditor(): void {
+    this.editorInstance()?.destroy();
+    this.editorInstance.set(null);
+  }
+
+  // Update toolbar state based on current selection
+  updateToolbarState(): void {
+    const editor = this.editorInstance();
+    if (!editor) return;
+
+    this.isBold.set(editor.isActive('bold'));
+    this.isItalic.set(editor.isActive('italic'));
+    this.isUnderline.set(editor.isActive('underline'));
+    this.isStrikethrough.set(editor.isActive('strike'));
+    this.isOrderedList.set(editor.isActive('orderedList'));
+    this.isUnorderedList.set(editor.isActive('bulletList'));
+    this.isBlockquote.set(editor.isActive('blockquote'));
+
+    // Check alignment
+    if (editor.isActive({ textAlign: 'left' })) {
+      this.alignment.set('left');
+    } else if (editor.isActive({ textAlign: 'center' })) {
+      this.alignment.set('center');
+    } else if (editor.isActive({ textAlign: 'right' })) {
+      this.alignment.set('right');
+    } else if (editor.isActive({ textAlign: 'justify' })) {
+      this.alignment.set('justify');
+    } else {
+      this.alignment.set('left'); // default
+    }
+
+    // Check heading level
+    for (let level = 1; level <= 6; level++) {
+      if (editor.isActive('heading', { level })) {
+        this.currentHeading.set(`h${level}` as ScEditorHeading);
+        this.canUndo.set(editor.can().undo());
+        this.canRedo.set(editor.can().redo());
+        return;
+      }
+    }
+    this.currentHeading.set('p');
+
+    // Check undo/redo availability
+    this.canUndo.set(editor.can().undo());
+    this.canRedo.set(editor.can().redo());
+  }
+}