@simplysm/angular 14.0.101 → 14.1.1

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

@@ -0,0 +1,278 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  model,
+  signal,
+  untracked,
+  ViewEncapsulation,
+  type WritableSignal,
+} from "@angular/core";
+import { setupInvalid } from "../../core/validation/setupInvalid";
+import { Editor, type AnyExtension } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Markdown } from "@tiptap/markdown";
+import { useTiptapToolbar } from "./useTiptapToolbar";
+
+const DEFAULT_EXTENSIONS: AnyExtension[] = [
+  StarterKit,
+  Markdown,
+];
+
+@Component({
+  selector: "sd-markdown-editor",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  template: `
+    @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>
+        </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>
+        </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="clean" (click)="execCmd('clean')">Tx</button>
+        </div>
+      </div>
+    }
+    <div class="_editor-container"></div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-markdown-editor {
+        display: block;
+        position: relative;
+        border: 1px solid var(--trans-lighter);
+        border-radius: var(--border-radius-default);
+        background: var(--theme-secondary-lightest);
+
+        > ._toolbar {
+          display: flex;
+          flex-wrap: wrap;
+          gap: var(--gap-xs);
+          padding: var(--gap-xs);
+          border-bottom: 1px solid var(--trans-lighter);
+
+          > ._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;
+              cursor: pointer;
+              font-size: var(--font-size-default);
+              line-height: 1;
+
+              &._active {
+                background: var(--theme-primary-default);
+                color: var(--text-trans-rev-default);
+              }
+
+              &:hover {
+                background: var(--trans-lighter);
+              }
+
+              &._active:hover {
+                background: var(--theme-primary-default);
+              }
+            }
+          }
+        }
+
+        > ._editor-container {
+          padding: var(--gap-sm);
+          min-height: 6.25rem;
+          font-family: var(--font-family-field);
+
+          > .tiptap {
+            outline: none;
+
+            &:focus {
+              outline: none;
+            }
+          }
+        }
+
+        &[data-sd-disabled="true"] {
+          background: var(--theme-gray-lightest);
+          color: var(--text-trans-light);
+
+          > ._editor-container > .tiptap {
+            cursor: not-allowed;
+          }
+        }
+
+        &[data-sd-readonly="true"] {
+          > ._editor-container > .tiptap {
+            cursor: default;
+          }
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-disabled]": "disabled()",
+    "[attr.data-sd-readonly]": "readonly()",
+  },
+})
+export class SdMarkdownEditor {
+  value = model<string>();
+  disabled = input(false, { transform: booleanAttribute });
+  readonly = input(false, { transform: booleanAttribute });
+  required = input(false, { transform: booleanAttribute });
+  placeholder = input<string>();
+  validatorFn = input<(value: string | undefined) => string | undefined>();
+
+  private readonly _elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly _destroyRef = inject(DestroyRef);
+
+  /** @internal -- TipTap Editor 인스턴스. 테스트 및 고급 사용자용 */
+  editor: WritableSignal<Editor | undefined> = signal(undefined);
+
+  private readonly _toolbar = useTiptapToolbar({ editor: this.editor });
+  activeStates = this._toolbar.activeStates;
+
+  private _lastEditorMarkdown: string | undefined;
+  private _lastExtensions: AnyExtension[] | undefined;
+
+  private readonly _resolvedExtensions = computed(() => {
+    const ph = this.placeholder();
+    if (ph != null) {
+      return [...DEFAULT_EXTENSIONS, Placeholder.configure({ placeholder: ph })];
+    }
+    return DEFAULT_EXTENSIONS;
+  });
+
+  constructor() {
+    effect(() => {
+      const extensions = this._resolvedExtensions();
+      const value = this.value();
+      const val = value === "" ? undefined : value;
+      if (value === "") {
+        untracked(() => this.value.set(undefined));
+      }
+
+      if (this._lastExtensions !== extensions) {
+        this._lastExtensions = extensions;
+        this._destroyEditor();
+        this._createEditor(extensions, val);
+        return;
+      }
+
+      if (val === this._lastEditorMarkdown) return;
+
+      const currentEditor = untracked(() => this.editor());
+      if (currentEditor == null) return;
+      const currentMarkdown = this._getEditorMarkdownFrom(currentEditor);
+      if (currentMarkdown === val) return;
+      currentEditor.commands.setContent(val ?? "", { contentType: "markdown", emitUpdate: false });
+      this._lastEditorMarkdown = undefined;
+    });
+
+    effect(() => {
+      const ed = this.editor();
+      if (ed == null) return;
+      const editable = !this.disabled() && !this.readonly();
+      ed.setEditable(editable);
+    });
+
+    setupInvalid(() => {
+      const errorMessages: string[] = [];
+      if (this.value() == null) {
+        if (this.required()) {
+          errorMessages.push("값을 입력하세요.");
+        }
+      }
+
+      const validatorFn = this.validatorFn();
+      if (validatorFn != null) {
+        const message = validatorFn(this.value());
+        if (message != null) {
+          errorMessages.push(message);
+        }
+      }
+
+      return errorMessages.join("\r\n");
+    });
+
+    this._destroyRef.onDestroy(() => {
+      this._destroyEditor();
+    });
+  }
+
+  execCmd(cmd: string): void {
+    if (this.disabled() || this.readonly()) return;
+    this._toolbar.execCmd(cmd);
+  }
+
+  private _createEditor(extensions: AnyExtension[], initialContent: string | undefined): void {
+    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();
+      },
+    }));
+  }
+
+  private _destroyEditor(): void {
+    const ed = untracked(() => this.editor());
+    if (ed != null) {
+      ed.destroy();
+      this.editor.set(undefined);
+    }
+    this._lastEditorMarkdown = undefined;
+  }
+
+  private _getEditorMarkdownFrom(editor: Editor): string | undefined {
+    if (editor.isEmpty) return undefined;
+    return editor.getMarkdown();
+  }
+}

package/src/index.ts

@@ -264,6 +264,7 @@ export {
 
 // features/editor
 export { SdTiptapEditor } from "./features/editor/sd-tiptap-editor";
+export { SdMarkdownEditor } from "./features/editor/sd-markdown-editor";
 
 // features/visual
 export { SdLabel } from "./features/visual/sd-label";

package/styles.css

@@ -492,13 +492,13 @@
     filter: invert(1) hue-rotate(180deg);
   }
   .sd-theme-blueprint {
-    --theme-gray-lightest: rgb(250.0359612467, 250.0360440884, 249.2779368046);
-    --theme-gray-lighter: rgb(245.0200869724, 245.0201812093, 244.2649733185);
-    --theme-gray-light: rgb(214.4972833075, 211.0148528696, 208.69228363);
-    --theme-gray-default: rgb(120.5421156673, 112.7105487033, 107.1095116537);
-    --theme-gray-dark: rgb(87.3758702227, 82.7922334309, 77.0566791824);
-    --theme-gray-darker: rgb(68.4644332304, 63.8579930371, 59.244454546);
-    --theme-gray-darkest: rgb(41.2141136397, 36.7696719172, 35.6586021892);
+    --theme-gray-lightest: rgb(249.965274862, 249.965274862, 249.965274862);
+    --theme-gray-lighter: rgb(243.8781621679, 243.8782584823, 244.632450036);
+    --theme-gray-light: rgb(211.9273206973, 211.9262145525, 216.3278766188);
+    --theme-gray-default: rgb(112.9637770491, 112.9469501767, 123.3700946526);
+    --theme-gray-dark: rgb(81.9013746844, 81.8780014744, 92.3374227947);
+    --theme-gray-darker: rgb(62.8536504092, 62.8440021684, 70.4985501248);
+    --theme-gray-darkest: rgb(38.9887136761, 38.9861462622, 42.2714131908);
     --theme-blue-gray-lightest: rgb(248.1529573248, 249.9108643939, 251.6690680963);
     --theme-blue-gray-lighter: rgb(240.8410507803, 244.9263194607, 249.0113985417);
     --theme-blue-gray-light: rgb(202.0487085986, 213.136127163, 226.4329675211);
@@ -534,9 +534,9 @@
     --theme-success-dark: hsl(149.9515480441, 168.4093941383%, 24.2652557495%);
     --theme-success-darker: hsl(150.0005284119, 143.0825359597%, 20.9804319787%);
     --theme-success-darkest: rgb(1.4779812192, 102.3765397158, 48.0900438304);
-    --theme-warning-lightest: hsl(33.3343342232, 102.528234295%, 96.507296985%);
-    --theme-warning-lighter: hsl(34.2903094524, 101.2893750504%, 91.682860556%);
-    --theme-warning-light: hsl(32.1783475455, 100.2607268985%, 82.8640062583%);
+    --theme-warning-lightest: hsl(34.2903094524, 101.2893750504%, 91.682860556%);
+    --theme-warning-lighter: hsl(32.1783475455, 100.2607268985%, 82.8640062583%);
+    --theme-warning-light: hsl(30.9781472306, 103.8794214342%, 71.2539413381%);
     --theme-warning-default: hsl(31.4330872217, 102.5675912326%, 51.3170331393%);
     --theme-warning-dark: hsl(23.8136653657, 138.2924575772%, 40.3162356329%);
     --theme-warning-darker: hsl(20.5064222619, 127.6827158995%, 34.7800557535%);
@@ -3728,41 +3728,42 @@ body.sd-theme-blueprint,
   box-shadow: 5px 5px 0 rgba(28, 62, 156, 0.14);
 }
 
-.sd-theme-blueprint sd-permission-table table > * > tr > * {
-  border-bottom: 1px solid var(--border-color-lighter);
-}
-
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=first] > *._before,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=first] > *._title,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=first] > *._after {
-  background: var(--trans-lighter);
-  border-top: 1px solid var(--border-color-default);
-  border-bottom: 1px solid var(--border-color-default);
-  color: var(--text-trans-default);
-  font-weight: 700;
-}
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=first] > *._before > *,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=first] > *._title > *,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=first] > *._after > * {
-  color: var(--text-trans-default) !important;
-}
-
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=info] > *._title,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=info] > *._after,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=warning] > *._title,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=warning] > *._after,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=success] > *._title,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=success] > *._after {
-  background: transparent;
-}
-
 .sd-theme-blueprint sd-modal > ._dialog > ._header {
   background: var(--theme-primary-default);
   color: var(--text-trans-rev-default);
 }
+.sd-theme-blueprint sd-modal > ._dialog > ._header > ._close-btn {
+  color: var(--text-trans-rev-dark);
+}
+.sd-theme-blueprint sd-modal > ._dialog > ._header > ._close-btn:hover {
+  color: var(--text-trans-rev-default);
+}
 .sd-theme-blueprint sd-crud-detail > sd-base-container > sd-busy-container > .bg-control > .main-align-end {
   background: var(--theme-gray-lightest);
 }
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=first] > *._before,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=first] > *._title,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=first] > *._after {
+  border-radius: 0;
+  box-shadow: inset 0 -1px 0 var(--border-color-lighter);
+  background: var(--theme-gray-lighter);
+  font-weight: bold;
+}
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=first] > *._before > *,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=first] > *._title > *,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=first] > *._after > * {
+  color: var(--text-trans-default) !important;
+}
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=info] > *._title,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=info] > *._after,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=warning] > *._title,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=warning] > *._after,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=success] > *._title,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=success] > *._after {
+  border-radius: 0;
+  box-shadow: inset 0 -1px 0 var(--border-color-lighter);
+  background: var(--theme-gray-lightest);
+}
 
 .flex-row {
   display: flex !important;