@semantic-components/editor 0.63.0 → 0.64.0

package/src/lib/components/editor/editor-toolbar-group.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-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

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

@@ -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-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

@@ -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-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

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

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

package/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "isolatedModules": true,
-    "target": "es2022",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "emitDecoratorMetadata": false,
-    "module": "preserve"
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    }
-  ]
-}

package/tsconfig.lib.json

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
-}

package/tsconfig.lib.prod.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {}
-}