@semantic-components/editor 0.3.0 → 0.61.0

package/src/lib/components/editor/editor-align-justify-button.ts

@@ -0,0 +1,45 @@
+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-align-justify]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-align-justify',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled()',
+    '[attr.aria-pressed]': 'editor.alignment() === "justify"',
+    '[attr.title]': '"Justify"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorAlignJustifyButton {
+  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.alignment() === 'justify' &&
+        'bg-accent text-accent-foreground',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    this.editor.execCommand('justifyFull');
+  }
+}

package/src/lib/components/editor/editor-align-left-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-align-left]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-align-left',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled()',
+    '[attr.aria-pressed]': 'editor.alignment() === "left"',
+    '[attr.title]': '"Align left"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorAlignLeftButton {
+  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.alignment() === 'left' && 'bg-accent text-accent-foreground',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    this.editor.execCommand('justifyLeft');
+  }
+}

package/src/lib/components/editor/editor-align-right-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-align-right]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-align-right',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled()',
+    '[attr.aria-pressed]': 'editor.alignment() === "right"',
+    '[attr.title]': '"Align right"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorAlignRightButton {
+  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.alignment() === 'right' && 'bg-accent text-accent-foreground',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    this.editor.execCommand('justifyRight');
+  }
+}

package/src/lib/components/editor/editor-blockquote-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-blockquote]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-blockquote',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled()',
+    '[attr.aria-pressed]': 'editor.isBlockquote()',
+    '[attr.title]': '"Blockquote"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorBlockquoteButton {
+  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.isBlockquote() && 'bg-accent text-accent-foreground',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    this.editor.execCommand('formatBlock', 'blockquote');
+  }
+}

package/src/lib/components/editor/editor-bold-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-bold]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-bold',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled()',
+    '[attr.aria-pressed]': 'editor.isBold()',
+    '[attr.title]': '"Bold (Ctrl+B)"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorBoldButton {
+  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.isBold() && 'bg-accent text-accent-foreground',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    this.editor.execCommand('bold');
+  }
+}

package/src/lib/components/editor/editor-bullet-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-bullet-list]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-bullet-list',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled()',
+    '[attr.aria-pressed]': 'editor.isUnorderedList()',
+    '[attr.title]': '"Bullet list"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorBulletListButton {
+  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.isUnorderedList() && 'bg-accent text-accent-foreground',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    this.editor.execCommand('insertUnorderedList');
+  }
+}

package/src/lib/components/editor/editor-char-count.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: 'span[sc-editor-char-count]',
+  template: `
+    {{ charCount() }} characters
+  `,
+  host: {
+    'data-slot': 'editor-char-count',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorCharCount {
+  readonly editor = inject(SC_EDITOR);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() => cn('', this.classInput()));
+
+  protected readonly charCount = computed(() => {
+    const text = this.getPlainText();
+    return text.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-clear-formatting-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-clear-formatting]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-clear-formatting',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled()',
+    '[attr.title]': '"Clear formatting"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorClearFormattingButton {
+  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('removeFormat');
+  }
+}

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

@@ -0,0 +1,52 @@
+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-code]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-code',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled()',
+    '[attr.title]': '"Inline code"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorCodeButton {
+  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() || '';
+
+    if (selectedText) {
+      const code = `<code>${selectedText}</code>`;
+      this.editor.execCommand('insertHTML', code);
+    } else {
+      this.editor.execCommand('insertHTML', '<code>&nbsp;</code>');
+    }
+  }
+}

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

@@ -0,0 +1,107 @@
+import {
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  model,
+  output,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+
+@Component({
+  selector: 'div[sc-editor-content]',
+  template: ``, // Empty - host element is the content div
+  host: {
+    'data-slot': 'editor-content',
+    '[class]': 'class()',
+    '[attr.aria-label]': 'ariaLabel()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorContent {
+  readonly editor = inject(SC_EDITOR);
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly value = model<string>('');
+  readonly placeholder = input<string>('Start typing...');
+  readonly ariaLabel = input<string>('Rich text editor');
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  readonly focus = output<void>();
+  readonly blur = output<void>();
+
+  private readonly isFocused = signal(false);
+  private isInitialized = false;
+
+  protected readonly class = computed(() =>
+    cn(
+      'block outline-none overflow-y-auto min-h-[150px] max-h-[400px] p-4 prose prose-sm max-w-none dark:prose-invert',
+      this.editor.disabled() && 'pointer-events-none opacity-50',
+      this.editor.readonly() && 'cursor-default',
+      this.classInput(),
+    ),
+  );
+
+  constructor() {
+    // Watch for external value changes (must be in constructor for injection context)
+    effect(() => {
+      const newValue = this.value();
+      const editorInstance = this.editor.editorInstance();
+      if (!editorInstance || !this.isInitialized) return;
+
+      const currentValue = editorInstance.getHTML();
+
+      if (newValue !== currentValue) {
+        editorInstance.commands.setContent(newValue);
+      }
+    });
+
+    afterNextRender(() => {
+      const element = this.elementRef.nativeElement;
+
+      // Initialize Tiptap editor through parent directive
+      this.editor.initializeEditor(element, this.value(), this.placeholder());
+
+      // Watch for editor content changes
+      const editorInstance = this.editor.editorInstance();
+      if (editorInstance) {
+        editorInstance.on('update', ({ editor }) => {
+          const html = editor.getHTML();
+          // Clean up empty content
+          const cleaned = html === '<p></p>' ? '' : html;
+
+          if (cleaned !== this.value()) {
+            this.value.set(cleaned);
+          }
+        });
+
+        // Handle focus events
+        editorInstance.on('focus', () => {
+          this.isFocused.set(true);
+          this.focus.emit();
+        });
+
+        editorInstance.on('blur', () => {
+          this.isFocused.set(false);
+          this.blur.emit();
+        });
+      }
+
+      this.isInitialized = true;
+    });
+
+    this.destroyRef.onDestroy(() => {
+      this.editor.destroyEditor();
+    });
+  }
+}

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

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

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

@@ -0,0 +1,30 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-editor-footer]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-footer',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorFooter {
+  readonly classInput = input<string>('', { alias: 'class' });
+  protected readonly class = computed(() =>
+    cn(
+      'px-3 py-1.5 border-t text-xs text-muted-foreground bg-muted/30',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/editor/editor-header.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-header]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-header',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorHeader {
+  readonly classInput = input<string>('', { alias: 'class' });
+  protected readonly class = computed(() =>
+    cn('px-4 py-3 border-b bg-muted/30', this.classInput()),
+  );
+}

package/src/lib/components/editor/editor-heading-select.ts

@@ -0,0 +1,48 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  computed,
+  input,
+  inject,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR, ScEditorHeading } from './editor';
+
+@Component({
+  selector: 'select[sc-editor-heading]',
+  template: `
+    <option value="p">Paragraph</option>
+    <option value="h1">Heading 1</option>
+    <option value="h2">Heading 2</option>
+    <option value="h3">Heading 3</option>
+    <option value="h4">Heading 4</option>
+    <option value="h5">Heading 5</option>
+    <option value="h6">Heading 6</option>
+  `,
+  host: {
+    'data-slot': 'editor-heading',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled()',
+    '[value]': 'editor.currentHeading()',
+    '(change)': 'onChange($event)',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorHeadingSelect {
+  readonly editor = inject(SC_EDITOR);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'appearance-none pl-2 pr-6 py-1 text-sm rounded border-0 bg-transparent hover:bg-accent cursor-pointer',
+      this.classInput(),
+    ),
+  );
+
+  onChange(event: Event): void {
+    const value = (event.target as HTMLSelectElement).value as ScEditorHeading;
+    this.editor.execCommand('formatBlock', value === 'p' ? 'p' : value);
+  }
+}

package/src/lib/components/editor/editor-horizontal-rule-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-horizontal-rule]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'editor-horizontal-rule',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'editor.disabled()',
+    '[attr.title]': '"Horizontal line"',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScEditorHorizontalRuleButton {
+  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('insertHorizontalRule');
+  }
+}