@semantic-components/editor 0.63.0 → 0.64.0

package/esm2022/index.js

@@ -0,0 +1,2 @@
+export * from './lib/components';
+//# sourceMappingURL=index.js.map

package/esm2022/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/editor/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './lib/components';\n"]}

package/esm2022/lib/components/editor/editor-align-center-button.js

@@ -0,0 +1,38 @@
+import { Component, ChangeDetectionStrategy, computed, input, inject, ViewEncapsulation, } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+import * as i0 from "@angular/core";
+export class ScEditorAlignCenterButton {
+    editor = inject(SC_EDITOR);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4', this.editor.alignment() === 'center' &&
+        'bg-accent text-accent-foreground', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onClick() {
+        this.editor.execCommand('justifyCenter');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorAlignCenterButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ScEditorAlignCenterButton, isStandalone: true, selector: "button[sc-editor-align-center]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "editor-align-center", "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()", "disabled": "editor.disabled()", "attr.aria-pressed": "editor.alignment() === \"center\"", "attr.title": "\"Align center\"" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorAlignCenterButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[sc-editor-align-center]',
+                    template: `
+    <ng-content />
+  `,
+                    host: {
+                        'data-slot': 'editor-align-center',
+                        type: 'button',
+                        '[class]': 'class()',
+                        '[disabled]': 'editor.disabled()',
+                        '[attr.aria-pressed]': 'editor.alignment() === "center"',
+                        '[attr.title]': '"Align center"',
+                        '(click)': 'onClick()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=editor-align-center-button.js.map

package/esm2022/lib/components/editor/editor-align-center-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-align-center-button.js","sourceRoot":"","sources":["../../../../../../../libs/editor/src/lib/components/editor/editor-align-center-button.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,uBAAuB,EACvB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;;AAmBrC,MAAM,OAAO,yBAAyB;IAC3B,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,kEAAkE,EAClE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,QAAQ;QAClC,kCAAkC,EACpC,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF,OAAO;QACL,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IAC3C,CAAC;uGAfU,yBAAyB;2FAAzB,yBAAyB,8fAf1B;;GAET;;2FAaU,yBAAyB;kBAjBrC,SAAS;mBAAC;oBACT,QAAQ,EAAE,gCAAgC;oBAC1C,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,qBAAqB;wBAClC,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,mBAAmB;wBACjC,qBAAqB,EAAE,iCAAiC;wBACxD,cAAc,EAAE,gBAAgB;wBAChC,SAAS,EAAE,WAAW;qBACvB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  computed,\n  input,\n  inject,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '@semantic-components/ui';\nimport { SC_EDITOR } from './editor';\n\n@Component({\n  selector: 'button[sc-editor-align-center]',\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'editor-align-center',\n    type: 'button',\n    '[class]': 'class()',\n    '[disabled]': 'editor.disabled()',\n    '[attr.aria-pressed]': 'editor.alignment() === \"center\"',\n    '[attr.title]': '\"Align center\"',\n    '(click)': 'onClick()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScEditorAlignCenterButton {\n  readonly editor = inject(SC_EDITOR);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',\n      this.editor.alignment() === 'center' &&\n        'bg-accent text-accent-foreground',\n      this.classInput(),\n    ),\n  );\n\n  onClick(): void {\n    this.editor.execCommand('justifyCenter');\n  }\n}\n"]}

package/esm2022/lib/components/editor/editor-align-justify-button.js

@@ -0,0 +1,38 @@
+import { Component, ChangeDetectionStrategy, computed, input, inject, ViewEncapsulation, } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+import * as i0 from "@angular/core";
+export class ScEditorAlignJustifyButton {
+    editor = inject(SC_EDITOR);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    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()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onClick() {
+        this.editor.execCommand('justifyFull');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorAlignJustifyButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ScEditorAlignJustifyButton, isStandalone: true, selector: "button[sc-editor-align-justify]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "editor-align-justify", "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()", "disabled": "editor.disabled()", "attr.aria-pressed": "editor.alignment() === \"justify\"", "attr.title": "\"Justify\"" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorAlignJustifyButton, decorators: [{
+            type: Component,
+            args: [{
+                    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,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=editor-align-justify-button.js.map

package/esm2022/lib/components/editor/editor-align-justify-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-align-justify-button.js","sourceRoot":"","sources":["../../../../../../../libs/editor/src/lib/components/editor/editor-align-justify-button.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,uBAAuB,EACvB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;;AAmBrC,MAAM,OAAO,0BAA0B;IAC5B,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,kEAAkE,EAClE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,SAAS;QACnC,kCAAkC,EACpC,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF,OAAO;QACL,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IACzC,CAAC;uGAfU,0BAA0B;2FAA1B,0BAA0B,4fAf3B;;GAET;;2FAaU,0BAA0B;kBAjBtC,SAAS;mBAAC;oBACT,QAAQ,EAAE,iCAAiC;oBAC3C,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,sBAAsB;wBACnC,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,mBAAmB;wBACjC,qBAAqB,EAAE,kCAAkC;wBACzD,cAAc,EAAE,WAAW;wBAC3B,SAAS,EAAE,WAAW;qBACvB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  computed,\n  input,\n  inject,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '@semantic-components/ui';\nimport { SC_EDITOR } from './editor';\n\n@Component({\n  selector: 'button[sc-editor-align-justify]',\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'editor-align-justify',\n    type: 'button',\n    '[class]': 'class()',\n    '[disabled]': 'editor.disabled()',\n    '[attr.aria-pressed]': 'editor.alignment() === \"justify\"',\n    '[attr.title]': '\"Justify\"',\n    '(click)': 'onClick()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScEditorAlignJustifyButton {\n  readonly editor = inject(SC_EDITOR);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',\n      this.editor.alignment() === 'justify' &&\n        'bg-accent text-accent-foreground',\n      this.classInput(),\n    ),\n  );\n\n  onClick(): void {\n    this.editor.execCommand('justifyFull');\n  }\n}\n"]}

package/esm2022/lib/components/editor/editor-align-left-button.js

@@ -0,0 +1,37 @@
+import { Component, ChangeDetectionStrategy, computed, input, inject, ViewEncapsulation, } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+import * as i0 from "@angular/core";
+export class ScEditorAlignLeftButton {
+    editor = inject(SC_EDITOR);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    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()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onClick() {
+        this.editor.execCommand('justifyLeft');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorAlignLeftButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ScEditorAlignLeftButton, isStandalone: true, selector: "button[sc-editor-align-left]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "editor-align-left", "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()", "disabled": "editor.disabled()", "attr.aria-pressed": "editor.alignment() === \"left\"", "attr.title": "\"Align left\"" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorAlignLeftButton, decorators: [{
+            type: Component,
+            args: [{
+                    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,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=editor-align-left-button.js.map

package/esm2022/lib/components/editor/editor-align-left-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-align-left-button.js","sourceRoot":"","sources":["../../../../../../../libs/editor/src/lib/components/editor/editor-align-left-button.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,uBAAuB,EACvB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;;AAmBrC,MAAM,OAAO,uBAAuB;IACzB,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,kEAAkE,EAClE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,MAAM,IAAI,kCAAkC,EACxE,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF,OAAO;QACL,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IACzC,CAAC;uGAdU,uBAAuB;2FAAvB,uBAAuB,sfAfxB;;GAET;;2FAaU,uBAAuB;kBAjBnC,SAAS;mBAAC;oBACT,QAAQ,EAAE,8BAA8B;oBACxC,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,mBAAmB;wBAChC,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,mBAAmB;wBACjC,qBAAqB,EAAE,+BAA+B;wBACtD,cAAc,EAAE,cAAc;wBAC9B,SAAS,EAAE,WAAW;qBACvB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  computed,\n  input,\n  inject,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '@semantic-components/ui';\nimport { SC_EDITOR } from './editor';\n\n@Component({\n  selector: 'button[sc-editor-align-left]',\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'editor-align-left',\n    type: 'button',\n    '[class]': 'class()',\n    '[disabled]': 'editor.disabled()',\n    '[attr.aria-pressed]': 'editor.alignment() === \"left\"',\n    '[attr.title]': '\"Align left\"',\n    '(click)': 'onClick()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScEditorAlignLeftButton {\n  readonly editor = inject(SC_EDITOR);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',\n      this.editor.alignment() === 'left' && 'bg-accent text-accent-foreground',\n      this.classInput(),\n    ),\n  );\n\n  onClick(): void {\n    this.editor.execCommand('justifyLeft');\n  }\n}\n"]}

package/esm2022/lib/components/editor/editor-align-right-button.js

@@ -0,0 +1,37 @@
+import { Component, ChangeDetectionStrategy, computed, input, inject, ViewEncapsulation, } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+import * as i0 from "@angular/core";
+export class ScEditorAlignRightButton {
+    editor = inject(SC_EDITOR);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    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()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onClick() {
+        this.editor.execCommand('justifyRight');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorAlignRightButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ScEditorAlignRightButton, isStandalone: true, selector: "button[sc-editor-align-right]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "editor-align-right", "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()", "disabled": "editor.disabled()", "attr.aria-pressed": "editor.alignment() === \"right\"", "attr.title": "\"Align right\"" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorAlignRightButton, decorators: [{
+            type: Component,
+            args: [{
+                    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,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=editor-align-right-button.js.map

package/esm2022/lib/components/editor/editor-align-right-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-align-right-button.js","sourceRoot":"","sources":["../../../../../../../libs/editor/src/lib/components/editor/editor-align-right-button.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,uBAAuB,EACvB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;;AAmBrC,MAAM,OAAO,wBAAwB;IAC1B,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,kEAAkE,EAClE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,OAAO,IAAI,kCAAkC,EACzE,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF,OAAO;QACL,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC;uGAdU,wBAAwB;2FAAxB,wBAAwB,0fAfzB;;GAET;;2FAaU,wBAAwB;kBAjBpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,+BAA+B;oBACzC,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,oBAAoB;wBACjC,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,mBAAmB;wBACjC,qBAAqB,EAAE,gCAAgC;wBACvD,cAAc,EAAE,eAAe;wBAC/B,SAAS,EAAE,WAAW;qBACvB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  computed,\n  input,\n  inject,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '@semantic-components/ui';\nimport { SC_EDITOR } from './editor';\n\n@Component({\n  selector: 'button[sc-editor-align-right]',\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'editor-align-right',\n    type: 'button',\n    '[class]': 'class()',\n    '[disabled]': 'editor.disabled()',\n    '[attr.aria-pressed]': 'editor.alignment() === \"right\"',\n    '[attr.title]': '\"Align right\"',\n    '(click)': 'onClick()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScEditorAlignRightButton {\n  readonly editor = inject(SC_EDITOR);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',\n      this.editor.alignment() === 'right' && 'bg-accent text-accent-foreground',\n      this.classInput(),\n    ),\n  );\n\n  onClick(): void {\n    this.editor.execCommand('justifyRight');\n  }\n}\n"]}

package/esm2022/lib/components/editor/editor-blockquote-button.js

@@ -0,0 +1,37 @@
+import { Component, ChangeDetectionStrategy, computed, input, inject, ViewEncapsulation, } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+import * as i0 from "@angular/core";
+export class ScEditorBlockquoteButton {
+    editor = inject(SC_EDITOR);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    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()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onClick() {
+        this.editor.execCommand('formatBlock', 'blockquote');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorBlockquoteButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ScEditorBlockquoteButton, isStandalone: true, selector: "button[sc-editor-blockquote]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "editor-blockquote", "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()", "disabled": "editor.disabled()", "attr.aria-pressed": "editor.isBlockquote()", "attr.title": "\"Blockquote\"" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorBlockquoteButton, decorators: [{
+            type: Component,
+            args: [{
+                    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,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=editor-blockquote-button.js.map

package/esm2022/lib/components/editor/editor-blockquote-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-blockquote-button.js","sourceRoot":"","sources":["../../../../../../../libs/editor/src/lib/components/editor/editor-blockquote-button.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,uBAAuB,EACvB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;;AAmBrC,MAAM,OAAO,wBAAwB;IAC1B,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,kEAAkE,EAClE,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,IAAI,kCAAkC,EAChE,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF,OAAO;QACL,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC;IACvD,CAAC;uGAdU,wBAAwB;2FAAxB,wBAAwB,4eAfzB;;GAET;;2FAaU,wBAAwB;kBAjBpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,8BAA8B;oBACxC,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,mBAAmB;wBAChC,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,mBAAmB;wBACjC,qBAAqB,EAAE,uBAAuB;wBAC9C,cAAc,EAAE,cAAc;wBAC9B,SAAS,EAAE,WAAW;qBACvB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  computed,\n  input,\n  inject,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '@semantic-components/ui';\nimport { SC_EDITOR } from './editor';\n\n@Component({\n  selector: 'button[sc-editor-blockquote]',\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'editor-blockquote',\n    type: 'button',\n    '[class]': 'class()',\n    '[disabled]': 'editor.disabled()',\n    '[attr.aria-pressed]': 'editor.isBlockquote()',\n    '[attr.title]': '\"Blockquote\"',\n    '(click)': 'onClick()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScEditorBlockquoteButton {\n  readonly editor = inject(SC_EDITOR);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',\n      this.editor.isBlockquote() && 'bg-accent text-accent-foreground',\n      this.classInput(),\n    ),\n  );\n\n  onClick(): void {\n    this.editor.execCommand('formatBlock', 'blockquote');\n  }\n}\n"]}

package/esm2022/lib/components/editor/editor-bold-button.js

@@ -0,0 +1,37 @@
+import { Component, ChangeDetectionStrategy, computed, input, inject, ViewEncapsulation, } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+import * as i0 from "@angular/core";
+export class ScEditorBoldButton {
+    editor = inject(SC_EDITOR);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    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()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onClick() {
+        this.editor.execCommand('bold');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorBoldButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ScEditorBoldButton, isStandalone: true, selector: "button[sc-editor-bold]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "editor-bold", "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()", "disabled": "editor.disabled()", "attr.aria-pressed": "editor.isBold()", "attr.title": "\"Bold (Ctrl+B)\"" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorBoldButton, decorators: [{
+            type: Component,
+            args: [{
+                    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,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=editor-bold-button.js.map

package/esm2022/lib/components/editor/editor-bold-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-bold-button.js","sourceRoot":"","sources":["../../../../../../../libs/editor/src/lib/components/editor/editor-bold-button.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,uBAAuB,EACvB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;;AAmBrC,MAAM,OAAO,kBAAkB;IACpB,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,kEAAkE,EAClE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,kCAAkC,EAC1D,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF,OAAO;QACL,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;uGAdU,kBAAkB;2FAAlB,kBAAkB,6dAfnB;;GAET;;2FAaU,kBAAkB;kBAjB9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,wBAAwB;oBAClC,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,aAAa;wBAC1B,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,mBAAmB;wBACjC,qBAAqB,EAAE,iBAAiB;wBACxC,cAAc,EAAE,iBAAiB;wBACjC,SAAS,EAAE,WAAW;qBACvB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  computed,\n  input,\n  inject,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '@semantic-components/ui';\nimport { SC_EDITOR } from './editor';\n\n@Component({\n  selector: 'button[sc-editor-bold]',\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'editor-bold',\n    type: 'button',\n    '[class]': 'class()',\n    '[disabled]': 'editor.disabled()',\n    '[attr.aria-pressed]': 'editor.isBold()',\n    '[attr.title]': '\"Bold (Ctrl+B)\"',\n    '(click)': 'onClick()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScEditorBoldButton {\n  readonly editor = inject(SC_EDITOR);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',\n      this.editor.isBold() && 'bg-accent text-accent-foreground',\n      this.classInput(),\n    ),\n  );\n\n  onClick(): void {\n    this.editor.execCommand('bold');\n  }\n}\n"]}

package/esm2022/lib/components/editor/editor-bullet-list-button.js

@@ -0,0 +1,37 @@
+import { Component, ChangeDetectionStrategy, computed, input, inject, ViewEncapsulation, } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+import * as i0 from "@angular/core";
+export class ScEditorBulletListButton {
+    editor = inject(SC_EDITOR);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    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()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onClick() {
+        this.editor.execCommand('insertUnorderedList');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorBulletListButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ScEditorBulletListButton, isStandalone: true, selector: "button[sc-editor-bullet-list]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "editor-bullet-list", "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()", "disabled": "editor.disabled()", "attr.aria-pressed": "editor.isUnorderedList()", "attr.title": "\"Bullet list\"" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorBulletListButton, decorators: [{
+            type: Component,
+            args: [{
+                    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,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=editor-bullet-list-button.js.map

package/esm2022/lib/components/editor/editor-bullet-list-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-bullet-list-button.js","sourceRoot":"","sources":["../../../../../../../libs/editor/src/lib/components/editor/editor-bullet-list-button.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,uBAAuB,EACvB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;;AAmBrC,MAAM,OAAO,wBAAwB;IAC1B,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,kEAAkE,EAClE,IAAI,CAAC,MAAM,CAAC,eAAe,EAAE,IAAI,kCAAkC,EACnE,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF,OAAO;QACL,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,qBAAqB,CAAC,CAAC;IACjD,CAAC;uGAdU,wBAAwB;2FAAxB,wBAAwB,kfAfzB;;GAET;;2FAaU,wBAAwB;kBAjBpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,+BAA+B;oBACzC,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,oBAAoB;wBACjC,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,mBAAmB;wBACjC,qBAAqB,EAAE,0BAA0B;wBACjD,cAAc,EAAE,eAAe;wBAC/B,SAAS,EAAE,WAAW;qBACvB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  computed,\n  input,\n  inject,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '@semantic-components/ui';\nimport { SC_EDITOR } from './editor';\n\n@Component({\n  selector: 'button[sc-editor-bullet-list]',\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'editor-bullet-list',\n    type: 'button',\n    '[class]': 'class()',\n    '[disabled]': 'editor.disabled()',\n    '[attr.aria-pressed]': 'editor.isUnorderedList()',\n    '[attr.title]': '\"Bullet list\"',\n    '(click)': 'onClick()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScEditorBulletListButton {\n  readonly editor = inject(SC_EDITOR);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',\n      this.editor.isUnorderedList() && 'bg-accent text-accent-foreground',\n      this.classInput(),\n    ),\n  );\n\n  onClick(): void {\n    this.editor.execCommand('insertUnorderedList');\n  }\n}\n"]}

package/esm2022/lib/components/editor/editor-char-count.js

@@ -0,0 +1,40 @@
+import { Component, ChangeDetectionStrategy, computed, input, inject, ViewEncapsulation, } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+import * as i0 from "@angular/core";
+export class ScEditorCharCount {
+    editor = inject(SC_EDITOR);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    charCount = computed(() => {
+        const text = this.getPlainText();
+        return text.length;
+    }, ...(ngDevMode ? [{ debugName: "charCount" }] : []));
+    getPlainText() {
+        const editorInstance = this.editor.editorInstance();
+        if (editorInstance) {
+            return editorInstance.getText();
+        }
+        return this.editor.contentElement()?.textContent || '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorCharCount, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ScEditorCharCount, isStandalone: true, selector: "span[sc-editor-char-count]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "editor-char-count" }, properties: { "class": "class()" } }, ngImport: i0, template: `
+    {{ charCount() }} characters
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorCharCount, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[sc-editor-char-count]',
+                    template: `
+    {{ charCount() }} characters
+  `,
+                    host: {
+                        'data-slot': 'editor-char-count',
+                        '[class]': 'class()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=editor-char-count.js.map

package/esm2022/lib/components/editor/editor-char-count.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-char-count.js","sourceRoot":"","sources":["../../../../../../../libs/editor/src/lib/components/editor/editor-char-count.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,uBAAuB,EACvB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;;AAcrC,MAAM,OAAO,iBAAiB;IACnB,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDAAC,CAAC;IAElD,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACjC,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC,qDAAC,CAAC;IAEK,YAAY;QAClB,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC;QACpD,IAAI,cAAc,EAAE,CAAC;YACnB,OAAO,cAAc,CAAC,OAAO,EAAE,CAAC;QAClC,CAAC;QACD,OAAO,IAAI,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE,WAAW,IAAI,EAAE,CAAC;IACzD,CAAC;uGAjBU,iBAAiB;2FAAjB,iBAAiB,oUAVlB;;GAET;;2FAQU,iBAAiB;kBAZ7B,SAAS;mBAAC;oBACT,QAAQ,EAAE,4BAA4B;oBACtC,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,mBAAmB;wBAChC,SAAS,EAAE,SAAS;qBACrB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  computed,\n  input,\n  inject,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '@semantic-components/ui';\nimport { SC_EDITOR } from './editor';\n\n@Component({\n  selector: 'span[sc-editor-char-count]',\n  template: `\n    {{ charCount() }} characters\n  `,\n  host: {\n    'data-slot': 'editor-char-count',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScEditorCharCount {\n  readonly editor = inject(SC_EDITOR);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() => cn('', this.classInput()));\n\n  protected readonly charCount = computed(() => {\n    const text = this.getPlainText();\n    return text.length;\n  });\n\n  private getPlainText(): string {\n    const editorInstance = this.editor.editorInstance();\n    if (editorInstance) {\n      return editorInstance.getText();\n    }\n    return this.editor.contentElement()?.textContent || '';\n  }\n}\n"]}

package/esm2022/lib/components/editor/editor-clear-formatting-button.js

@@ -0,0 +1,36 @@
+import { Component, ChangeDetectionStrategy, computed, input, inject, ViewEncapsulation, } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+import * as i0 from "@angular/core";
+export class ScEditorClearFormattingButton {
+    editor = inject(SC_EDITOR);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onClick() {
+        this.editor.execCommand('removeFormat');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorClearFormattingButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ScEditorClearFormattingButton, isStandalone: true, selector: "button[sc-editor-clear-formatting]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "editor-clear-formatting", "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()", "disabled": "editor.disabled()", "attr.title": "\"Clear formatting\"" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorClearFormattingButton, decorators: [{
+            type: Component,
+            args: [{
+                    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,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=editor-clear-formatting-button.js.map

package/esm2022/lib/components/editor/editor-clear-formatting-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-clear-formatting-button.js","sourceRoot":"","sources":["../../../../../../../libs/editor/src/lib/components/editor/editor-clear-formatting-button.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,uBAAuB,EACvB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;;AAkBrC,MAAM,OAAO,6BAA6B;IAC/B,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,kEAAkE,EAClE,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF,OAAO;QACL,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC;uGAbU,6BAA6B;2FAA7B,6BAA6B,gdAd9B;;GAET;;2FAYU,6BAA6B;kBAhBzC,SAAS;mBAAC;oBACT,QAAQ,EAAE,oCAAoC;oBAC9C,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,yBAAyB;wBACtC,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,mBAAmB;wBACjC,cAAc,EAAE,oBAAoB;wBACpC,SAAS,EAAE,WAAW;qBACvB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  computed,\n  input,\n  inject,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '@semantic-components/ui';\nimport { SC_EDITOR } from './editor';\n\n@Component({\n  selector: 'button[sc-editor-clear-formatting]',\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'editor-clear-formatting',\n    type: 'button',\n    '[class]': 'class()',\n    '[disabled]': 'editor.disabled()',\n    '[attr.title]': '\"Clear formatting\"',\n    '(click)': 'onClick()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScEditorClearFormattingButton {\n  readonly editor = inject(SC_EDITOR);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',\n      this.classInput(),\n    ),\n  );\n\n  onClick(): void {\n    this.editor.execCommand('removeFormat');\n  }\n}\n"]}

package/esm2022/lib/components/editor/editor-code-button.js

@@ -0,0 +1,46 @@
+import { Component, ChangeDetectionStrategy, computed, input, inject, ViewEncapsulation, } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_EDITOR } from './editor';
+import * as i0 from "@angular/core";
+export class ScEditorCodeButton {
+    editor = inject(SC_EDITOR);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onClick() {
+        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>');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorCodeButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ScEditorCodeButton, isStandalone: true, selector: "button[sc-editor-code]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "editor-code", "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()", "disabled": "editor.disabled()", "attr.title": "\"Inline code\"" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorCodeButton, decorators: [{
+            type: Component,
+            args: [{
+                    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,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=editor-code-button.js.map

package/esm2022/lib/components/editor/editor-code-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-code-button.js","sourceRoot":"","sources":["../../../../../../../libs/editor/src/lib/components/editor/editor-code-button.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,uBAAuB,EACvB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;;AAkBrC,MAAM,OAAO,kBAAkB;IACpB,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,kEAAkE,EAClE,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF,OAAO;QACL,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;YAAE,OAAO;QAE7D,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;QACxC,MAAM,YAAY,GAAG,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;QAEjD,IAAI,YAAY,EAAE,CAAC;YACjB,MAAM,IAAI,GAAG,SAAS,YAAY,SAAS,CAAC;YAC5C,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,YAAY,EAAE,qBAAqB,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC;uGAvBU,kBAAkB;2FAAlB,kBAAkB,mbAdnB;;GAET;;2FAYU,kBAAkB;kBAhB9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,wBAAwB;oBAClC,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,aAAa;wBAC1B,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,mBAAmB;wBACjC,cAAc,EAAE,eAAe;wBAC/B,SAAS,EAAE,WAAW;qBACvB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  computed,\n  input,\n  inject,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '@semantic-components/ui';\nimport { SC_EDITOR } from './editor';\n\n@Component({\n  selector: 'button[sc-editor-code]',\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'editor-code',\n    type: 'button',\n    '[class]': 'class()',\n    '[disabled]': 'editor.disabled()',\n    '[attr.title]': '\"Inline code\"',\n    '(click)': 'onClick()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScEditorCodeButton {\n  readonly editor = inject(SC_EDITOR);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'p-1.5 rounded hover:bg-accent disabled:opacity-50 [&_svg]:size-4',\n      this.classInput(),\n    ),\n  );\n\n  onClick(): void {\n    if (this.editor.disabled() || this.editor.readonly()) return;\n\n    const selection = window.getSelection();\n    const selectedText = selection?.toString() || '';\n\n    if (selectedText) {\n      const code = `<code>${selectedText}</code>`;\n      this.editor.execCommand('insertHTML', code);\n    } else {\n      this.editor.execCommand('insertHTML', '<code>&nbsp;</code>');\n    }\n  }\n}\n"]}

package/esm2022/lib/components/editor/editor-content.js

@@ -0,0 +1,78 @@
+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';
+import * as i0 from "@angular/core";
+export class ScEditorContent {
+    editor = inject(SC_EDITOR);
+    elementRef = inject((ElementRef));
+    destroyRef = inject(DestroyRef);
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    placeholder = input('Start typing...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    ariaLabel = input('Rich text editor', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    focus = output();
+    blur = output();
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    isInitialized = false;
+    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()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    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();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ScEditorContent, isStandalone: true, selector: "div[sc-editor-content]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", focus: "focus", blur: "blur" }, host: { attributes: { "data-slot": "editor-content" }, properties: { "class": "class()", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScEditorContent, decorators: [{
+            type: Component,
+            args: [{
+                    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,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], focus: [{ type: i0.Output, args: ["focus"] }], blur: [{ type: i0.Output, args: ["blur"] }] } });
+//# sourceMappingURL=editor-content.js.map

package/esm2022/lib/components/editor/editor-content.js.map

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