@simplysm/angular 14.1.21 → 14.2.2

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

@@ -10,31 +10,31 @@ function SdMarkdownEditor_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 2)(2, "button", 3);
     i0.ɵɵdomListener("click", function SdMarkdownEditor_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.ɵɵtext(3, " H1 ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(4, "button", 4);
     i0.ɵɵdomListener("click", function SdMarkdownEditor_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.ɵɵtext(5, " H2 ");
     i0.ɵɵdomElementEnd()();
     i0.ɵɵdomElementStart(6, "div", 2)(7, "button", 5);
     i0.ɵɵdomListener("click", function SdMarkdownEditor_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.ɵɵtext(8, " B ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(9, "button", 6);
     i0.ɵɵdomListener("click", function SdMarkdownEditor_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.ɵɵtext(10, " I ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(11, "button", 7);
     i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("strike")); });
-    i0.ɵɵtext(12, "S");
+    i0.ɵɵtext(12, " S ");
     i0.ɵɵdomElementEnd()();
     i0.ɵɵdomElementStart(13, "div", 2)(14, "button", 8);
     i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("bulletList")); });
-    i0.ɵɵtext(15, "UL");
+    i0.ɵɵtext(15, " UL ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(16, "button", 9);
     i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("orderedList")); });
-    i0.ɵɵtext(17, "OL");
+    i0.ɵɵtext(17, " OL ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(18, "button", 10);
     i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("indent")); });
@@ -46,11 +46,11 @@ function SdMarkdownEditor_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementEnd()();
     i0.ɵɵdomElementStart(22, "div", 2)(23, "button", 12);
     i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("blockquote")); });
-    i0.ɵɵtext(24, "\u275D");
+    i0.ɵɵtext(24, " \u275D ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(25, "button", 13);
     i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("codeBlock")); });
-    i0.ɵɵtext(26, "</>");
+    i0.ɵɵtext(26, " </> ");
     i0.ɵɵdomElementEnd()();
     i0.ɵɵdomElementStart(27, "div", 2)(28, "button", 14);
     i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("clean")); });
@@ -77,10 +77,7 @@ function SdMarkdownEditor_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("_active", ctx_r1.activeStates().codeBlock);
 } }
-const DEFAULT_EXTENSIONS = [
-    StarterKit,
-    Markdown,
-];
+const DEFAULT_EXTENSIONS = [StarterKit, Markdown];
 export class SdMarkdownEditor {
     value = model(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
@@ -206,7 +203,7 @@ export class SdMarkdownEditor {
             i0.ɵɵdomElement(1, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(!ctx.disabled() && !ctx.readonly() ? 0 : -1);
-        } }, styles: ["sd-markdown-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-markdown-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-markdown-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-markdown-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-markdown-editor > ._toolbar > ._btn-group > button._active {\n  background: var(--theme-primary-default);\n  color: var(--text-trans-rev-default);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button:hover {\n  background: var(--trans-lighter);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button._active:hover {\n  background: var(--theme-primary-default);\n}\nsd-markdown-editor > ._editor-container {\n  padding: var(--gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--font-family-field);\n}\nsd-markdown-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-markdown-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-markdown-editor[data-sd-disabled=true] {\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-light);\n}\nsd-markdown-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-markdown-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}"], encapsulation: 2 });
+        } }, styles: ["sd-markdown-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--sd-bd-field);\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-field);\n}\nsd-markdown-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--sd-gap-xs);\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-markdown-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button {\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: var(--sd-radius-default);\n  background-color: transparent;\n  cursor: pointer;\n  font-size: var(--sd-font-size-default);\n  line-height: 1;\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button._active {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button:hover {\n  background-color: var(--sd-bg-state-hover);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button._active:hover {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-markdown-editor > ._editor-container {\n  padding: var(--sd-gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--sd-font-family-field);\n}\nsd-markdown-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-markdown-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-markdown-editor[data-sd-disabled=true] {\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n}\nsd-markdown-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-markdown-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdMarkdownEditor, [{
         type: Component,
@@ -214,32 +211,86 @@ export class SdMarkdownEditor {
     @if (!disabled() && !readonly()) {
       <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>
+          <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="strike" [class._active]="activeStates().strike"
-                  (click)="execCmd('strike')">S</button>
+          <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="strike"
+            [class._active]="activeStates().strike"
+            (click)="execCmd('strike')"
+          >
+            S
+          </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="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>
+          <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="clean" (click)="execCmd('clean')">Tx</button>
@@ -250,6 +301,6 @@ export class SdMarkdownEditor {
   `, host: {
                     "[attr.data-sd-disabled]": "disabled()",
                     "[attr.data-sd-readonly]": "readonly()",
-                }, styles: ["sd-markdown-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-markdown-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-markdown-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-markdown-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-markdown-editor > ._toolbar > ._btn-group > button._active {\n  background: var(--theme-primary-default);\n  color: var(--text-trans-rev-default);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button:hover {\n  background: var(--trans-lighter);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button._active:hover {\n  background: var(--theme-primary-default);\n}\nsd-markdown-editor > ._editor-container {\n  padding: var(--gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--font-family-field);\n}\nsd-markdown-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-markdown-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-markdown-editor[data-sd-disabled=true] {\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-light);\n}\nsd-markdown-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-markdown-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}"] }]
+                }, styles: ["sd-markdown-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--sd-bd-field);\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-field);\n}\nsd-markdown-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--sd-gap-xs);\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-markdown-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button {\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: var(--sd-radius-default);\n  background-color: transparent;\n  cursor: pointer;\n  font-size: var(--sd-font-size-default);\n  line-height: 1;\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button._active {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button:hover {\n  background-color: var(--sd-bg-state-hover);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button._active:hover {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-markdown-editor > ._editor-container {\n  padding: var(--sd-gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--sd-font-family-field);\n}\nsd-markdown-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-markdown-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-markdown-editor[data-sd-disabled=true] {\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n}\nsd-markdown-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-markdown-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\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 }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdMarkdownEditor, { className: "SdMarkdownEditor", filePath: "packages/angular/src/features/editor/sd-markdown-editor.ts", lineNumber: 154 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdMarkdownEditor, { className: "SdMarkdownEditor", filePath: "packages/angular/src/features/editor/sd-markdown-editor.ts", lineNumber: 206 }); })();

package/dist/features/editor/sd-tiptap-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-tiptap-editor.d.ts","sourceRoot":"","sources":["../../../src/features/editor/sd-tiptap-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAcL,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;;AAqBzD,qBAuMa,cAAc;IACzB,KAAK,0DAAmB;IACxB,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IACzD,WAAW,0DAAmB;IAC9B,WAAW,+CAAiB,MAAM,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,eAAI;IACzE,UAAU,kEAA2B;IAErC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA+C;IACtE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsB;IAElD,QAAQ,CAAC,YAAY,WAMnB;IAEF,qDAAqD;IACrD,MAAM,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAqB;IAE/D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA6C;IACtE,YAAY,kEAA8B;IAC1C,WAAW,yBAA6B;IACxC,aAAa,yBAA+B;IAC5C,eAAe,4CAAiC;IAChD,OAAO,4DAAyB;IAChC,iBAAiB,gCAAmC;IACpD,UAAU,sCAA4B;IAEtC,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,eAAe,CAA6B;IAEpD,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CASjC;;IA6DH,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,kBAAkB;yCAtIf,cAAc;2CAAd,cAAc;CA4I1B"}
+{"version":3,"file":"sd-tiptap-editor.d.ts","sourceRoot":"","sources":["../../../src/features/editor/sd-tiptap-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAcL,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;;AAqBzD,qBAwSa,cAAc;IACzB,KAAK,0DAAmB;IACxB,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IACzD,WAAW,0DAAmB;IAC9B,WAAW,+CAAiB,MAAM,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,eAAI;IACzE,UAAU,kEAA2B;IAErC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA+C;IACtE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsB;IAElD,QAAQ,CAAC,YAAY,WAyCnB;IAEF,qDAAqD;IACrD,MAAM,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAqB;IAE/D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA6C;IACtE,YAAY,kEAA8B;IAC1C,WAAW,yBAA6B;IACxC,aAAa,yBAA+B;IAC5C,eAAe,4CAAiC;IAChD,OAAO,4DAAyB;IAChC,iBAAiB,gCAAmC;IACpD,UAAU,sCAA4B;IAEtC,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,eAAe,CAA6B;IAEpD,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CASjC;;IA6DH,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,kBAAkB;yCA3Kf,cAAc;2CAAd,cAAc;CAgL1B"}

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

@@ -27,7 +27,7 @@ function SdTiptapEditor_Conditional_0_Conditional_48_Template(rf, ctx) { if (rf
     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.ɵɵtext(4, " \u2715 ");
     i0.ɵɵdomElementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -38,27 +38,27 @@ 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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵ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")); });
@@ -72,11 +72,11 @@ function SdTiptapEditor_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     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.ɵɵ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.ɵɵ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")); });
@@ -88,27 +88,27 @@ function SdTiptapEditor_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵ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")); });
@@ -176,11 +176,46 @@ export class SdTiptapEditor {
     _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",
+        "#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, /* @ts-ignore */
@@ -301,7 +336,7 @@ export class SdTiptapEditor {
             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  font-family: var(--font-family-field);\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 });
+        } }, styles: ["sd-tiptap-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--sd-bd-field);\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-field);\n}\nsd-tiptap-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--sd-gap-xs);\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button {\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: var(--sd-radius-default);\n  background-color: transparent;\n  cursor: pointer;\n  font-size: var(--sd-font-size-default);\n  line-height: 1;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n  background-color: var(--sd-bg-state-hover);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-tiptap-editor > ._color-picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 1px solid var(--sd-bd-hairline);\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-color: var(--sd-bg-control);\n  font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n  padding: var(--sd-gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--sd-font-family-field);\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-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\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 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTiptapEditor, [{
         type: Component,
@@ -309,56 +344,148 @@ export class SdTiptapEditor {
     @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>
+          <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>
+          <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')">
+          <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')">
+          <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="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>
+          <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>
+          <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>
@@ -367,13 +494,17 @@ export class SdTiptapEditor {
       @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"
+              [style.background-color]="color"
+              [attr.aria-label]="color"
+              (click)="applyColor(color)"
+            ></button>
           }
-          <button type="button" class="_color-swatch _no-color"
-                  (click)="applyColor(undefined)">✕</button>
+          <button type="button" class="_color-swatch _no-color" (click)="applyColor(undefined)">
+            ✕
+          </button>
         </div>
       }
     }
@@ -381,6 +512,6 @@ export class SdTiptapEditor {
   `, 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  font-family: var(--font-family-field);\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}"] }]
+                }, styles: ["sd-tiptap-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--sd-bd-field);\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-field);\n}\nsd-tiptap-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--sd-gap-xs);\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button {\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: var(--sd-radius-default);\n  background-color: transparent;\n  cursor: pointer;\n  font-size: var(--sd-font-size-default);\n  line-height: 1;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n  background-color: var(--sd-bg-state-hover);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-tiptap-editor > ._color-picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 1px solid var(--sd-bd-hairline);\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-color: var(--sd-bg-control);\n  font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n  padding: var(--sd-gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--sd-font-family-field);\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-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\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: 238 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTiptapEditor, { className: "SdTiptapEditor", filePath: "packages/angular/src/features/editor/sd-tiptap-editor.ts", lineNumber: 335 }); })();

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

@@ -1,6 +1,23 @@
 import * as i0 from "@angular/core";
+export declare const SD_THEMES: readonly [{
+    readonly value: "light";
+    readonly label: "라이트";
+}, {
+    readonly value: "blueprint";
+    readonly label: "블루프린트";
+}, {
+    readonly value: "ide-dark";
+    readonly label: "IDE 다크";
+}];
+export type SdThemeName = (typeof SD_THEMES)[number]["value"];
+export type SdDensity = "normal" | "compact";
 export declare class SdThemeProvider {
-    blueprint: import("@angular/core").WritableSignal<boolean>;
+    readonly themes: readonly {
+        value: SdThemeName;
+        label: string;
+    }[];
+    theme: import("@angular/core").WritableSignal<"light" | "blueprint" | "ide-dark">;
+    density: import("@angular/core").WritableSignal<SdDensity>;
     readonly fontSizePresets: readonly number[];
     fontSize: import("@angular/core").WritableSignal<number>;
     constructor();