@simplysm/angular 14.0.30 → 14.0.33

package/dist/features/editor/sd-tiptap-editor.js

@@ -0,0 +1,377 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, DestroyRef, effect, ElementRef, inject, input, model, signal, untracked, ViewEncapsulation, } from "@angular/core";
+import { setupInvalid } from "../../core/validation/setupInvalid";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { TextStyle } from "@tiptap/extension-text-style";
+import Color from "@tiptap/extension-color";
+import Highlight from "@tiptap/extension-highlight";
+import TextAlign from "@tiptap/extension-text-align";
+import Image from "@tiptap/extension-image";
+import Placeholder from "@tiptap/extension-placeholder";
+import { useTiptapToolbar } from "./useTiptapToolbar";
+import * as i0 from "@angular/core";
+function SdTiptapEditor_Conditional_0_Conditional_48_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 26);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Conditional_48_For_2_Template_button_click_0_listener() { const color_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.applyColor(color_r5)); });
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const color_r5 = ctx.$implicit;
+    i0.ɵɵstyleProp("background-color", color_r5);
+    i0.ɵɵattribute("aria-label", color_r5);
+} }
+function SdTiptapEditor_Conditional_0_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 23);
+    i0.ɵɵrepeaterCreate(1, SdTiptapEditor_Conditional_0_Conditional_48_For_2_Template, 1, 3, "button", 24, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵdomElementStart(3, "button", 25);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Conditional_48_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applyColor(undefined)); });
+    i0.ɵɵtext(4, "\u2715");
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.colorPresets);
+} }
+function SdTiptapEditor_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 1)(1, "div", 2)(2, "button", 3);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("h1")); });
+    i0.ɵɵtext(3, "H1");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "button", 4);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("h2")); });
+    i0.ɵɵtext(5, "H2");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(6, "div", 2)(7, "button", 5);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("bold")); });
+    i0.ɵɵtext(8, "B");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(9, "button", 6);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("italic")); });
+    i0.ɵɵtext(10, "I");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(11, "button", 7);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("underline")); });
+    i0.ɵɵtext(12, "U");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(13, "button", 8);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("strike")); });
+    i0.ɵɵtext(14, "S");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(15, "div", 2)(16, "button", 9);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleColorPicker("text")); });
+    i0.ɵɵdomElement(17, "span", 10);
+    i0.ɵɵtext(18, " A ");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(19, "button", 11);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleColorPicker("bg")); });
+    i0.ɵɵdomElement(20, "span", 10);
+    i0.ɵɵtext(21, " BG ");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(22, "div", 2)(23, "button", 12);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("bulletList")); });
+    i0.ɵɵtext(24, "UL");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(25, "button", 13);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("orderedList")); });
+    i0.ɵɵtext(26, "OL");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(27, "button", 14);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("indent")); });
+    i0.ɵɵtext(28, "\u2192");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(29, "button", 15);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("outdent")); });
+    i0.ɵɵtext(30, "\u2190");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(31, "div", 2)(32, "button", 16);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("blockquote")); });
+    i0.ɵɵtext(33, "\u275D");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(34, "button", 17);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_34_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("codeBlock")); });
+    i0.ɵɵtext(35, "</>");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(36, "div", 2)(37, "button", 18);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_37_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("alignLeft")); });
+    i0.ɵɵtext(38, "\u2261L");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(39, "button", 19);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_39_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("alignCenter")); });
+    i0.ɵɵtext(40, "\u2261C");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(41, "button", 20);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_41_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("alignRight")); });
+    i0.ɵɵtext(42, "\u2261R");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(43, "button", 21);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_43_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("alignJustify")); });
+    i0.ɵɵtext(44, "\u2261J");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(45, "div", 2)(46, "button", 22);
+    i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_46_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("clean")); });
+    i0.ɵɵtext(47, "Tx");
+    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵconditionalCreate(48, SdTiptapEditor_Conditional_0_Conditional_48_Template, 5, 0, "div", 23);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().h1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().h2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().bold);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().italic);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().underline);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().strike);
+    i0.ɵɵadvance(4);
+    i0.ɵɵstyleProp("background-color", ctx_r1.activeColor());
+    i0.ɵɵadvance(3);
+    i0.ɵɵstyleProp("background-color", ctx_r1.activeBgColor());
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().bulletList);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().orderedList);
+    i0.ɵɵadvance(7);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().blockquote);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().codeBlock);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().alignLeft);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().alignCenter);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().alignRight);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().alignJustify);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r1.colorPickerMode() !== undefined ? 48 : -1);
+} }
+const DEFAULT_EXTENSIONS = [
+    StarterKit,
+    TextStyle,
+    Color,
+    Highlight.configure({ multicolor: true }),
+    TextAlign.configure({ types: ["heading", "paragraph"] }),
+    Image.configure({ inline: false, allowBase64: true }),
+];
+export class SdTiptapEditor {
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    validatorFn = input(...(ngDevMode ? [undefined, { debugName: "validatorFn" }] : /* istanbul ignore next */ []));
+    extensions = input(...(ngDevMode ? [undefined, { debugName: "extensions" }] : /* istanbul ignore next */ []));
+    _elRef = inject(ElementRef);
+    _destroyRef = inject(DestroyRef);
+    colorPresets = [
+        "#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef",
+        "#f3f3f3", "#ffffff", "#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff",
+        "#4a86e8", "#0000ff", "#9900ff", "#ff00ff", "#e6b8af", "#f4cccc", "#fce5cd", "#fff2cc",
+        "#d9ead3", "#d0e0e3", "#c9daf8", "#cfe2f3", "#d9d2e9", "#ead1dc", "#dd7e6b", "#ea9999",
+        "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#a4c2f4", "#9fc5e8", "#b4a7d6", "#d5a6bd",
+    ];
+    /** @internal -- TipTap Editor 인스턴스. 테스트 및 고급 사용자용 */
+    editor = signal(undefined, ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+    _toolbar = useTiptapToolbar({ editor: this.editor });
+    activeStates = this._toolbar.activeStates;
+    activeColor = this._toolbar.activeColor;
+    activeBgColor = this._toolbar.activeBgColor;
+    colorPickerMode = this._toolbar.colorPickerMode;
+    execCmd = this._toolbar.execCmd;
+    toggleColorPicker = this._toolbar.toggleColorPicker;
+    applyColor = this._toolbar.applyColor;
+    _lastEditorHtml;
+    _lastExtensions;
+    _resolvedExtensions = computed(() => {
+        const custom = this.extensions();
+        if (custom !== undefined)
+            return custom;
+        const ph = this.placeholder();
+        if (ph !== undefined) {
+            return [...DEFAULT_EXTENSIONS, Placeholder.configure({ placeholder: ph })];
+        }
+        return DEFAULT_EXTENSIONS;
+    }, ...(ngDevMode ? [{ debugName: "_resolvedExtensions" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Single effect that tracks both extensions and value
+        effect(() => {
+            const extensions = this._resolvedExtensions();
+            const val = this.value();
+            // Recreate editor if extensions changed
+            if (this._lastExtensions !== extensions) {
+                this._lastExtensions = extensions;
+                this._destroyEditor();
+                this._createEditor(extensions, val);
+                return;
+            }
+            // Skip if value matches last editor output (editor-originated change)
+            if (val === this._lastEditorHtml)
+                return;
+            // Sync value to existing editor
+            const currentEditor = untracked(() => this.editor());
+            if (currentEditor == null)
+                return;
+            const currentHtml = this._getEditorHtmlFrom(currentEditor);
+            if (currentHtml === val)
+                return;
+            currentEditor.commands.setContent(val ?? "", { emitUpdate: false });
+            this._lastEditorHtml = undefined;
+        });
+        // disabled/readonly → editor.setEditable()
+        effect(() => {
+            const ed = this.editor();
+            if (ed == null)
+                return;
+            const editable = !this.disabled() && !this.readonly();
+            ed.setEditable(editable);
+        });
+        // setupInvalid for form validation
+        setupInvalid(() => {
+            const errorMessages = [];
+            if (this.value() == null) {
+                if (this.required()) {
+                    errorMessages.push("값을 입력하세요.");
+                }
+            }
+            if (this.validatorFn()) {
+                const message = this.validatorFn()(this.value());
+                if (message !== undefined) {
+                    errorMessages.push(message);
+                }
+            }
+            return errorMessages.join("\r\n");
+        });
+        this._destroyRef.onDestroy(() => {
+            this._destroyEditor();
+        });
+    }
+    _createEditor(extensions, initialContent) {
+        const container = this._elRef.nativeElement.querySelector("._editor-container");
+        if (container == null)
+            return;
+        this.editor.set(new Editor({
+            element: container,
+            extensions,
+            content: initialContent ?? "",
+            editable: untracked(() => !this.disabled() && !this.readonly()),
+            onUpdate: ({ editor }) => {
+                const html = this._getEditorHtmlFrom(editor);
+                this._lastEditorHtml = html;
+                this.value.set(html);
+            },
+            onTransaction: () => {
+                this._toolbar.refreshActiveStates();
+            },
+        }));
+    }
+    _destroyEditor() {
+        const ed = untracked(() => this.editor());
+        if (ed != null) {
+            ed.destroy();
+            this.editor.set(undefined);
+        }
+        this._lastEditorHtml = undefined;
+    }
+    _getEditorHtmlFrom(editor) {
+        const html = editor.getHTML();
+        if (editor.isEmpty)
+            return undefined;
+        return html;
+    }
+    static ɵfac = function SdTiptapEditor_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdTiptapEditor)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdTiptapEditor, selectors: [["sd-tiptap-editor"]], hostVars: 2, hostBindings: function SdTiptapEditor_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-sd-disabled", ctx.disabled())("data-sd-readonly", ctx.readonly());
+        } }, inputs: { value: [1, "value"], disabled: [1, "disabled"], readonly: [1, "readonly"], required: [1, "required"], placeholder: [1, "placeholder"], validatorFn: [1, "validatorFn"], extensions: [1, "extensions"] }, outputs: { value: "valueChange" }, decls: 2, vars: 1, consts: [[1, "_editor-container"], [1, "_toolbar"], [1, "_btn-group"], ["type", "button", "data-cmd", "h1", 3, "click"], ["type", "button", "data-cmd", "h2", 3, "click"], ["type", "button", "data-cmd", "bold", 3, "click"], ["type", "button", "data-cmd", "italic", 3, "click"], ["type", "button", "data-cmd", "underline", 3, "click"], ["type", "button", "data-cmd", "strike", 3, "click"], ["type", "button", "data-cmd", "textColor", 1, "_color-btn", 3, "click"], [1, "_color-indicator"], ["type", "button", "data-cmd", "bgColor", 1, "_color-btn", 3, "click"], ["type", "button", "data-cmd", "bulletList", 3, "click"], ["type", "button", "data-cmd", "orderedList", 3, "click"], ["type", "button", "data-cmd", "indent", 3, "click"], ["type", "button", "data-cmd", "outdent", 3, "click"], ["type", "button", "data-cmd", "blockquote", 3, "click"], ["type", "button", "data-cmd", "codeBlock", 3, "click"], ["type", "button", "data-cmd", "alignLeft", 3, "click"], ["type", "button", "data-cmd", "alignCenter", 3, "click"], ["type", "button", "data-cmd", "alignRight", 3, "click"], ["type", "button", "data-cmd", "alignJustify", 3, "click"], ["type", "button", "data-cmd", "clean", 3, "click"], [1, "_color-picker"], ["type", "button", 1, "_color-swatch", 3, "background-color"], ["type", "button", 1, "_color-swatch", "_no-color", 3, "click"], ["type", "button", 1, "_color-swatch", 3, "click"]], template: function SdTiptapEditor_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, SdTiptapEditor_Conditional_0_Template, 49, 33);
+            i0.ɵɵdomElement(1, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional(!ctx.disabled() ? 0 : -1);
+        } }, styles: ["sd-tiptap-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-tiptap-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gap-xs);\n  padding: var(--gap-xs);\n  border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button {\n  padding: var(--gap-xs) var(--gap-sm);\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: transparent;\n  cursor: pointer;\n  font-size: var(--font-size-default);\n  line-height: 1;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active {\n  background: var(--theme-primary-default);\n  color: var(--text-trans-rev-default);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n  background: var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n  background: var(--theme-primary-default);\n}\nsd-tiptap-editor > ._color-picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  padding: var(--gap-xs);\n  border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 1px solid var(--trans-lighter);\n  border-radius: 2px;\n  cursor: pointer;\n  padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--control-color);\n  font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n  padding: var(--gap-sm);\n  min-height: 6.25rem;\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-light);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n  position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n  display: block;\n  height: 2px;\n  width: 100%;\n  position: absolute;\n  bottom: 2px;\n  left: 0;\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTiptapEditor, [{
+        type: Component,
+        args: [{ selector: "sd-tiptap-editor", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
+    @if (!disabled()) {
+      <div class="_toolbar">
+        <div class="_btn-group">
+          <button type="button" data-cmd="h1" [class._active]="activeStates().h1"
+                  (click)="execCmd('h1')">H1</button>
+          <button type="button" data-cmd="h2" [class._active]="activeStates().h2"
+                  (click)="execCmd('h2')">H2</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="bold" [class._active]="activeStates().bold"
+                  (click)="execCmd('bold')">B</button>
+          <button type="button" data-cmd="italic" [class._active]="activeStates().italic"
+                  (click)="execCmd('italic')">I</button>
+          <button type="button" data-cmd="underline" [class._active]="activeStates().underline"
+                  (click)="execCmd('underline')">U</button>
+          <button type="button" data-cmd="strike" [class._active]="activeStates().strike"
+                  (click)="execCmd('strike')">S</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="textColor" class="_color-btn"
+                  (click)="toggleColorPicker('text')">
+            <span class="_color-indicator" [style.background-color]="activeColor()"></span>
+            A
+          </button>
+          <button type="button" data-cmd="bgColor" class="_color-btn"
+                  (click)="toggleColorPicker('bg')">
+            <span class="_color-indicator" [style.background-color]="activeBgColor()"></span>
+            BG
+          </button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="bulletList" [class._active]="activeStates().bulletList"
+                  (click)="execCmd('bulletList')">UL</button>
+          <button type="button" data-cmd="orderedList" [class._active]="activeStates().orderedList"
+                  (click)="execCmd('orderedList')">OL</button>
+          <button type="button" data-cmd="indent" (click)="execCmd('indent')">→</button>
+          <button type="button" data-cmd="outdent" (click)="execCmd('outdent')">←</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="blockquote" [class._active]="activeStates().blockquote"
+                  (click)="execCmd('blockquote')">❝</button>
+          <button type="button" data-cmd="codeBlock" [class._active]="activeStates().codeBlock"
+                  (click)="execCmd('codeBlock')">&lt;/&gt;</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="alignLeft" [class._active]="activeStates().alignLeft"
+                  (click)="execCmd('alignLeft')">≡L</button>
+          <button type="button" data-cmd="alignCenter" [class._active]="activeStates().alignCenter"
+                  (click)="execCmd('alignCenter')">≡C</button>
+          <button type="button" data-cmd="alignRight" [class._active]="activeStates().alignRight"
+                  (click)="execCmd('alignRight')">≡R</button>
+          <button type="button" data-cmd="alignJustify" [class._active]="activeStates().alignJustify"
+                  (click)="execCmd('alignJustify')">≡J</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="clean" (click)="execCmd('clean')">Tx</button>
+        </div>
+      </div>
+      @if (colorPickerMode() !== undefined) {
+        <div class="_color-picker">
+          @for (color of colorPresets; track color) {
+            <button type="button" class="_color-swatch"
+                    [style.background-color]="color"
+                    [attr.aria-label]="color"
+                    (click)="applyColor(color)"></button>
+          }
+          <button type="button" class="_color-swatch _no-color"
+                  (click)="applyColor(undefined)">✕</button>
+        </div>
+      }
+    }
+    <div class="_editor-container"></div>
+  `, host: {
+                    "[attr.data-sd-disabled]": "disabled()",
+                    "[attr.data-sd-readonly]": "readonly()",
+                }, styles: ["sd-tiptap-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-tiptap-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gap-xs);\n  padding: var(--gap-xs);\n  border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button {\n  padding: var(--gap-xs) var(--gap-sm);\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: transparent;\n  cursor: pointer;\n  font-size: var(--font-size-default);\n  line-height: 1;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active {\n  background: var(--theme-primary-default);\n  color: var(--text-trans-rev-default);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n  background: var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n  background: var(--theme-primary-default);\n}\nsd-tiptap-editor > ._color-picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  padding: var(--gap-xs);\n  border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 1px solid var(--trans-lighter);\n  border-radius: 2px;\n  cursor: pointer;\n  padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--control-color);\n  font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n  padding: var(--gap-sm);\n  min-height: 6.25rem;\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-light);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n  position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n  display: block;\n  height: 2px;\n  width: 100%;\n  position: absolute;\n  bottom: 2px;\n  left: 0;\n}"] }]
+    }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], validatorFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "validatorFn", required: false }] }], extensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "extensions", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTiptapEditor, { className: "SdTiptapEditor", filePath: "packages/angular/src/features/editor/sd-tiptap-editor.ts", lineNumber: 235, forbidOrphanRendering: true }); })();

package/dist/features/editor/useTiptapToolbar.d.ts

@@ -0,0 +1,34 @@
+import { type Signal, type WritableSignal } from "@angular/core";
+import type { Editor } from "@tiptap/core";
+export interface TiptapActiveStates {
+    h1: boolean;
+    h2: boolean;
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strike: boolean;
+    bulletList: boolean;
+    orderedList: boolean;
+    blockquote: boolean;
+    codeBlock: boolean;
+    alignLeft: boolean;
+    alignCenter: boolean;
+    alignRight: boolean;
+    alignJustify: boolean;
+}
+export declare const DEFAULT_ACTIVE_STATES: TiptapActiveStates;
+interface TiptapToolbarOptions {
+    editor: Signal<Editor | undefined>;
+}
+export declare function useTiptapToolbar(opt: TiptapToolbarOptions): {
+    activeStates: WritableSignal<TiptapActiveStates>;
+    activeColor: WritableSignal<string>;
+    activeBgColor: WritableSignal<string>;
+    colorPickerMode: WritableSignal<"text" | "bg" | undefined>;
+    execCmd: (cmd: string) => void;
+    refreshActiveStates: () => void;
+    toggleColorPicker: (mode: "text" | "bg") => void;
+    applyColor: (color: string | undefined) => void;
+};
+export {};
+//# sourceMappingURL=useTiptapToolbar.d.ts.map

package/dist/features/editor/useTiptapToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTiptapToolbar.d.ts","sourceRoot":"","sources":["../../../src/features/editor/useTiptapToolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,OAAO,CAAC;IACZ,EAAE,EAAE,OAAO,CAAC;IACZ,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB,EAAE,kBAenC,CAAC;AAEF,UAAU,oBAAoB;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACpC;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,oBAAoB,GAAG;IAC3D,YAAY,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;IACjD,WAAW,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACpC,aAAa,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACtC,eAAe,EAAE,cAAc,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC3D,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACjD,CAgIA"}

package/dist/features/editor/useTiptapToolbar.js

@@ -0,0 +1,144 @@
+import { signal } from "@angular/core";
+export const DEFAULT_ACTIVE_STATES = {
+    h1: false,
+    h2: false,
+    bold: false,
+    italic: false,
+    underline: false,
+    strike: false,
+    bulletList: false,
+    orderedList: false,
+    blockquote: false,
+    codeBlock: false,
+    alignLeft: false,
+    alignCenter: false,
+    alignRight: false,
+    alignJustify: false,
+};
+export function useTiptapToolbar(opt) {
+    const activeStates = signal(DEFAULT_ACTIVE_STATES, ...(ngDevMode ? [{ debugName: "activeStates" }] : /* istanbul ignore next */ []));
+    const activeColor = signal("", ...(ngDevMode ? [{ debugName: "activeColor" }] : /* istanbul ignore next */ []));
+    const activeBgColor = signal("", ...(ngDevMode ? [{ debugName: "activeBgColor" }] : /* istanbul ignore next */ []));
+    const colorPickerMode = signal(undefined, ...(ngDevMode ? [{ debugName: "colorPickerMode" }] : /* istanbul ignore next */ []));
+    function execCmd(cmd) {
+        const ed = opt.editor();
+        if (ed == null)
+            return;
+        const chain = ed.chain().focus();
+        switch (cmd) {
+            case "bold":
+                chain.toggleBold().run();
+                break;
+            case "italic":
+                chain.toggleItalic().run();
+                break;
+            case "underline":
+                chain.toggleUnderline().run();
+                break;
+            case "strike":
+                chain.toggleStrike().run();
+                break;
+            case "h1":
+                chain.toggleHeading({ level: 1 }).run();
+                break;
+            case "h2":
+                chain.toggleHeading({ level: 2 }).run();
+                break;
+            case "bulletList":
+                chain.toggleBulletList().run();
+                break;
+            case "orderedList":
+                chain.toggleOrderedList().run();
+                break;
+            case "indent":
+                chain.sinkListItem("listItem").run();
+                break;
+            case "outdent":
+                chain.liftListItem("listItem").run();
+                break;
+            case "blockquote":
+                chain.toggleBlockquote().run();
+                break;
+            case "codeBlock":
+                chain.toggleCodeBlock().run();
+                break;
+            case "alignLeft":
+                chain.setTextAlign("left").run();
+                break;
+            case "alignCenter":
+                chain.setTextAlign("center").run();
+                break;
+            case "alignRight":
+                chain.setTextAlign("right").run();
+                break;
+            case "alignJustify":
+                chain.setTextAlign("justify").run();
+                break;
+            case "clean":
+                chain.clearNodes().unsetAllMarks().run();
+                break;
+        }
+    }
+    function refreshActiveStates() {
+        const ed = opt.editor();
+        if (ed == null)
+            return;
+        activeStates.set({
+            bold: ed.isActive("bold"),
+            italic: ed.isActive("italic"),
+            underline: ed.isActive("underline"),
+            strike: ed.isActive("strike"),
+            h1: ed.isActive("heading", { level: 1 }),
+            h2: ed.isActive("heading", { level: 2 }),
+            bulletList: ed.isActive("bulletList"),
+            orderedList: ed.isActive("orderedList"),
+            blockquote: ed.isActive("blockquote"),
+            codeBlock: ed.isActive("codeBlock"),
+            alignLeft: ed.isActive({ textAlign: "left" }),
+            alignCenter: ed.isActive({ textAlign: "center" }),
+            alignRight: ed.isActive({ textAlign: "right" }),
+            alignJustify: ed.isActive({ textAlign: "justify" }),
+        });
+        const textColor = ed.getAttributes("textStyle")["color"];
+        activeColor.set(typeof textColor === "string" ? textColor : "");
+        const bgColor = ed.getAttributes("highlight")["color"];
+        activeBgColor.set(typeof bgColor === "string" ? bgColor : "");
+    }
+    function toggleColorPicker(mode) {
+        colorPickerMode.set(colorPickerMode() === mode ? undefined : mode);
+    }
+    function applyColor(color) {
+        const ed = opt.editor();
+        if (ed == null)
+            return;
+        const chain = ed.chain().focus();
+        const mode = colorPickerMode();
+        if (mode === "text") {
+            if (color !== undefined) {
+                chain.setColor(color).run();
+            }
+            else {
+                chain.unsetColor().run();
+            }
+        }
+        else if (mode === "bg") {
+            if (color !== undefined) {
+                chain.setHighlight({ color }).run();
+            }
+            else {
+                chain.unsetHighlight().run();
+            }
+        }
+        colorPickerMode.set(undefined);
+    }
+    return {
+        activeStates,
+        activeColor,
+        activeBgColor,
+        colorPickerMode,
+        execCmd,
+        refreshActiveStates,
+        toggleColorPicker,
+        applyColor,
+    };
+}

package/dist/features/theme/sd-theme-provider.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+export declare class SdThemeProvider {
+    dark: import("@angular/core").WritableSignal<boolean>;
+    readonly fontSizePresets: readonly number[];
+    fontSize: import("@angular/core").WritableSignal<number>;
+    constructor();
+    increaseFontSize(): void;
+    decreaseFontSize(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdThemeProvider, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SdThemeProvider>;
+}
+//# sourceMappingURL=sd-theme-provider.d.ts.map

package/dist/features/theme/sd-theme-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-theme-provider.d.ts","sourceRoot":"","sources":["../../../src/features/theme/sd-theme-provider.ts"],"names":[],"mappings":";AAEA,qBACa,eAAe;IAC1B,IAAI,kDAA0B;IAE9B,QAAQ,CAAC,eAAe,EAAE,SAAS,MAAM,EAAE,CAA4B;IAEvE,QAAQ,iDAAsB;;IAY9B,gBAAgB,IAAI,IAAI;IAOxB,gBAAgB,IAAI,IAAI;yCAxBb,eAAe;6CAAf,eAAe;CAoC3B"}

package/dist/features/theme/sd-theme-provider.js

@@ -0,0 +1,39 @@
+import { effect, Injectable, signal } from "@angular/core";
+import * as i0 from "@angular/core";
+export class SdThemeProvider {
+    dark = signal(false, ...(ngDevMode ? [{ debugName: "dark" }] : /* istanbul ignore next */ []));
+    fontSizePresets = [12, 14, 16, 20, 24, 28];
+    fontSize = signal(12, ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            document.body.classList.toggle("sd-theme-dark", this.dark());
+        });
+        effect(() => {
+            document.documentElement.style.fontSize = `${this.fontSize()}px`;
+        });
+    }
+    increaseFontSize() {
+        const next = this.fontSizePresets.find((v) => v > this.fontSize());
+        if (next != null) {
+            this.fontSize.set(next);
+        }
+    }
+    decreaseFontSize() {
+        const curr = this.fontSize();
+        let prev;
+        for (const v of this.fontSizePresets) {
+            if (v < curr) {
+                prev = v;
+            }
+        }
+        if (prev != null) {
+            this.fontSize.set(prev);
+        }
+    }
+    static ɵfac = function SdThemeProvider_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdThemeProvider)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: SdThemeProvider, factory: SdThemeProvider.ɵfac, providedIn: "root" });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdThemeProvider, [{
+        type: Injectable,
+        args: [{ providedIn: "root" }]
+    }], () => [], null); })();

package/dist/features/theme/sd-theme-selector.d.ts

@@ -0,0 +1,15 @@
+import { SdThemeProvider } from "./sd-theme-provider";
+import * as i0 from "@angular/core";
+export declare class SdThemeSelector {
+    protected readonly icons: {
+        tablerPalette: string;
+        tablerMinus: string;
+        tablerPlus: string;
+    };
+    protected readonly sdTheme: SdThemeProvider;
+    protected readonly isMinFontSize: import("@angular/core").Signal<boolean>;
+    protected readonly isMaxFontSize: import("@angular/core").Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdThemeSelector, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdThemeSelector, "sd-theme-selector", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=sd-theme-selector.d.ts.map

package/dist/features/theme/sd-theme-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-theme-selector.d.ts","sourceRoot":"","sources":["../../../src/features/theme/sd-theme-selector.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;;AAEtD,qBA+Ca,eAAe;IAC1B,SAAS,CAAC,QAAQ,CAAC,KAAK;;;;MAA8C;IACtE,SAAS,CAAC,QAAQ,CAAC,OAAO,kBAA2B;IAErD,SAAS,CAAC,QAAQ,CAAC,aAAa,0CAE9B;IAEF,SAAS,CAAC,QAAQ,CAAC,aAAa,0CAG9B;yCAXS,eAAe;2CAAf,eAAe;CAY3B"}