@simplysm/angular 14.1.20 → 14.2.1

package/src/data/shared-data/sd-shared-data-select.ts

@@ -92,14 +92,13 @@ import { matchesSearchText } from "./matchesSearchText";
 
       <ng-template #beforeTpl>
         @if (
-          (!required() && selectMode() === "single") ||
-          (useUndefined() && selectMode() === "multi")
+          (!required() && selectMode() === "single") || (useUndefined() && selectMode() === "multi")
         ) {
           <sd-select-item>
             @if (undefinedTplRef()) {
               <ng-template [ngTemplateOutlet]="undefinedTplRef()!" />
             } @else {
-              <span class="tx-theme-gray-default">미지정</span>
+              <span class="tx-gray">미지정</span>
             }
           </sd-select-item>
         }
@@ -117,9 +116,7 @@ import { matchesSearchText } from "./matchesSearchText";
         ) {
           <sd-select-item [value]="item.__valueKey" [hidden]="!getItemVisible(item, index)">
             <span
-              [style.text-decoration]="
-                getIsHiddenFn()(item, index) ? 'line-through' : undefined
-              "
+              [style.text-decoration]="getIsHiddenFn()(item, index) ? 'line-through' : undefined"
             >
               <ng-template
                 [ngTemplateOutlet]="itemTplRef() ?? null"
@@ -165,13 +162,10 @@ export class SdSharedDataSelect<
 
   selectClass = input<string>();
   multiSelectionDisplayDirection = input<"vertical">();
-  getIsHiddenFn = input<(item: TItem, index: number) => boolean>(
-    (item) => item.__isHidden,
-  );
-  getSearchTextFn = input<(item: TItem, index: number) => string>(
-    (item) => item.__searchText,
-  );
-  displayOrderByFn = input<(item: TItem) => string | number | DateOnly | DateTime | Time | undefined>();
+  getIsHiddenFn = input<(item: TItem, index: number) => boolean>((item) => item.__isHidden);
+  getSearchTextFn = input<(item: TItem, index: number) => string>((item) => item.__searchText);
+  displayOrderByFn =
+    input<(item: TItem) => string | number | DateOnly | DateTime | Time | undefined>();
 
   itemTplRef = contentChild<SdItemOfTemplate<TItem>, TemplateRef<SdItemOfTemplateContext<TItem>>>(
     SdItemOfTemplate,
@@ -187,9 +181,7 @@ export class SdSharedDataSelect<
 
   isDropdownOpen = computed(() => this._selectCtrl()?.dropdownOpen() ?? false);
 
-  hasParentKey = computed(() =>
-    this.items().some((item) => item.__parentKey != null),
-  );
+  hasParentKey = computed(() => this.items().some((item) => item.__parentKey != null));
 
   itemByParentKeyMap = computed(() => {
     if (!this.hasParentKey()) return undefined;
@@ -296,10 +288,7 @@ export class SdSharedDataSelect<
   }
 
   getItemVisible(item: TItem, index: number): boolean {
-    if (
-      this.isIncludeSearchText(item, index) &&
-      !this.getIsHiddenFn()(item, index)
-    ) {
+    if (this.isIncludeSearchText(item, index) && !this.getIsHiddenFn()(item, index)) {
       return true;
     }
     // 현재 선택된 항목은 항상 표시
@@ -328,10 +317,7 @@ export class SdSharedDataSelect<
   });
 
   getChildren = (item: SharedDataBase<string | number>): TItem[] => {
-    return (
-      this._sortedChildrenMap()?.get(item.__valueKey) ??
-      []
-    );
+    return this._sortedChildrenMap()?.get(item.__valueKey) ?? [];
   };
 
   async onModalButtonClick(event: MouseEvent): Promise<void> {
@@ -351,10 +337,7 @@ export class SdSharedDataSelect<
     });
 
     if (result != null) {
-      const newValue =
-        this.selectMode() === "multi"
-          ? result.selectedKeys
-          : result.selectedKeys[0];
+      const newValue = this.selectMode() === "multi" ? result.selectedKeys : result.selectedKeys[0];
       this.value.set(newValue);
     }
   }

package/src/data/sheet/sd-sheet-config.modal.ts

@@ -92,7 +92,9 @@ interface ConfigItem {
                     <ng-icon [svg]="tablerChevronUp" />
                   </sd-anchor>
                   <sd-anchor
-                    [disabled]="index === items().length - 1 || (item.fixed && !items()[index + 1].fixed)"
+                    [disabled]="
+                      index === items().length - 1 || (item.fixed && !items()[index + 1].fixed)
+                    "
                     (click)="onMoveDown(item)"
                   >
                     <ng-icon [svg]="tablerChevronDown" />
@@ -147,7 +149,7 @@ interface ConfigItem {
           </sd-sheet>
         </div>
 
-        <div class="p-sm-default flex-row gap-sm bdt bdt-theme-gray-lightest">
+        <div class="p-sm-default flex-row gap-sm bdt bdt-hairline">
           <div class="flex-fill align-start">
             <sd-button
               [size]="'sm'"
@@ -167,11 +169,7 @@ interface ConfigItem {
           >
             OK
           </sd-button>
-          <sd-button
-            [size]="'sm'"
-            [buttonStyle]="'min-width: 60px;'"
-            (click)="onCancelClick()"
-          >
+          <sd-button [size]="'sm'" [buttonStyle]="'min-width: 60px;'" (click)="onCancelClick()">
             Cancel
           </sd-button>
         </div>

package/src/data/sheet/sd-sheet.ts

@@ -136,7 +136,7 @@ import { SdEvents } from "../../core/events/sd-events";
                   >
                     <ng-icon
                       [svg]="icons.tablerCaretRight"
-                      [class.tx-theme-primary-default]="expanding.isAllExpanded()"
+                      [class.tx-primary]="expanding.isAllExpanded()"
                       [style.transform]="expanding.isAllExpanded() ? 'rotate(90deg)' : undefined"
                       (click)="expanding.toggleAll()"
                     />
@@ -151,9 +151,7 @@ import { SdEvents } from "../../core/events/sd-events";
                     [attr.rowspan]="cell.rowspan > 1 ? cell.rowspan : null"
                     [attr.data-c]="cell.colIndex"
                     [attr.title]="cell.text"
-                    [style.left.px]="
-                      cell.fixed ? fixing.fixedLeftMap().get(cell.colIndex) : null
-                    "
+                    [style.left.px]="cell.fixed ? fixing.fixedLeftMap().get(cell.colIndex) : null"
                   >
                     <div class="_p-sheet">
                       <pre>{{ cell.text }}</pre>
@@ -192,7 +190,7 @@ import { SdEvents } from "../../core/events/sd-events";
                           } @else if (_sortDef?.desc === true) {
                             <ng-icon [svg]="icons.tablerSortDescending" />
                           } @else {
-                            <ng-icon [svg]="icons.tablerArrowsSort" class="tx-trans-lightest" />
+                            <ng-icon [svg]="icons.tablerArrowsSort" class="tx-faint" />
                           }
                           @if (_sortDef?.indexText) {
                             <sub>{{ _sortDef?.indexText }}</sub>
@@ -301,7 +299,7 @@ import { SdEvents } from "../../core/events/sd-events";
                     <ng-icon
                       [svg]="icons.tablerCaretRight"
                       [style.transform]="isExpanded(item) ? 'rotate(90deg)' : undefined"
-                      [class.tx-theme-primary-default]="isExpanded(item)"
+                      [class.tx-primary]="isExpanded(item)"
                       [attr.aria-expanded]="getAriaExpanded(item)"
                       (click)="onExpandClick($event, item)"
                     />
@@ -361,18 +359,18 @@ import { SdEvents } from "../../core/events/sd-events";
       $z-index-focus-row-indicator: 6;
       $z-index-resize-indicator: 7;
 
-      $border-color: var(--border-color-lighter);
-      $border-color-dark: var(--border-color-lighter);
-      $border-color-darker: var(--border-color-light);
+      $border-color: var(--sd-bd-soft);
+      $border-color-dark: var(--sd-bd-soft);
+      $border-color-darker: var(--sd-bd-default);
 
-      $border-radius: var(--border-radius-default);
+      $border-radius: var(--sd-radius-default);
 
       sd-sheet {
         border: 1px solid $border-color-dark;
         border-radius: $border-radius;
 
         > ._tool {
-          background: var(--control-color);
+          background-color: var(--sd-bg-control);
           border-top-left-radius: $border-radius;
           border-top-right-radius: $border-radius;
           border-bottom: 1px solid $border-color-dark;
@@ -380,7 +378,8 @@ import { SdEvents } from "../../core/events/sd-events";
 
         > ._sheet-container {
           position: relative;
-          background: var(--sheet-bg);
+          background-color: var(--sd-bg-sheet);
+          background-image: var(--sd-bg-sheet-image);
           border-bottom-left-radius: $border-radius;
           border-bottom-right-radius: $border-radius;
           overflow: auto;
@@ -391,6 +390,7 @@ import { SdEvents } from "../../core/events/sd-events";
             margin-right: 2px;
             margin-bottom: 2px;
             border-bottom-right-radius: $border-radius;
+            box-shadow: var(--sd-sheet-shadow);
 
             > * > tr > *:last-child {
               border-right: 1px solid $border-color-dark;
@@ -418,14 +418,14 @@ import { SdEvents } from "../../core/events/sd-events";
               }
 
               &._feature-cell {
-                background: var(--theme-gray-lightest);
-                min-width: calc(var(--font-size-default) + 2px + var(--sheet-ph) * 2);
-                padding: var(--sheet-pv) var(--sheet-ph);
+                background-color: var(--sd-bg-gray-subtle);
+                min-width: calc(var(--sd-font-size-default) + 2px + var(--sd-sheet-ph) * 2);
+                padding: var(--sd-sheet-pv) var(--sd-sheet-ph);
                 text-align: left;
 
                 > ng-icon {
                   cursor: pointer;
-                  color: var(--text-trans-lightest);
+                  color: var(--sd-tx-faint);
                 }
               }
 
@@ -446,7 +446,7 @@ import { SdEvents } from "../../core/events/sd-events";
 
               > tr > th {
                 position: relative;
-                background: var(--theme-gray-lightest);
+                background-color: var(--sd-bg-gray-subtle);
                 vertical-align: middle;
 
                 &._fixed {
@@ -471,8 +471,8 @@ import { SdEvents } from "../../core/events/sd-events";
 
                 > ._headerContent {
                   > ._sort-icon {
-                    padding: var(--gap-xs) var(--gap-xs) var(--gap-xs) 0;
-                    background-color: var(--theme-gray-lightest);
+                    padding: var(--sd-gap-xs) var(--sd-gap-xs) var(--sd-gap-xs) 0;
+                    background-color: var(--sd-bg-gray-subtle);
                   }
                 }
 
@@ -492,7 +492,7 @@ import { SdEvents } from "../../core/events/sd-events";
                 }
 
                 > tr._summary-row > th {
-                  background: var(--theme-warning-lightest);
+                  background-color: var(--sd-bg-warning-subtle);
                   text-align: left;
                   border-bottom: 1px solid $border-color-dark;
                 }
@@ -500,8 +500,8 @@ import { SdEvents } from "../../core/events/sd-events";
             }
 
             > tbody > tr > td {
-              font-family: var(--font-family-field);
-              background: var(--control-color);
+              font-family: var(--sd-font-family-field);
+              background-color: var(--sd-bg-control);
               vertical-align: top;
 
               &._fixed {
@@ -513,8 +513,9 @@ import { SdEvents } from "../../core/events/sd-events";
                 margin-top: 0.4em;
                 width: 0.5em;
                 height: 0.5em;
-                border-left: 1px solid var(--text-trans-default);
-                border-bottom: 1px solid var(--text-trans-default);
+                // 셀 텍스트 색을 그대로 따르는 눈금 (구 --text-trans-default 고정과 시각 등가)
+                border-left: 1px solid currentColor;
+                border-bottom: 1px solid currentColor;
                 vertical-align: top;
               }
             }
@@ -524,12 +525,12 @@ import { SdEvents } from "../../core/events/sd-events";
             display: none;
             position: absolute;
             pointer-events: none;
-            background: rgba(158, 158, 158, 0.1);
+            background-color: var(--sd-bg-state-active);
             z-index: $z-index-focus-row-indicator;
 
             > ._focus-cell-indicator {
               position: absolute;
-              border: 2px solid var(--theme-primary-default);
+              border: 2px solid var(--sd-focus-ring-color);
               border-radius: $border-radius;
             }
           }
@@ -559,14 +560,14 @@ import { SdEvents } from "../../core/events/sd-events";
               left: 0;
               position: absolute;
               pointer-events: none;
-              background: var(--theme-primary-default);
+              background-color: var(--sd-bg-primary-solid);
               opacity: 0.1;
             }
           }
         }
 
         ._p-sheet {
-          padding: var(--sheet-pv) var(--sheet-ph);
+          padding: var(--sd-sheet-pv) var(--sd-sheet-ph);
         }
 
         &[data-sd-focus-mode="row"] {

package/src/data/sheet/useSheetCellStyling.ts

@@ -66,7 +66,11 @@ export function useSheetCellStyling<T>(options: {
     return getFixedLeftStyle(colIdx);
   }
 
-  function getCellStyleWithIndent(item: T, colDef: SdSheetColumnDef, colIdx: number): string | null {
+  function getCellStyleWithIndent(
+    item: T,
+    colDef: SdSheetColumnDef,
+    colIdx: number,
+  ): string | null {
     const parts: string[] = [];
     const cellStyle = getCellStyle(item, colDef);
     if (cellStyle != null) {
@@ -75,13 +79,18 @@ export function useSheetCellStyling<T>(options: {
     if (colIdx === 0 && options.getChildrenFn() != null) {
       const itemDef = options.expandingDef(item);
       if (itemDef.depth > 0) {
-        parts.push(`padding-left: calc(var(--gap-default) + ${itemDef.depth}em)`);
+        parts.push(`padding-left: calc(var(--sd-gap-default) + ${itemDef.depth}em)`);
       }
     }
     return parts.length > 0 ? parts.join("; ") : null;
   }
 
-  function getDataCellClass(item: T, colDef: SdSheetColumnDef, r: number, c: number): string | null {
+  function getDataCellClass(
+    item: T,
+    colDef: SdSheetColumnDef,
+    r: number,
+    c: number,
+  ): string | null {
     const parts: string[] = [];
     const classFn = options.getItemCellClassFn();
     const customClass = classFn != null ? classFn(item, colDef.key) : undefined;

package/src/data/state-preset/sd-state-preset.ts

@@ -31,11 +31,11 @@ export interface SdStatePresetDef<TState> {
   template: `
     <div class="_sd-state-preset">
       <sd-anchor (click)="onAddClick()" class="_add-btn">
-        <ng-icon [svg]="tablerStar" class="tx-theme-warning-default" />
+        <ng-icon [svg]="tablerStar" class="tx-warning" />
       </sd-anchor>
       @for (preset of _presets(); track preset.name) {
         <div class="_preset-item">
-          <sd-anchor class="_preset-name tx-trans-default" (click)="onPresetClick(preset)">
+          <sd-anchor class="_preset-name tx-default" (click)="onPresetClick(preset)">
             {{ preset.name }}
           </sd-anchor>
           <sd-anchor class="_preset-save" (click)="onSaveClick(preset)">
@@ -57,52 +57,52 @@ export interface SdStatePresetDef<TState> {
         > ._sd-state-preset {
           display: flex;
           align-items: center;
-          gap: var(--gap-sm);
+          gap: var(--sd-gap-sm);
           flex-wrap: wrap;
 
           > ._add-btn {
-            line-height: var(--line-height);
+            line-height: var(--sd-line-height);
             border: 1px solid transparent;
-            padding: var(--gap-sm) var(--gap-default);
+            padding: var(--sd-gap-sm) var(--sd-gap-default);
           }
 
           > ._preset-item {
             display: inline-flex;
             align-items: center;
-            gap: var(--gap-xs);
-            line-height: var(--line-height);
+            gap: var(--sd-gap-xs);
+            line-height: var(--sd-line-height);
             border: 1px solid transparent;
-            border-radius: var(--border-radius-lg);
-            padding: var(--gap-sm) var(--gap-default);
-            background: var(--theme-gray-lightest);
+            border-radius: var(--sd-radius-lg);
+            padding: var(--sd-gap-sm) var(--sd-gap-default);
+            background-color: var(--sd-bg-gray-subtle);
 
             &:hover {
-              background: var(--theme-gray-lighter);
+              background-color: var(--sd-bg-gray-subtle-hover);
             }
 
             > sd-anchor {
-              padding: 0 var(--gap-sm);
+              padding: 0 var(--sd-gap-sm);
             }
           }
         }
 
         &[data-sd-size="sm"] > ._sd-state-preset {
           > ._add-btn {
-            padding: var(--gap-xs) var(--gap-default);
+            padding: var(--sd-gap-xs) var(--sd-gap-default);
           }
 
           > ._preset-item {
-            padding: var(--gap-xs) var(--gap-default);
+            padding: var(--sd-gap-xs) var(--sd-gap-default);
           }
         }
 
         &[data-sd-size="lg"] > ._sd-state-preset {
           > ._add-btn {
-            padding: var(--gap-default) var(--gap-lg);
+            padding: var(--sd-gap-default) var(--sd-gap-lg);
           }
 
           > ._preset-item {
-            padding: var(--gap-default) var(--gap-lg);
+            padding: var(--sd-gap-default) var(--sd-gap-lg);
           }
         }
       }

package/src/features/editor/sd-markdown-editor.ts

@@ -21,10 +21,7 @@ import Placeholder from "@tiptap/extension-placeholder";
 import { Markdown } from "@tiptap/markdown";
 import { useTiptapToolbar, type TiptapCommand } from "./useTiptapToolbar";
 
-const DEFAULT_EXTENSIONS: AnyExtension[] = [
-  StarterKit,
-  Markdown,
-];
+const DEFAULT_EXTENSIONS: AnyExtension[] = [StarterKit, Markdown];
 
 @Component({
   selector: "sd-markdown-editor",
@@ -36,32 +33,86 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
     @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>
@@ -75,50 +126,50 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
       sd-markdown-editor {
         display: block;
         position: relative;
-        border: 1px solid var(--trans-lighter);
-        border-radius: var(--border-radius-default);
-        background: var(--theme-secondary-lightest);
+        border: 1px solid var(--sd-bd-field);
+        border-radius: var(--sd-radius-default);
+        background-color: var(--sd-bg-field);
 
         > ._toolbar {
           display: flex;
           flex-wrap: wrap;
-          gap: var(--gap-xs);
-          padding: var(--gap-xs);
-          border-bottom: 1px solid var(--trans-lighter);
+          gap: var(--sd-gap-xs);
+          padding: var(--sd-gap-xs);
+          border-bottom: 1px solid var(--sd-bd-hairline);
 
           > ._btn-group {
             display: flex;
             gap: 1px;
 
             > button {
-              padding: var(--gap-xs) var(--gap-sm);
-              border: 1px solid var(--trans-lighter);
-              border-radius: var(--border-radius-default);
-              background: transparent;
+              padding: var(--sd-gap-xs) var(--sd-gap-sm);
+              border: 1px solid var(--sd-bd-hairline);
+              border-radius: var(--sd-radius-default);
+              background-color: transparent;
               cursor: pointer;
-              font-size: var(--font-size-default);
+              font-size: var(--sd-font-size-default);
               line-height: 1;
 
               &._active {
-                background: var(--theme-primary-default);
-                color: var(--text-trans-rev-default);
+                background-color: var(--sd-bg-primary-solid);
+                color: var(--sd-tx-primary-solid);
               }
 
               &:hover {
-                background: var(--trans-lighter);
+                background-color: var(--sd-bg-state-hover);
               }
 
               &._active:hover {
-                background: var(--theme-primary-default);
+                background-color: var(--sd-bg-primary-solid);
               }
             }
           }
         }
 
         > ._editor-container {
-          padding: var(--gap-sm);
+          padding: var(--sd-gap-sm);
           min-height: 6.25rem;
-          font-family: var(--font-family-field);
+          font-family: var(--sd-font-family-field);
 
           > .tiptap {
             outline: none;
@@ -129,9 +180,10 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
           }
         }
 
+        // disabled 는 색 치환 단일 규약 (DEC-009)
         &[data-sd-disabled="true"] {
-          background: var(--theme-gray-lightest);
-          color: var(--text-trans-light);
+          background-color: var(--sd-bg-disabled);
+          color: var(--sd-tx-disabled);
 
           > ._editor-container > .tiptap {
             cursor: not-allowed;
@@ -245,21 +297,23 @@ export class SdMarkdownEditor {
     const container = this._elRef.nativeElement.querySelector("._editor-container");
     if (container == null) return;
 
-    this.editor.set(new Editor({
-      element: container,
-      extensions,
-      content: initialContent ?? "",
-      contentType: "markdown",
-      editable: untracked(() => !this.disabled() && !this.readonly()),
-      onUpdate: ({ editor }) => {
-        const markdown = this._getEditorMarkdownFrom(editor);
-        this._lastEditorMarkdown = markdown;
-        this.value.set(markdown);
-      },
-      onTransaction: () => {
-        this._toolbar.refreshActiveStates();
-      },
-    }));
+    this.editor.set(
+      new Editor({
+        element: container,
+        extensions,
+        content: initialContent ?? "",
+        contentType: "markdown",
+        editable: untracked(() => !this.disabled() && !this.readonly()),
+        onUpdate: ({ editor }) => {
+          const markdown = this._getEditorMarkdownFrom(editor);
+          this._lastEditorMarkdown = markdown;
+          this.value.set(markdown);
+        },
+        onTransaction: () => {
+          this._toolbar.refreshActiveStates();
+        },
+      }),
+    );
   }
 
   private _destroyEditor(): void {