@aeriz/wysiwyg 1.0.1 → 1.0.3

package/dist/adapters/vue.js

@@ -0,0 +1,110 @@
+import { defineComponent as u, ref as f, onMounted as m, watch as v, onBeforeUnmount as r, h as y } from "vue";
+import { createEditorController as h, createViewerController as g } from "./shared.js";
+const U = u({
+  name: "AerizEditor",
+  props: {
+    /** `v-model` 바인딩 값 (HTML). */
+    modelValue: { type: String, default: void 0 },
+    /** `v-model` 없이 초기값만 줄 때 사용. */
+    initialHTML: { type: String, default: void 0 },
+    placeholder: { type: String, default: void 0 },
+    /** `false` 면 툴바를 렌더하지 않는다. */
+    toolbar: {
+      type: [Object, Boolean],
+      default: void 0
+    },
+    theme: { type: String, default: void 0 },
+    locale: { type: String, default: void 0 },
+    /** `getHTML()` · `onChange` 출력 전략. 기본 `'inline'`. */
+    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: a, expose: n }) {
+    const d = f(null);
+    let t = null;
+    const o = () => {
+      const i = {
+        onChange: (l) => {
+          a("update:modelValue", l), a("change", l);
+        },
+        onStateChange: (l) => a("state-change", l),
+        onReady: (l) => a("ready", l)
+      };
+      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 m(() => {
+      d.value && (t = h(d.value, o()));
+    }), v(
+      () => ({ ...e }),
+      () => t == null ? void 0 : t.update(o()),
+      { flush: "post" }
+    ), r(() => {
+      t == null || t.destroy(), t = null;
+    }), n({
+      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()
+    }), () => y("div", { ref: d });
+  }
+}), S = u({
+  name: "AerizViewer",
+  props: {
+    /** 표시할 블록 상태. `html` 보다 우선한다. */
+    blocks: {
+      type: Array,
+      default: void 0
+    },
+    /** 블록 대신 HTML 문자열을 넣을 때 사용. */
+    html: { type: String, default: void 0 },
+    theme: { type: String, default: void 0 },
+    /** `getHTML()` 출력 전략. 기본 `'inline'`. */
+    htmlStyles: { type: String, default: void 0 }
+  },
+  emits: {
+    ready: (e) => !0
+  },
+  setup(e, { emit: a, expose: n }) {
+    const d = f(null);
+    let t = null;
+    const o = () => {
+      const i = {
+        onReady: (l) => a("ready", l)
+      };
+      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 m(() => {
+      d.value && (t = g(d.value, o()));
+    }), v(
+      () => ({ ...e }),
+      () => t == null ? void 0 : t.update(o()),
+      { flush: "post" }
+    ), r(() => {
+      t == null || t.destroy(), t = null;
+    }), n({
+      get viewer() {
+        return (t == null ? void 0 : t.viewer) ?? null;
+      }
+    }), () => y("div", { ref: d });
+  }
+}), b = {
+  install(e) {
+    e.component("AerizEditor", U), e.component("AerizViewer", S);
+  }
+};
+export {
+  U as AerizEditor,
+  S as AerizViewer,
+  b as AerizWysiwygPlugin
+};

package/dist/adapters/vue2.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./shared.cjs");function r(e,t){e.$watch(()=>({...e.$props}),t,{deep:!1})}const l={name:"AerizEditor",props:{value:{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}},data(){return{aerizController:null}},methods:{aerizProps(){const e=this.$props,t={onChange:i=>{this.$emit("input",i),this.$emit("change",i)},onStateChange:i=>this.$emit("state-change",i),onReady:i=>this.$emit("ready",i)};return e.value!==void 0&&(t.value=e.value),e.initialHTML!==void 0&&(t.initialHTML=e.initialHTML),e.placeholder!==void 0&&(t.placeholder=e.placeholder),e.toolbar!==void 0&&(t.toolbar=e.toolbar),e.theme!==void 0&&(t.theme=e.theme),e.locale!==void 0&&(t.locale=e.locale),e.htmlStyles!==void 0&&(t.htmlStyles=e.htmlStyles),e.onImageUpload!==void 0&&(t.onImageUpload=e.onImageUpload),e.imageUploadUrl!==void 0&&(t.imageUploadUrl=e.imageUploadUrl),e.onFileUpload!==void 0&&(t.onFileUpload=e.onFileUpload),e.fileUploadUrl!==void 0&&(t.fileUploadUrl=e.fileUploadUrl),t},getEditor(){var e;return((e=this.aerizController)==null?void 0:e.editor)??null},getHTML(){var e;return((e=this.aerizController)==null?void 0:e.editor.getHTML())??""},setHTML(e){var t;(t=this.aerizController)==null||t.editor.setHTML(e)},focus(){var e;(e=this.aerizController)==null||e.editor.focus()}},mounted(){this.aerizController=o.createEditorController(this.$el,this.aerizProps()),r(this,()=>{var e;return(e=this.aerizController)==null?void 0:e.update(this.aerizProps())})},beforeDestroy(){var e;(e=this.aerizController)==null||e.destroy(),this.aerizController=null},render(e){return e("div")}},a={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}},data(){return{aerizController:null}},methods:{aerizProps(){const e=this.$props,t={onReady:i=>this.$emit("ready",i)};return e.blocks!==void 0&&(t.blocks=e.blocks),e.html!==void 0&&(t.html=e.html),e.theme!==void 0&&(t.theme=e.theme),e.htmlStyles!==void 0&&(t.htmlStyles=e.htmlStyles),t},getViewer(){var e;return((e=this.aerizController)==null?void 0:e.viewer)??null}},mounted(){this.aerizController=o.createViewerController(this.$el,this.aerizProps()),r(this,()=>{var e;return(e=this.aerizController)==null?void 0:e.update(this.aerizProps())})},beforeDestroy(){var e;(e=this.aerizController)==null||e.destroy(),this.aerizController=null},render(e){return e("div")}},d={install(e){e.component("AerizEditor",l),e.component("AerizViewer",a)}};exports.AerizEditor=l;exports.AerizViewer=a;exports.AerizWysiwygPlugin=d;

package/dist/adapters/vue2.js

@@ -0,0 +1,117 @@
+import { createEditorController as l, createViewerController as r } from "./shared.js";
+function o(e, t) {
+  e.$watch(
+    () => ({ ...e.$props }),
+    t,
+    { deep: !1 }
+  );
+}
+const a = {
+  name: "AerizEditor",
+  props: {
+    /** `v-model` 바인딩 값 (HTML). */
+    value: { 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 },
+    /** `getHTML()` · `onChange` 출력 전략. 기본 `'inline'`. */
+    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 }
+  },
+  data() {
+    return { aerizController: null };
+  },
+  methods: {
+    aerizProps() {
+      const e = this.$props, t = {
+        onChange: (i) => {
+          this.$emit("input", i), this.$emit("change", i);
+        },
+        onStateChange: (i) => this.$emit("state-change", i),
+        onReady: (i) => this.$emit("ready", i)
+      };
+      return e.value !== void 0 && (t.value = e.value), e.initialHTML !== void 0 && (t.initialHTML = e.initialHTML), e.placeholder !== void 0 && (t.placeholder = e.placeholder), e.toolbar !== void 0 && (t.toolbar = e.toolbar), e.theme !== void 0 && (t.theme = e.theme), e.locale !== void 0 && (t.locale = e.locale), e.htmlStyles !== void 0 && (t.htmlStyles = e.htmlStyles), e.onImageUpload !== void 0 && (t.onImageUpload = e.onImageUpload), e.imageUploadUrl !== void 0 && (t.imageUploadUrl = e.imageUploadUrl), e.onFileUpload !== void 0 && (t.onFileUpload = e.onFileUpload), e.fileUploadUrl !== void 0 && (t.fileUploadUrl = e.fileUploadUrl), t;
+    },
+    /** 코어 인스턴스. `this.$refs.editor.getEditor()` 로 접근한다. */
+    getEditor() {
+      var e;
+      return ((e = this.aerizController) == null ? void 0 : e.editor) ?? null;
+    },
+    getHTML() {
+      var e;
+      return ((e = this.aerizController) == null ? void 0 : e.editor.getHTML()) ?? "";
+    },
+    setHTML(e) {
+      var t;
+      (t = this.aerizController) == null || t.editor.setHTML(e);
+    },
+    focus() {
+      var e;
+      (e = this.aerizController) == null || e.editor.focus();
+    }
+  },
+  mounted() {
+    this.aerizController = l(this.$el, this.aerizProps()), o(this, () => {
+      var e;
+      return (e = this.aerizController) == null ? void 0 : e.update(this.aerizProps());
+    });
+  },
+  beforeDestroy() {
+    var e;
+    (e = this.aerizController) == null || e.destroy(), this.aerizController = null;
+  },
+  render(e) {
+    return e("div");
+  }
+}, d = {
+  name: "AerizViewer",
+  props: {
+    blocks: { type: Array, default: void 0 },
+    html: { type: String, default: void 0 },
+    theme: { type: String, default: void 0 },
+    /** `getHTML()` 출력 전략. 기본 `'inline'`. */
+    htmlStyles: { type: String, default: void 0 }
+  },
+  data() {
+    return { aerizController: null };
+  },
+  methods: {
+    aerizProps() {
+      const e = this.$props, t = {
+        onReady: (i) => this.$emit("ready", i)
+      };
+      return e.blocks !== void 0 && (t.blocks = e.blocks), e.html !== void 0 && (t.html = e.html), e.theme !== void 0 && (t.theme = e.theme), e.htmlStyles !== void 0 && (t.htmlStyles = e.htmlStyles), t;
+    },
+    getViewer() {
+      var e;
+      return ((e = this.aerizController) == null ? void 0 : e.viewer) ?? null;
+    }
+  },
+  mounted() {
+    this.aerizController = r(this.$el, this.aerizProps()), o(this, () => {
+      var e;
+      return (e = this.aerizController) == null ? void 0 : e.update(this.aerizProps());
+    });
+  },
+  beforeDestroy() {
+    var e;
+    (e = this.aerizController) == null || e.destroy(), this.aerizController = null;
+  },
+  render(e) {
+    return e("div");
+  }
+}, s = {
+  install(e) {
+    e.component("AerizEditor", a), e.component("AerizViewer", d);
+  }
+};
+export {
+  a as AerizEditor,
+  d as AerizViewer,
+  s as AerizWysiwygPlugin
+};

package/dist/adapters/wc.cjs

@@ -0,0 +1 @@
+"use strict";var b=Object.defineProperty;var v=(e,l,t)=>l in e?b(e,l,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[l]=t;var r=(e,l,t)=>v(e,typeof l!="symbol"?l+"":l,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./shared.cjs"),y=["light","dark"],E=["en","ko","ja","zh"];function f(e){return e!==null&&y.includes(e)?e:void 0}function A(e){return e!==null&&E.includes(e)?e:void 0}function V(e){if(e===null)return;const l=e.trim();if(l==="")return;if(l==="false"||l==="none")return!1;if(l.startsWith("{")){try{const i=JSON.parse(l);if(i&&typeof i=="object"&&Array.isArray(i.items))return i}catch{}return}const t=l.split(/[\s,]+/).filter(i=>i.length>0);return t.length>0?{items:t}:void 0}function k(e){const l=e.attachInternals;if(typeof l!="function")return null;try{const t=l.call(e);return typeof t=="object"&&t!==null&&typeof t.setFormValue=="function"?t:null}catch{return null}}class a extends HTMLElement{constructor(){super();r(this,"onImageUpload");r(this,"onFileUpload");r(this,"controller",null);r(this,"internals",null);r(this,"pendingValue");r(this,"currentHTML","");this.internals=k(this)}static get observedAttributes(){return["value","placeholder","theme","locale","toolbar","html-styles","image-upload-url","file-upload-url"]}get value(){return this.controller?this.controller.editor.getHTML():this.pendingValue??this.currentHTML}set value(t){this.pendingValue=t,this.applyProps()}get editor(){var t;return((t=this.controller)==null?void 0:t.editor)??null}getBlocks(){var t;return((t=this.controller)==null?void 0:t.editor.serialize())??[]}focus(){var t;(t=this.controller)==null||t.editor.focus()}connectedCallback(){if(!this.controller){if(this.pendingValue===void 0){const t=this.getAttribute("value");t!==null&&(this.pendingValue=t)}this.controller=p.createEditorController(this,this.buildProps()),this.pendingValue=void 0,this.syncFormValue(this.controller.editor.getHTML()),this.dispatchEvent(new CustomEvent("aeriz-ready",{detail:{editor:this.controller.editor},bubbles:!1}))}}disconnectedCallback(){var t;(t=this.controller)==null||t.destroy(),this.controller=null}attributeChangedCallback(t,i,n){t==="value"&&(this.pendingValue=n??""),this.applyProps()}applyProps(){this.controller&&(this.controller.update(this.buildProps()),this.pendingValue=void 0)}buildProps(){const t={onChange:s=>{this.pendingValue=void 0,this.syncFormValue(s),this.dispatchEvent(new CustomEvent("input",{detail:{html:s},bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{html:s},bubbles:!0}))}};this.pendingValue!==void 0&&(t.value=this.pendingValue);const i=this.getAttribute("placeholder");i!==null&&(t.placeholder=i);const n=f(this.getAttribute("theme"));n!==void 0&&(t.theme=n);const u=A(this.getAttribute("locale"));u!==void 0&&(t.locale=u);const c=V(this.getAttribute("toolbar"));c!==void 0&&(t.toolbar=c);const o=this.getAttribute("html-styles");(o==="class"||o==="inline")&&(t.htmlStyles=o);const d=this.getAttribute("image-upload-url");d!==null&&(t.imageUploadUrl=d);const h=this.getAttribute("file-upload-url");return h!==null&&(t.fileUploadUrl=h),this.onImageUpload&&(t.onImageUpload=this.onImageUpload),this.onFileUpload&&(t.onFileUpload=this.onFileUpload),t}syncFormValue(t){var i;this.currentHTML=t,(i=this.internals)==null||i.setFormValue(t)}}r(a,"formAssociated",!0);class g extends HTMLElement{constructor(){super(...arguments);r(this,"controller",null);r(this,"pendingBlocks")}static get observedAttributes(){return["html","theme"]}get blocks(){var t;return((t=this.controller)==null?void 0:t.viewer.getBlocks())??this.pendingBlocks??[]}set blocks(t){var i;this.pendingBlocks=t,(i=this.controller)==null||i.update(this.buildProps())}get viewer(){var t;return((t=this.controller)==null?void 0:t.viewer)??null}connectedCallback(){this.controller||(this.controller=p.createViewerController(this,this.buildProps()),this.dispatchEvent(new CustomEvent("aeriz-ready",{detail:{viewer:this.controller.viewer},bubbles:!1})))}disconnectedCallback(){var t;(t=this.controller)==null||t.destroy(),this.controller=null}attributeChangedCallback(){var t;(t=this.controller)==null||t.update(this.buildProps())}buildProps(){const t={};this.pendingBlocks!==void 0&&(t.blocks=this.pendingBlocks);const i=this.getAttribute("html");i!==null&&(t.html=i);const n=f(this.getAttribute("theme"));return n!==void 0&&(t.theme=n),t}}function m(e="aeriz"){if(typeof customElements>"u")return;const l=`${e}-editor`,t=`${e}-viewer`;customElements.get(l)||customElements.define(l,a),customElements.get(t)||customElements.define(t,g)}m();exports.AerizEditorElement=a;exports.AerizViewerElement=g;exports.defineAerizElements=m;

package/dist/adapters/wc.js

@@ -0,0 +1,207 @@
+var f = Object.defineProperty;
+var g = (e, l, t) => l in e ? f(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t;
+var r = (e, l, t) => g(e, typeof l != "symbol" ? l + "" : l, t);
+import { createEditorController as m, createViewerController as b } from "./shared.js";
+const v = ["light", "dark"], y = ["en", "ko", "ja", "zh"];
+function h(e) {
+  return e !== null && v.includes(e) ? e : void 0;
+}
+function E(e) {
+  return e !== null && y.includes(e) ? e : void 0;
+}
+function k(e) {
+  if (e === null) return;
+  const l = e.trim();
+  if (l === "") return;
+  if (l === "false" || l === "none") return !1;
+  if (l.startsWith("{")) {
+    try {
+      const i = JSON.parse(l);
+      if (i && typeof i == "object" && Array.isArray(i.items))
+        return i;
+    } catch {
+    }
+    return;
+  }
+  const t = l.split(/[\s,]+/).filter((i) => i.length > 0);
+  return t.length > 0 ? { items: t } : void 0;
+}
+function A(e) {
+  const l = e.attachInternals;
+  if (typeof l != "function") return null;
+  try {
+    const t = l.call(e);
+    return typeof t == "object" && t !== null && typeof t.setFormValue == "function" ? t : null;
+  } catch {
+    return null;
+  }
+}
+class p extends HTMLElement {
+  constructor() {
+    super();
+    /** 프로퍼티로 설정된 업로드 핸들러. 속성으로는 표현할 수 없다. */
+    r(this, "onImageUpload");
+    r(this, "onFileUpload");
+    r(this, "controller", null);
+    r(this, "internals", null);
+    /**
+     * 아직 에디터에 반영되지 않은 **외부에서 지정한** 값.
+     *
+     * 반영이 끝나면 즉시 비운다. 이 값이 남아 있으면 관계없는 속성(`theme` 등) 이
+     * 바뀔 때마다 낡은 값이 `setHTML()` 로 다시 밀려들어가, 모든 블록 id 가
+     * 재발급되고 입력 중이던 캐럿이 문서 맨 앞으로 튄다.
+     */
+    r(this, "pendingValue");
+    /** 에디터가 마지막으로 보고한 본문. 폼 값과 마운트 해제 후 `value` 의 근거. */
+    r(this, "currentHTML", "");
+    this.internals = A(this);
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "placeholder",
+      "theme",
+      "locale",
+      "toolbar",
+      "html-styles",
+      "image-upload-url",
+      "file-upload-url"
+    ];
+  }
+  /** 현재 본문 HTML. 설정하면 본문을 교체한다. */
+  get value() {
+    return this.controller ? this.controller.editor.getHTML() : this.pendingValue ?? this.currentHTML;
+  }
+  set value(t) {
+    this.pendingValue = t, this.applyProps();
+  }
+  /** 코어 인스턴스. 마운트 전에는 `null`. */
+  get editor() {
+    var t;
+    return ((t = this.controller) == null ? void 0 : t.editor) ?? null;
+  }
+  /** 블록 상태 스냅샷. */
+  getBlocks() {
+    var t;
+    return ((t = this.controller) == null ? void 0 : t.editor.serialize()) ?? [];
+  }
+  /** 본문에 캐럿을 둔다. `HTMLElement.focus()` 를 본문 쪽으로 위임한다. */
+  focus() {
+    var t;
+    (t = this.controller) == null || t.editor.focus();
+  }
+  connectedCallback() {
+    if (!this.controller) {
+      if (this.pendingValue === void 0) {
+        const t = this.getAttribute("value");
+        t !== null && (this.pendingValue = t);
+      }
+      this.controller = m(this, this.buildProps()), this.pendingValue = void 0, this.syncFormValue(this.controller.editor.getHTML()), this.dispatchEvent(
+        new CustomEvent("aeriz-ready", {
+          detail: { editor: this.controller.editor },
+          bubbles: !1
+        })
+      );
+    }
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.controller) == null || t.destroy(), this.controller = null;
+  }
+  attributeChangedCallback(t, i, o) {
+    t === "value" && (this.pendingValue = o ?? ""), this.applyProps();
+  }
+  /**
+   * 현재 속성·프로퍼티 상태를 컨트롤러에 반영한다.
+   * 반영 직후 pendingValue 를 비워, 다음 갱신에서 같은 값이 되살아나지 않게 한다.
+   */
+  applyProps() {
+    this.controller && (this.controller.update(this.buildProps()), this.pendingValue = void 0);
+  }
+  buildProps() {
+    const t = {
+      onChange: (s) => {
+        this.pendingValue = void 0, this.syncFormValue(s), this.dispatchEvent(new CustomEvent("input", { detail: { html: s }, bubbles: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: { html: s }, bubbles: !0 }));
+      }
+    };
+    this.pendingValue !== void 0 && (t.value = this.pendingValue);
+    const i = this.getAttribute("placeholder");
+    i !== null && (t.placeholder = i);
+    const o = h(this.getAttribute("theme"));
+    o !== void 0 && (t.theme = o);
+    const u = E(this.getAttribute("locale"));
+    u !== void 0 && (t.locale = u);
+    const a = k(this.getAttribute("toolbar"));
+    a !== void 0 && (t.toolbar = a);
+    const n = this.getAttribute("html-styles");
+    (n === "class" || n === "inline") && (t.htmlStyles = n);
+    const c = this.getAttribute("image-upload-url");
+    c !== null && (t.imageUploadUrl = c);
+    const d = this.getAttribute("file-upload-url");
+    return d !== null && (t.fileUploadUrl = d), this.onImageUpload && (t.onImageUpload = this.onImageUpload), this.onFileUpload && (t.onFileUpload = this.onFileUpload), t;
+  }
+  syncFormValue(t) {
+    var i;
+    this.currentHTML = t, (i = this.internals) == null || i.setFormValue(t);
+  }
+}
+/** 폼 연동 대상임을 선언. 미지원 브라우저는 이 필드를 무시한다. */
+r(p, "formAssociated", !0);
+class V extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    r(this, "controller", null);
+    r(this, "pendingBlocks");
+  }
+  static get observedAttributes() {
+    return ["html", "theme"];
+  }
+  /** 블록 상태를 직접 넣는다. `html` 속성보다 우선한다. */
+  get blocks() {
+    var t;
+    return ((t = this.controller) == null ? void 0 : t.viewer.getBlocks()) ?? this.pendingBlocks ?? [];
+  }
+  set blocks(t) {
+    var i;
+    this.pendingBlocks = t, (i = this.controller) == null || i.update(this.buildProps());
+  }
+  get viewer() {
+    var t;
+    return ((t = this.controller) == null ? void 0 : t.viewer) ?? null;
+  }
+  connectedCallback() {
+    this.controller || (this.controller = b(this, this.buildProps()), this.dispatchEvent(
+      new CustomEvent("aeriz-ready", {
+        detail: { viewer: this.controller.viewer },
+        bubbles: !1
+      })
+    ));
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.controller) == null || t.destroy(), this.controller = null;
+  }
+  attributeChangedCallback() {
+    var t;
+    (t = this.controller) == null || t.update(this.buildProps());
+  }
+  buildProps() {
+    const t = {};
+    this.pendingBlocks !== void 0 && (t.blocks = this.pendingBlocks);
+    const i = this.getAttribute("html");
+    i !== null && (t.html = i);
+    const o = h(this.getAttribute("theme"));
+    return o !== void 0 && (t.theme = o), t;
+  }
+}
+function C(e = "aeriz") {
+  if (typeof customElements > "u") return;
+  const l = `${e}-editor`, t = `${e}-viewer`;
+  customElements.get(l) || customElements.define(l, p), customElements.get(t) || customElements.define(t, V);
+}
+C();
+export {
+  p as AerizEditorElement,
+  V as AerizViewerElement,
+  C as defineAerizElements
+};

package/dist/aeriz-wysiwyg-adapter.js

@@ -0,0 +1,169 @@
+var AerizWysiwygAdapter = function(exports, wysiwyg) {
+  "use strict";
+  function htmlToBlocks(html) {
+    const scratch = document.createElement("div");
+    scratch.innerHTML = html;
+    wysiwyg.normalizeContent(scratch);
+    const ids = new wysiwyg.BlockIdRegistry();
+    wysiwyg.assignMissingIds(scratch, ids);
+    return wysiwyg.serializeBlocks(wysiwyg.listBlocks(scratch, (el) => ids.ensure(el)));
+  }
+  function toEditorOptions(element, props, onChange) {
+    const options = { element, onChange };
+    const initial = props.value ?? props.initialHTML;
+    if (initial !== void 0) options.initialHTML = initial;
+    if (props.placeholder !== void 0) options.placeholder = props.placeholder;
+    if (props.toolbar !== void 0) options.toolbar = props.toolbar;
+    if (props.theme !== void 0) options.theme = props.theme;
+    if (props.locale !== void 0) options.locale = props.locale;
+    if (props.htmlStyles !== void 0) options.htmlStyles = props.htmlStyles;
+    if (props.onImageUpload !== void 0) options.onImageUpload = props.onImageUpload;
+    if (props.imageUploadUrl !== void 0) options.imageUploadUrl = props.imageUploadUrl;
+    if (props.onFileUpload !== void 0) options.onFileUpload = props.onFileUpload;
+    if (props.fileUploadUrl !== void 0) options.fileUploadUrl = props.fileUploadUrl;
+    return options;
+  }
+  function sameToolbar(a, b) {
+    if (a === b) return true;
+    if (a === false || b === false || a === void 0 || b === void 0) {
+      return false;
+    }
+    if (a.sticky !== b.sticky) return false;
+    if (a.items.length !== b.items.length) return false;
+    return a.items.every((item, i) => item === b.items[i]);
+  }
+  function createEditorController(host, initialProps) {
+    let props = initialProps;
+    let lastHTML = "";
+    let silent = false;
+    let disposed = false;
+    const emitChange = (html) => {
+      var _a;
+      lastHTML = html;
+      if (silent) return;
+      (_a = props.onChange) == null ? void 0 : _a.call(props, html);
+    };
+    let editor;
+    let unsubscribe = null;
+    let liveOptions;
+    const syncLazyOptions = (next) => {
+      if (next.onImageUpload === void 0) delete liveOptions.onImageUpload;
+      else liveOptions.onImageUpload = next.onImageUpload;
+      if (next.imageUploadUrl === void 0) delete liveOptions.imageUploadUrl;
+      else liveOptions.imageUploadUrl = next.imageUploadUrl;
+      if (next.onFileUpload === void 0) delete liveOptions.onFileUpload;
+      else liveOptions.onFileUpload = next.onFileUpload;
+      if (next.fileUploadUrl === void 0) delete liveOptions.fileUploadUrl;
+      else liveOptions.fileUploadUrl = next.fileUploadUrl;
+      if (next.htmlStyles === void 0) delete liveOptions.htmlStyles;
+      else liveOptions.htmlStyles = next.htmlStyles;
+    };
+    const create = (from, html) => {
+      var _a;
+      const seed = html !== void 0 ? { ...from, value: html } : from;
+      liveOptions = toEditorOptions(host, seed, emitChange);
+      editor = new wysiwyg.AerizEditor(liveOptions);
+      lastHTML = editor.getHTML();
+      unsubscribe = editor.onStateChange((state) => {
+        var _a2;
+        return (_a2 = props.onStateChange) == null ? void 0 : _a2.call(props, state);
+      });
+      (_a = props.onReady) == null ? void 0 : _a.call(props, editor);
+    };
+    const teardown = () => {
+      var _a;
+      (_a = props.onDestroy) == null ? void 0 : _a.call(props, editor);
+      unsubscribe == null ? void 0 : unsubscribe();
+      unsubscribe = null;
+      editor.destroy();
+    };
+    create(props);
+    return {
+      get editor() {
+        return editor;
+      },
+      update(next) {
+        if (disposed) return;
+        const prev = props;
+        props = next;
+        if (next.locale !== prev.locale || !sameToolbar(next.toolbar, prev.toolbar)) {
+          const carried = next.value ?? editor.getHTML();
+          teardown();
+          create(next, carried);
+          return;
+        }
+        syncLazyOptions(next);
+        if (next.theme !== prev.theme && next.theme !== void 0) {
+          editor.setTheme(next.theme);
+        }
+        if (next.placeholder !== prev.placeholder) {
+          if (next.placeholder === void 0) {
+            delete editor.content.dataset.placeholder;
+          } else {
+            editor.content.dataset.placeholder = next.placeholder;
+          }
+        }
+        if (next.value !== void 0 && next.value !== lastHTML && next.value !== editor.getHTML()) {
+          silent = true;
+          try {
+            editor.setHTML(next.value);
+          } finally {
+            silent = false;
+          }
+          lastHTML = next.value;
+        }
+      },
+      destroy() {
+        if (disposed) return;
+        disposed = true;
+        teardown();
+      }
+    };
+  }
+  function toViewerOptions(element, props) {
+    const options = { element };
+    const blocks = props.blocks ?? (props.html !== void 0 ? htmlToBlocks(props.html) : void 0);
+    if (blocks !== void 0) options.initialBlocks = blocks;
+    if (props.theme !== void 0) options.theme = props.theme;
+    if (props.htmlStyles !== void 0) options.htmlStyles = props.htmlStyles;
+    return options;
+  }
+  function createViewerController(host, initialProps) {
+    var _a;
+    let props = initialProps;
+    let disposed = false;
+    const liveOptions = toViewerOptions(host, initialProps);
+    const viewer = new wysiwyg.AerizViewer(liveOptions);
+    (_a = props.onReady) == null ? void 0 : _a.call(props, viewer);
+    return {
+      viewer,
+      update(next) {
+        if (disposed) return;
+        const prev = props;
+        props = next;
+        if (next.theme !== prev.theme && next.theme !== void 0) {
+          viewer.setTheme(next.theme);
+        }
+        if (next.htmlStyles === void 0) delete liveOptions.htmlStyles;
+        else liveOptions.htmlStyles = next.htmlStyles;
+        if (next.blocks !== void 0) {
+          if (next.blocks !== prev.blocks) viewer.setBlocks(next.blocks);
+        } else if (next.html !== void 0 && next.html !== prev.html) {
+          if (next.html !== viewer.getHTML()) viewer.setBlocks(htmlToBlocks(next.html));
+        }
+      },
+      destroy() {
+        var _a2;
+        if (disposed) return;
+        disposed = true;
+        (_a2 = props.onDestroy) == null ? void 0 : _a2.call(props, viewer);
+        viewer.destroy();
+      }
+    };
+  }
+  exports.createEditorController = createEditorController;
+  exports.createViewerController = createViewerController;
+  exports.htmlToBlocks = htmlToBlocks;
+  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+  return exports;
+}({}, AerizWysiwyg);

package/dist/aeriz-wysiwyg-adapter.min.js

@@ -0,0 +1 @@
+var AerizWysiwygAdapter=function(m,s){"use strict";function v(a){const e=document.createElement("div");e.innerHTML=a,s.normalizeContent(e);const t=new s.BlockIdRegistry;return s.assignMissingIds(e,t),s.serializeBlocks(s.listBlocks(e,o=>t.ensure(o)))}function k(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 T(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 h=l=>{var c;o=l,!n&&((c=t.onChange)==null||c.call(t,l))};let i,f=null,r;const H=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,c)=>{var y;const u=c!==void 0?{...l,value:c}:l;r=k(a,u,h),i=new s.AerizEditor(r),o=i.getHTML(),f=i.onStateChange(I=>{var S;return(S=t.onStateChange)==null?void 0:S.call(t,I)}),(y=t.onReady)==null||y.call(t,i)},g=()=>{var l;(l=t.onDestroy)==null||l.call(t,i),f==null||f(),f=null,i.destroy()};return U(t),{get editor(){return i},update(l){if(d)return;const c=t;if(t=l,l.locale!==c.locale||!T(l.toolbar,c.toolbar)){const u=l.value??i.getHTML();g(),U(l,u);return}if(H(l),l.theme!==c.theme&&l.theme!==void 0&&i.setTheme(l.theme),l.placeholder!==c.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,g())}}}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 h;let t=e,o=!1;const n=L(a,e),d=new s.AerizViewer(n);return(h=t.onReady)==null||h.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(v(i.html))},destroy(){var i;o||(o=!0,(i=t.onDestroy)==null||i.call(t,d),d.destroy())}}}return m.createEditorController=M,m.createViewerController=C,m.htmlToBlocks=v,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"}),m}({},AerizWysiwyg);