@aeriz/wysiwyg 1.0.2 → 1.0.4

package/angular/README.md

@@ -0,0 +1,112 @@
+# Angular 연동
+
+이 디렉터리는 **TypeScript 소스로 배포**됩니다. 미리 컴파일한 Angular
+라이브러리는 빌드에 쓰인 Angular 버전과 소비자 버전이 맞아야 하는데, 소스로
+두면 소비자의 Angular 컴파일러가 직접 컴파일하므로 Angular 14 이상 어느
+버전에서도 같은 파일이 동작합니다.
+
+## 설정 (택 1)
+
+### 방법 A — tsconfig 에 경로 추가 (권장)
+
+`tsconfig.app.json` 의 `include` 에 한 줄 추가하면 Angular CLI 가 이 소스를
+앱과 함께 컴파일합니다.
+
+```jsonc
+{
+  "include": [
+    "src/**/*.ts",
+    "node_modules/@aeriz/wysiwyg/angular/*.ts" // ← 추가
+  ]
+}
+```
+
+### 방법 B — 파일 복사
+
+`aeriz-editor.directive.ts` 를 앱 소스 안으로 복사합니다. 의존성은
+`@angular/core`, `@angular/forms`, `@aeriz/wysiwyg` 뿐입니다.
+
+## 스타일시트
+
+`angular.json` 의 `styles` 배열에 추가합니다.
+
+```jsonc
+"styles": [
+  "node_modules/@aeriz/wysiwyg/dist/aeriz-wysiwyg.min.css",
+  "src/styles.css"
+]
+```
+
+## 사용
+
+### standalone 컴포넌트
+
+```ts
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { AerizEditorDirective } from '@aeriz/wysiwyg/angular';
+
+@Component({
+  standalone: true,
+  imports: [FormsModule, AerizEditorDirective],
+  template: `
+    <div aerizEditor [(ngModel)]="html" theme="dark" placeholder="내용을 입력하세요"></div>
+    <pre>{{ html }}</pre>
+  `,
+})
+export class ComposeComponent {
+  html = '<p>안녕하세요</p>';
+}
+```
+
+### NgModule 앱
+
+```ts
+import { AerizWysiwygModule } from '@aeriz/wysiwyg/angular';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule, AerizWysiwygModule],
+})
+export class AppModule {}
+```
+
+## 바인딩 방식
+
+| 방식 | 템플릿 |
+| --- | --- |
+| 단방향 | `<div aerizEditor [value]="html" (valueChange)="html = $event"></div>` |
+| 양방향 | `<div aerizEditor [(value)]="html"></div>` |
+| ngModel | `<div aerizEditor [(ngModel)]="html"></div>` |
+| Reactive Forms | `<div aerizEditor formControlName="body"></div>` |
+
+## 입력 / 출력
+
+| 이름 | 타입 | 설명 |
+| --- | --- | --- |
+| `value` | `string` | 본문 HTML |
+| `placeholder` | `string` | 빈 본문 안내 문구 |
+| `toolbar` | `ToolbarConfig \| false` | 툴바 구성. `false` 면 숨김 |
+| `theme` | `'light' \| 'dark'` | 테마 |
+| `locale` | `'en' \| 'ko' \| 'ja' \| 'zh'` | UI 언어 |
+| `imageUploadUrl` | `string` | 이미지 업로드 API URL |
+| `fileUploadUrl` | `string` | 파일 업로드 API URL |
+| `imageUpload` | `(file: File) => Promise<string>` | 직접 업로드 핸들러 |
+| `fileUpload` | `(file: File) => Promise<string>` | 직접 업로드 핸들러 |
+| `(valueChange)` | `string` | 본문 변경 |
+| `(stateChange)` | `EditorState` | 블록/선택 상태 변경 |
+| `(ready)` | `AerizEditor` | 인스턴스 생성 완료 |
+
+## 성능 메모
+
+디렉티브는 에디터 인스턴스를 `NgZone` **밖에서** 생성합니다. 에디터는
+`selectionchange` 등 고빈도 이벤트를 구독하므로, zone 안에서 만들면 캐럿을
+움직일 때마다 변경 감지가 돌게 됩니다. 값이 실제로 바뀔 때만 zone 으로
+복귀해 한 번 감지를 돌립니다.
+
+## 뷰어
+
+```html
+<div aerizViewer [blocks]="blocks" theme="light"></div>
+<!-- 블록 대신 HTML 문자열도 가능 -->
+<div aerizViewer [html]="savedHtml"></div>
+```

package/angular/aeriz-editor.directive.ts

@@ -0,0 +1,243 @@
+/**
+ * Angular 디렉티브 — `[aerizEditor]` / `[aerizViewer]`.
+ *
+ * 이 파일은 **소스 배포**다. Angular 라이브러리는 소비자의 Angular 버전에 맞춰
+ * Ivy 로 컴파일돼야 하고, 미리 빌드한 산출물은 버전 창이 좁아진다. 소스로
+ * 두면 소비자의 Angular 컴파일러가 직접 컴파일하므로 Angular 14 ~ 최신까지
+ * 같은 파일 하나로 동작한다. 설정 방법은 `angular/README.md` 참고.
+ *
+ * `@angular/core` / `@angular/forms` 는 소비자 앱의 것을 그대로 쓴다.
+ */
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  forwardRef,
+} from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import type { ControlValueAccessor } from '@angular/forms';
+import { createEditorController, createViewerController } from '@aeriz/wysiwyg/adapter';
+import type {
+  AerizEditorController,
+  AerizEditorProps,
+  AerizViewerController,
+  AerizViewerProps,
+} from '@aeriz/wysiwyg/adapter';
+import type {
+  AerizEditor,
+  AerizViewer,
+  BlockSnapshot,
+  EditorState,
+  ToolbarConfig,
+} from '@aeriz/wysiwyg';
+
+type Theme = 'light' | 'dark';
+type Locale = 'en' | 'ko' | 'ja' | 'zh';
+type HtmlStyles = 'inline' | 'class';
+type UploadFn = (file: File) => Promise<string>;
+
+/**
+ * 에디터 디렉티브.
+ *
+ * 세 가지 바인딩 방식을 모두 지원한다.
+ * - 단방향: `<div aerizEditor [value]="html" (valueChange)="html = $event">`
+ * - 양방향: `<div aerizEditor [(value)]="html">`
+ * - 폼:     `<div aerizEditor [(ngModel)]="html">` / `formControlName="body"`
+ *
+ * 에디터 내부 리스너(selectionchange 등) 는 매우 자주 발화하므로 인스턴스를
+ * Angular zone **밖에서** 만든다. 값이 실제로 바뀔 때만 zone 안으로 돌아와
+ * 변경 감지를 한 번 돌린다.
+ */
+@Directive({
+  selector: '[aerizEditor]',
+  standalone: true,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AerizEditorDirective),
+      multi: true,
+    },
+  ],
+})
+export class AerizEditorDirective
+  implements OnInit, OnChanges, OnDestroy, ControlValueAccessor
+{
+  /** 본문 HTML. `[(value)]` 로 양방향 바인딩할 수 있다. */
+  @Input() value?: string;
+  @Input() placeholder?: string;
+  @Input() toolbar?: ToolbarConfig | false;
+  @Input() theme?: Theme;
+  @Input() locale?: Locale;
+  /** `getHTML()` · `(valueChange)` 출력 전략. 기본 `'inline'`. */
+  @Input() htmlStyles?: HtmlStyles;
+  @Input() imageUploadUrl?: string;
+  @Input() fileUploadUrl?: string;
+  /** 직접 업로드 핸들러. 설정 시 `imageUploadUrl` 보다 우선한다. */
+  @Input() imageUpload?: UploadFn;
+  @Input() fileUpload?: UploadFn;
+
+  @Output() valueChange = new EventEmitter<string>();
+  @Output() stateChange = new EventEmitter<EditorState>();
+  @Output() ready = new EventEmitter<AerizEditor>();
+
+  private controller: AerizEditorController | null = null;
+  /** 에디터가 들고 있는 값. ngModel / [value] 양쪽의 단일 출처. */
+  private current = '';
+  private onChangeFn: (value: string) => void = () => undefined;
+  private onTouchedFn: () => void = () => undefined;
+
+  constructor(
+    private readonly host: ElementRef<HTMLElement>,
+    private readonly zone: NgZone,
+  ) {}
+
+  /** 코어 인스턴스. 명령형 API 접근 경로. */
+  get editor(): AerizEditor | null {
+    return this.controller?.editor ?? null;
+  }
+
+  ngOnInit(): void {
+    if (this.value !== undefined) this.current = this.value;
+    this.zone.runOutsideAngular(() => {
+      this.controller = createEditorController(
+        this.host.nativeElement,
+        this.buildProps(),
+      );
+    });
+  }
+
+  ngOnChanges(): void {
+    if (!this.controller) return;
+    if (this.value !== undefined) this.current = this.value;
+    this.zone.runOutsideAngular(() => {
+      this.controller?.update(this.buildProps());
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.controller?.destroy();
+    this.controller = null;
+  }
+
+  // ─── ControlValueAccessor ────────────────────────────────────────────
+
+  writeValue(value: string | null): void {
+    this.current = value ?? '';
+    this.zone.runOutsideAngular(() => {
+      this.controller?.update(this.buildProps());
+    });
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChangeFn = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouchedFn = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    // 코어에 읽기 전용 모드가 없어 본문 편집 가능 여부만 직접 토글한다.
+    const content = this.controller?.editor.content;
+    if (content) content.contentEditable = isDisabled ? 'false' : 'true';
+  }
+
+  // ─── 내부 ────────────────────────────────────────────────────────────
+
+  private buildProps(): AerizEditorProps {
+    const props: AerizEditorProps = {
+      value: this.current,
+      onChange: (html: string) => {
+        this.current = html;
+        // 편집이 실제로 값을 바꿨을 때만 zone 으로 복귀한다.
+        this.zone.run(() => {
+          this.onChangeFn(html);
+          this.onTouchedFn();
+          this.valueChange.emit(html);
+        });
+      },
+      onStateChange: (state: EditorState) => {
+        this.zone.run(() => this.stateChange.emit(state));
+      },
+      onReady: (editor: AerizEditor) => {
+        this.zone.run(() => this.ready.emit(editor));
+      },
+    };
+    if (this.placeholder !== undefined) props.placeholder = this.placeholder;
+    if (this.toolbar !== undefined) props.toolbar = this.toolbar;
+    if (this.theme !== undefined) props.theme = this.theme;
+    if (this.locale !== undefined) props.locale = this.locale;
+    if (this.htmlStyles !== undefined) props.htmlStyles = this.htmlStyles;
+    if (this.imageUploadUrl !== undefined) props.imageUploadUrl = this.imageUploadUrl;
+    if (this.fileUploadUrl !== undefined) props.fileUploadUrl = this.fileUploadUrl;
+    if (this.imageUpload !== undefined) props.onImageUpload = this.imageUpload;
+    if (this.fileUpload !== undefined) props.onFileUpload = this.fileUpload;
+    return props;
+  }
+}
+
+/** 읽기 전용 뷰어 디렉티브. `blocks` 가 있으면 `html` 보다 우선한다. */
+@Directive({
+  selector: '[aerizViewer]',
+  standalone: true,
+})
+export class AerizViewerDirective implements OnInit, OnChanges, OnDestroy {
+  @Input() blocks?: BlockSnapshot[];
+  @Input() html?: string;
+  @Input() theme?: Theme;
+  /** `getHTML()` 출력 전략. 기본 `'inline'`. */
+  @Input() htmlStyles?: HtmlStyles;
+
+  @Output() ready = new EventEmitter<AerizViewer>();
+
+  private controller: AerizViewerController | null = null;
+
+  constructor(
+    private readonly host: ElementRef<HTMLElement>,
+    private readonly zone: NgZone,
+  ) {}
+
+  get viewer(): AerizViewer | null {
+    return this.controller?.viewer ?? null;
+  }
+
+  ngOnInit(): void {
+    this.zone.runOutsideAngular(() => {
+      this.controller = createViewerController(
+        this.host.nativeElement,
+        this.buildProps(),
+      );
+    });
+  }
+
+  ngOnChanges(): void {
+    if (!this.controller) return;
+    this.zone.runOutsideAngular(() => {
+      this.controller?.update(this.buildProps());
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.controller?.destroy();
+    this.controller = null;
+  }
+
+  private buildProps(): AerizViewerProps {
+    const props: AerizViewerProps = {
+      onReady: (viewer: AerizViewer) => {
+        this.zone.run(() => this.ready.emit(viewer));
+      },
+    };
+    if (this.blocks !== undefined) props.blocks = this.blocks;
+    if (this.html !== undefined) props.html = this.html;
+    if (this.theme !== undefined) props.theme = this.theme;
+    if (this.htmlStyles !== undefined) props.htmlStyles = this.htmlStyles;
+    return props;
+  }
+}

package/angular/aeriz-wysiwyg.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { AerizEditorDirective, AerizViewerDirective } from './aeriz-editor.directive';
+
+/**
+ * NgModule 방식 앱을 위한 편의 모듈.
+ *
+ * standalone 컴포넌트를 쓰는 앱은 이 모듈 없이 디렉티브를 `imports` 에 직접
+ * 넣으면 된다.
+ */
+@NgModule({
+  imports: [AerizEditorDirective, AerizViewerDirective],
+  exports: [AerizEditorDirective, AerizViewerDirective],
+})
+export class AerizWysiwygModule {}

package/angular/index.ts

@@ -0,0 +1,5 @@
+export {
+  AerizEditorDirective,
+  AerizViewerDirective,
+} from './aeriz-editor.directive';
+export { AerizWysiwygModule } from './aeriz-wysiwyg.module';

package/dist/adapters/jquery.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("./shared.cjs"),f=new WeakMap,d=new WeakMap;function c(t,a,s){const n=t[0],e=n?f.get(n):void 0;switch(a){case"getHTML":return(e==null?void 0:e.editor.getHTML())??"";case"getBlocks":return(e==null?void 0:e.editor.serialize())??[];case"setHTML":return t.each((u,i)=>{var r;(r=f.get(i))==null||r.editor.setHTML(String(s[0]??""))}),t;case"update":return t.each((u,i)=>{var r;(r=f.get(i))==null||r.update(s[0]??{})}),t;case"focus":return e==null||e.editor.focus(),t;case"instance":return(e==null?void 0:e.editor)??null;case"destroy":return t.each((u,i)=>{const r=f.get(i);r&&(r.destroy(),f.delete(i))}),t;default:throw new Error(`aerizEditor: 알 수 없는 명령 "${a}"`)}}function y(t,a,s){const n=t[0],e=n?d.get(n):void 0;switch(a){case"getHTML":return(e==null?void 0:e.viewer.getHTML())??"";case"getBlocks":return(e==null?void 0:e.viewer.getBlocks())??[];case"update":return t.each((u,i)=>{var r;(r=d.get(i))==null||r.update(s[0]??{})}),t;case"instance":return(e==null?void 0:e.viewer)??null;case"destroy":return t.each((u,i)=>{const r=d.get(i);r&&(r.destroy(),d.delete(i))}),t;default:throw new Error(`aerizViewer: 알 수 없는 명령 "${a}"`)}}function p(t,...a){if(typeof t=="string")return c(this,t,a);const s=t??{};return this.each((n,e)=>{const u=f.get(e);if(u){u.update(s);return}f.set(e,h.createEditorController(e,s))}),this}function o(t,...a){if(typeof t=="string")return y(this,t,a);const s=t??{};return this.each((n,e)=>{const u=d.get(e);if(u){u.update(s);return}d.set(e,h.createViewerController(e,s))}),this}function w(t){if(!t||typeof t.fn!="object")throw new TypeError("registerAerizJQuery: jQuery 객체가 필요합니다.");t.fn.aerizEditor||(t.fn.aerizEditor=p),t.fn.aerizViewer||(t.fn.aerizViewer=o)}const g=globalThis.jQuery;g&&w(g);exports.registerAerizJQuery=w;

package/dist/adapters/jquery.js

@@ -0,0 +1,91 @@
+import { createEditorController as w, createViewerController as h } from "./shared.js";
+const f = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap();
+function c(t, n, s) {
+  const a = t[0], e = a ? f.get(a) : void 0;
+  switch (n) {
+    case "getHTML":
+      return (e == null ? void 0 : e.editor.getHTML()) ?? "";
+    case "getBlocks":
+      return (e == null ? void 0 : e.editor.serialize()) ?? [];
+    case "setHTML":
+      return t.each((u, i) => {
+        var r;
+        (r = f.get(i)) == null || r.editor.setHTML(String(s[0] ?? ""));
+      }), t;
+    case "update":
+      return t.each((u, i) => {
+        var r;
+        (r = f.get(i)) == null || r.update(s[0] ?? {});
+      }), t;
+    case "focus":
+      return e == null || e.editor.focus(), t;
+    case "instance":
+      return (e == null ? void 0 : e.editor) ?? null;
+    case "destroy":
+      return t.each((u, i) => {
+        const r = f.get(i);
+        r && (r.destroy(), f.delete(i));
+      }), t;
+    default:
+      throw new Error(`aerizEditor: 알 수 없는 명령 "${n}"`);
+  }
+}
+function y(t, n, s) {
+  const a = t[0], e = a ? d.get(a) : void 0;
+  switch (n) {
+    case "getHTML":
+      return (e == null ? void 0 : e.viewer.getHTML()) ?? "";
+    case "getBlocks":
+      return (e == null ? void 0 : e.viewer.getBlocks()) ?? [];
+    case "update":
+      return t.each((u, i) => {
+        var r;
+        (r = d.get(i)) == null || r.update(s[0] ?? {});
+      }), t;
+    case "instance":
+      return (e == null ? void 0 : e.viewer) ?? null;
+    case "destroy":
+      return t.each((u, i) => {
+        const r = d.get(i);
+        r && (r.destroy(), d.delete(i));
+      }), t;
+    default:
+      throw new Error(`aerizViewer: 알 수 없는 명령 "${n}"`);
+  }
+}
+function p(t, ...n) {
+  if (typeof t == "string")
+    return c(this, t, n);
+  const s = t ?? {};
+  return this.each((a, e) => {
+    const u = f.get(e);
+    if (u) {
+      u.update(s);
+      return;
+    }
+    f.set(e, w(e, s));
+  }), this;
+}
+function z(t, ...n) {
+  if (typeof t == "string")
+    return y(this, t, n);
+  const s = t ?? {};
+  return this.each((a, e) => {
+    const u = d.get(e);
+    if (u) {
+      u.update(s);
+      return;
+    }
+    d.set(e, h(e, s));
+  }), this;
+}
+function o(t) {
+  if (!t || typeof t.fn != "object")
+    throw new TypeError("registerAerizJQuery: jQuery 객체가 필요합니다.");
+  t.fn.aerizEditor || (t.fn.aerizEditor = p), t.fn.aerizViewer || (t.fn.aerizViewer = z);
+}
+const g = globalThis.jQuery;
+g && o(g);
+export {
+  o as registerAerizJQuery
+};

package/dist/adapters/react.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),l=require("./shared.cjs");function s(r,n){const c=i.useRef(null),t=i.useRef(null),e=i.useRef(n);return e.current=n,i.useEffect(()=>{const o=c.current;if(!o)return;const u=r(o,e.current);return t.current=u,()=>{u.destroy(),t.current=null}},[]),i.useEffect(()=>{var o;(o=t.current)==null||o.update(n)}),{hostRef:c,controllerRef:t}}function f(r){const n={};return r.className!==void 0&&(n.className=r.className),r.style!==void 0&&(n.style=r.style),r.id!==void 0&&(n.id=r.id),n}function m(r,n){const{hostRef:c,controllerRef:t}=s(l.createEditorController,r);return i.useImperativeHandle(n,()=>({get editor(){var e;return((e=t.current)==null?void 0:e.editor)??null},getHTML:()=>{var e;return((e=t.current)==null?void 0:e.editor.getHTML())??""},setHTML:e=>{var o;return(o=t.current)==null?void 0:o.editor.setHTML(e)},focus:()=>{var e;return(e=t.current)==null?void 0:e.editor.focus()}}),[t]),i.createElement("div",{...f(r),ref:c})}function R(r,n){const{hostRef:c,controllerRef:t}=s(l.createViewerController,r);return i.useImperativeHandle(n,()=>({get viewer(){var e;return((e=t.current)==null?void 0:e.viewer)??null}}),[t]),i.createElement("div",{...f(r),ref:c})}const d=i.forwardRef(m);d.displayName="AerizEditor";const a=i.forwardRef(R);a.displayName="AerizViewer";exports.AerizEditor=d;exports.AerizViewer=a;

package/dist/adapters/react.js

@@ -0,0 +1,66 @@
+import { forwardRef as s, useImperativeHandle as f, createElement as d, useRef as c, useEffect as u } from "react";
+import { createEditorController as R, createViewerController as v } from "./shared.js";
+function a(r, n) {
+  const i = c(null), t = c(null), e = c(n);
+  return e.current = n, u(() => {
+    const o = i.current;
+    if (!o) return;
+    const l = r(o, e.current);
+    return t.current = l, () => {
+      l.destroy(), t.current = null;
+    };
+  }, []), u(() => {
+    var o;
+    (o = t.current) == null || o.update(n);
+  }), { hostRef: i, controllerRef: t };
+}
+function m(r) {
+  const n = {};
+  return r.className !== void 0 && (n.className = r.className), r.style !== void 0 && (n.style = r.style), r.id !== void 0 && (n.id = r.id), n;
+}
+function w(r, n) {
+  const { hostRef: i, controllerRef: t } = a(R, r);
+  return f(
+    n,
+    () => ({
+      get editor() {
+        var e;
+        return ((e = t.current) == null ? void 0 : e.editor) ?? null;
+      },
+      getHTML: () => {
+        var e;
+        return ((e = t.current) == null ? void 0 : e.editor.getHTML()) ?? "";
+      },
+      setHTML: (e) => {
+        var o;
+        return (o = t.current) == null ? void 0 : o.editor.setHTML(e);
+      },
+      focus: () => {
+        var e;
+        return (e = t.current) == null ? void 0 : e.editor.focus();
+      }
+    }),
+    [t]
+  ), d("div", { ...m(r), ref: i });
+}
+function A(r, n) {
+  const { hostRef: i, controllerRef: t } = a(v, r);
+  return f(
+    n,
+    () => ({
+      get viewer() {
+        var e;
+        return ((e = t.current) == null ? void 0 : e.viewer) ?? null;
+      }
+    }),
+    [t]
+  ), d("div", { ...m(r), ref: i });
+}
+const y = s(w);
+y.displayName = "AerizEditor";
+const z = s(A);
+z.displayName = "AerizViewer";
+export {
+  y as AerizEditor,
+  z as AerizViewer
+};

package/dist/adapters/shared.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("@aeriz/wysiwyg");function v(a){const e=document.createElement("div");e.innerHTML=a,f.normalizeContent(e,{writableTail:!1});const t=new f.BlockIdRegistry;return f.assignMissingIds(e,t),f.serializeBlocks(f.listBlocks(e,o=>t.ensure(o)))}function T(a,e,t){const o={element:a,onChange:t},n=e.value??e.initialHTML;return n!==void 0&&(o.initialHTML=n),e.placeholder!==void 0&&(o.placeholder=e.placeholder),e.toolbar!==void 0&&(o.toolbar=e.toolbar),e.theme!==void 0&&(o.theme=e.theme),e.locale!==void 0&&(o.locale=e.locale),e.htmlStyles!==void 0&&(o.htmlStyles=e.htmlStyles),e.onImageUpload!==void 0&&(o.onImageUpload=e.onImageUpload),e.imageUploadUrl!==void 0&&(o.imageUploadUrl=e.imageUploadUrl),e.onFileUpload!==void 0&&(o.onFileUpload=e.onFileUpload),e.fileUploadUrl!==void 0&&(o.fileUploadUrl=e.fileUploadUrl),o}function w(a,e){return a===e?!0:a===!1||e===!1||a===void 0||e===void 0||a.sticky!==e.sticky||a.items.length!==e.items.length?!1:a.items.every((t,o)=>t===e.items[o])}function M(a,e){let t=e,o="",n=!1,d=!1;const m=l=>{var s;o=l,!n&&((s=t.onChange)==null||s.call(t,l))};let i,c=null,r;const S=l=>{l.onImageUpload===void 0?delete r.onImageUpload:r.onImageUpload=l.onImageUpload,l.imageUploadUrl===void 0?delete r.imageUploadUrl:r.imageUploadUrl=l.imageUploadUrl,l.onFileUpload===void 0?delete r.onFileUpload:r.onFileUpload=l.onFileUpload,l.fileUploadUrl===void 0?delete r.fileUploadUrl:r.fileUploadUrl=l.fileUploadUrl,l.htmlStyles===void 0?delete r.htmlStyles:r.htmlStyles=l.htmlStyles},u=(l,s)=>{var y;const h=s!==void 0?{...l,value:s}:l;r=T(a,h,m),i=new f.AerizEditor(r),o=i.getHTML(),c=i.onStateChange(k=>{var g;return(g=t.onStateChange)==null?void 0:g.call(t,k)}),(y=t.onReady)==null||y.call(t,i)},U=()=>{var l;(l=t.onDestroy)==null||l.call(t,i),c==null||c(),c=null,i.destroy()};return u(t),{get editor(){return i},update(l){if(d)return;const s=t;if(t=l,l.locale!==s.locale||!w(l.toolbar,s.toolbar)){const h=l.value??i.getHTML();U(),u(l,h);return}if(S(l),l.theme!==s.theme&&l.theme!==void 0&&i.setTheme(l.theme),l.placeholder!==s.placeholder&&(l.placeholder===void 0?delete i.content.dataset.placeholder:i.content.dataset.placeholder=l.placeholder),l.value!==void 0&&l.value!==o&&l.value!==i.getHTML()){n=!0;try{i.setHTML(l.value)}finally{n=!1}o=l.value}},destroy(){d||(d=!0,U())}}}function L(a,e){const t={element:a},o=e.blocks??(e.html!==void 0?v(e.html):void 0);return o!==void 0&&(t.initialBlocks=o),e.theme!==void 0&&(t.theme=e.theme),e.htmlStyles!==void 0&&(t.htmlStyles=e.htmlStyles),t}function C(a,e){var m;let t=e,o=!1;const n=L(a,e),d=new f.AerizViewer(n);return(m=t.onReady)==null||m.call(t,d),{viewer:d,update(i){if(o)return;const c=t;t=i,i.theme!==c.theme&&i.theme!==void 0&&d.setTheme(i.theme),i.htmlStyles===void 0?delete n.htmlStyles:n.htmlStyles=i.htmlStyles,i.blocks!==void 0?i.blocks!==c.blocks&&d.setBlocks(i.blocks):i.html!==void 0&&i.html!==c.html&&i.html!==d.getHTML()&&d.setBlocks(v(i.html))},destroy(){var i;o||(o=!0,(i=t.onDestroy)==null||i.call(t,d),d.destroy())}}}exports.createEditorController=M;exports.createViewerController=C;exports.htmlToBlocks=v;

package/dist/adapters/shared.js

@@ -0,0 +1,87 @@
+import { AerizViewer as k, AerizEditor as T, normalizeContent as L, BlockIdRegistry as M, assignMissingIds as w, serializeBlocks as H, listBlocks as I } from "@aeriz/wysiwyg";
+function y(a) {
+  const e = document.createElement("div");
+  e.innerHTML = a, L(e, { writableTail: !1 });
+  const t = new M();
+  return w(e, t), H(I(e, (o) => t.ensure(o)));
+}
+function B(a, e, t) {
+  const o = { element: a, onChange: t }, n = e.value ?? e.initialHTML;
+  return n !== void 0 && (o.initialHTML = n), e.placeholder !== void 0 && (o.placeholder = e.placeholder), e.toolbar !== void 0 && (o.toolbar = e.toolbar), e.theme !== void 0 && (o.theme = e.theme), e.locale !== void 0 && (o.locale = e.locale), e.htmlStyles !== void 0 && (o.htmlStyles = e.htmlStyles), e.onImageUpload !== void 0 && (o.onImageUpload = e.onImageUpload), e.imageUploadUrl !== void 0 && (o.imageUploadUrl = e.imageUploadUrl), e.onFileUpload !== void 0 && (o.onFileUpload = e.onFileUpload), e.fileUploadUrl !== void 0 && (o.fileUploadUrl = e.fileUploadUrl), o;
+}
+function C(a, e) {
+  return a === e ? !0 : a === !1 || e === !1 || a === void 0 || e === void 0 || a.sticky !== e.sticky || a.items.length !== e.items.length ? !1 : a.items.every((t, o) => t === e.items[o]);
+}
+function z(a, e) {
+  let t = e, o = "", n = !1, d = !1;
+  const c = (l) => {
+    var s;
+    o = l, !n && ((s = t.onChange) == null || s.call(t, l));
+  };
+  let i, f = null, r;
+  const g = (l) => {
+    l.onImageUpload === void 0 ? delete r.onImageUpload : r.onImageUpload = l.onImageUpload, l.imageUploadUrl === void 0 ? delete r.imageUploadUrl : r.imageUploadUrl = l.imageUploadUrl, l.onFileUpload === void 0 ? delete r.onFileUpload : r.onFileUpload = l.onFileUpload, l.fileUploadUrl === void 0 ? delete r.fileUploadUrl : r.fileUploadUrl = l.fileUploadUrl, l.htmlStyles === void 0 ? delete r.htmlStyles : r.htmlStyles = l.htmlStyles;
+  }, h = (l, s) => {
+    var U;
+    const m = s !== void 0 ? { ...l, value: s } : l;
+    r = B(a, m, c), i = new T(r), o = i.getHTML(), f = i.onStateChange((S) => {
+      var u;
+      return (u = t.onStateChange) == null ? void 0 : u.call(t, S);
+    }), (U = t.onReady) == null || U.call(t, i);
+  }, v = () => {
+    var l;
+    (l = t.onDestroy) == null || l.call(t, i), f == null || f(), f = null, i.destroy();
+  };
+  return h(t), {
+    get editor() {
+      return i;
+    },
+    update(l) {
+      if (d) return;
+      const s = t;
+      if (t = l, l.locale !== s.locale || !C(l.toolbar, s.toolbar)) {
+        const m = l.value ?? i.getHTML();
+        v(), h(l, m);
+        return;
+      }
+      if (g(l), l.theme !== s.theme && l.theme !== void 0 && i.setTheme(l.theme), l.placeholder !== s.placeholder && (l.placeholder === void 0 ? delete i.content.dataset.placeholder : i.content.dataset.placeholder = l.placeholder), l.value !== void 0 && l.value !== o && l.value !== i.getHTML()) {
+        n = !0;
+        try {
+          i.setHTML(l.value);
+        } finally {
+          n = !1;
+        }
+        o = l.value;
+      }
+    },
+    destroy() {
+      d || (d = !0, v());
+    }
+  };
+}
+function F(a, e) {
+  const t = { element: a }, o = e.blocks ?? (e.html !== void 0 ? y(e.html) : void 0);
+  return o !== void 0 && (t.initialBlocks = o), e.theme !== void 0 && (t.theme = e.theme), e.htmlStyles !== void 0 && (t.htmlStyles = e.htmlStyles), t;
+}
+function O(a, e) {
+  var c;
+  let t = e, o = !1;
+  const n = F(a, e), d = new k(n);
+  return (c = t.onReady) == null || c.call(t, d), {
+    viewer: d,
+    update(i) {
+      if (o) return;
+      const f = t;
+      t = i, i.theme !== f.theme && i.theme !== void 0 && d.setTheme(i.theme), i.htmlStyles === void 0 ? delete n.htmlStyles : n.htmlStyles = i.htmlStyles, i.blocks !== void 0 ? i.blocks !== f.blocks && d.setBlocks(i.blocks) : i.html !== void 0 && i.html !== f.html && i.html !== d.getHTML() && d.setBlocks(y(i.html));
+    },
+    destroy() {
+      var i;
+      o || (o = !0, (i = t.onDestroy) == null || i.call(t, d), d.destroy());
+    }
+  };
+}
+export {
+  z as createEditorController,
+  O as createViewerController,
+  y as htmlToBlocks
+};

package/dist/adapters/svelte.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./shared.cjs");function a(t,o={}){const e=r.createEditorController(t,o);return{update(i={}){e.update(i)},destroy(){e.destroy()}}}function l(t,o={}){const e=r.createViewerController(t,o);return{update(i={}){e.update(i)},destroy(){e.destroy()}}}exports.createEditorController=r.createEditorController;exports.createViewerController=r.createViewerController;exports.aerizEditor=a;exports.aerizViewer=l;

package/dist/adapters/svelte.js

@@ -0,0 +1,29 @@
+import { createEditorController as n, createViewerController as d } from "./shared.js";
+function a(e, t = {}) {
+  const r = n(e, t);
+  return {
+    update(o = {}) {
+      r.update(o);
+    },
+    destroy() {
+      r.destroy();
+    }
+  };
+}
+function c(e, t = {}) {
+  const r = d(e, t);
+  return {
+    update(o = {}) {
+      r.update(o);
+    },
+    destroy() {
+      r.destroy();
+    }
+  };
+}
+export {
+  a as aerizEditor,
+  c as aerizViewer,
+  n as createEditorController,
+  d as createViewerController
+};

package/dist/adapters/vue.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("vue"),f=require("./shared.cjs"),r=l.defineComponent({name:"AerizEditor",props:{modelValue:{type:String,default:void 0},initialHTML:{type:String,default:void 0},placeholder:{type:String,default:void 0},toolbar:{type:[Object,Boolean],default:void 0},theme:{type:String,default:void 0},locale:{type:String,default:void 0},htmlStyles:{type:String,default:void 0},onImageUpload:{type:Function,default:void 0},imageUploadUrl:{type:String,default:void 0},onFileUpload:{type:Function,default:void 0},fileUploadUrl:{type:String,default:void 0}},emits:{"update:modelValue":e=>typeof e=="string",change:e=>typeof e=="string","state-change":e=>!0,ready:e=>!0},setup(e,{emit:o,expose:u}){const a=l.ref(null);let t=null;const n=()=>{const i={onChange:d=>{o("update:modelValue",d),o("change",d)},onStateChange:d=>o("state-change",d),onReady:d=>o("ready",d)};return e.modelValue!==void 0&&(i.value=e.modelValue),e.initialHTML!==void 0&&(i.initialHTML=e.initialHTML),e.placeholder!==void 0&&(i.placeholder=e.placeholder),e.toolbar!==void 0&&(i.toolbar=e.toolbar),e.theme!==void 0&&(i.theme=e.theme),e.locale!==void 0&&(i.locale=e.locale),e.htmlStyles!==void 0&&(i.htmlStyles=e.htmlStyles),e.onImageUpload!==void 0&&(i.onImageUpload=e.onImageUpload),e.imageUploadUrl!==void 0&&(i.imageUploadUrl=e.imageUploadUrl),e.onFileUpload!==void 0&&(i.onFileUpload=e.onFileUpload),e.fileUploadUrl!==void 0&&(i.fileUploadUrl=e.fileUploadUrl),i};return l.onMounted(()=>{a.value&&(t=f.createEditorController(a.value,n()))}),l.watch(()=>({...e}),()=>t==null?void 0:t.update(n()),{flush:"post"}),l.onBeforeUnmount(()=>{t==null||t.destroy(),t=null}),u({get editor(){return(t==null?void 0:t.editor)??null},getHTML:()=>(t==null?void 0:t.editor.getHTML())??"",setHTML:i=>t==null?void 0:t.editor.setHTML(i),focus:()=>t==null?void 0:t.editor.focus()}),()=>l.h("div",{ref:a})}}),v=l.defineComponent({name:"AerizViewer",props:{blocks:{type:Array,default:void 0},html:{type:String,default:void 0},theme:{type:String,default:void 0},htmlStyles:{type:String,default:void 0}},emits:{ready:e=>!0},setup(e,{emit:o,expose:u}){const a=l.ref(null);let t=null;const n=()=>{const i={onReady:d=>o("ready",d)};return e.blocks!==void 0&&(i.blocks=e.blocks),e.html!==void 0&&(i.html=e.html),e.theme!==void 0&&(i.theme=e.theme),e.htmlStyles!==void 0&&(i.htmlStyles=e.htmlStyles),i};return l.onMounted(()=>{a.value&&(t=f.createViewerController(a.value,n()))}),l.watch(()=>({...e}),()=>t==null?void 0:t.update(n()),{flush:"post"}),l.onBeforeUnmount(()=>{t==null||t.destroy(),t=null}),u({get viewer(){return(t==null?void 0:t.viewer)??null}}),()=>l.h("div",{ref:a})}}),m={install(e){e.component("AerizEditor",r),e.component("AerizViewer",v)}};exports.AerizEditor=r;exports.AerizViewer=v;exports.AerizWysiwygPlugin=m;