@semantic-components/editor 0.63.0 → 0.65.0

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

@@ -1,42 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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');
-  }
-}

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

@@ -1,44 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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');
-  }
-}