@aeriz/wysiwyg 1.0.4 → 2.0.0

package/dist/adapters/vue2.js

@@ -1,4 +1,4 @@
-import { createEditorController as l, createViewerController as r } from "./shared.js";
+import { createEditorController as l, createViewerController as n } from "./shared.js";
 function o(e, t) {
   e.$watch(
     () => ({ ...e.$props }),
@@ -18,10 +18,14 @@ const a = {
     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 }
+    statusBar: { type: Boolean, default: void 0 },
+    ariaLabel: { type: String, default: void 0 },
+    readOnly: { type: Boolean, default: void 0 },
+    height: { type: [Number, String], default: void 0 },
+    upload: { type: Object, default: void 0 },
+    fonts: { type: Array, default: void 0 },
+    highlighter: { type: Object, default: void 0 },
+    fontSizes: { type: Array, default: void 0 }
   },
   data() {
     return { aerizController: null };
@@ -29,13 +33,16 @@ const a = {
   methods: {
     aerizProps() {
       const e = this.$props, t = {
-        onChange: (i) => {
-          this.$emit("input", i), this.$emit("change", i);
+        onChange: (r) => {
+          this.$emit("input", r), this.$emit("change", r);
         },
-        onStateChange: (i) => this.$emit("state-change", i),
-        onReady: (i) => this.$emit("ready", i)
+        onStateChange: (r) => this.$emit("state-change", r),
+        onReady: (r) => this.$emit("ready", r),
+        onError: (r, i) => this.$emit("error", r, 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;
+      for (const [r, i] of Object.entries(e))
+        i !== void 0 && (t[r] = i);
+      return t;
     },
     /** 코어 인스턴스. `this.$refs.editor.getEditor()` 로 접근한다. */
     getEditor() {
@@ -68,7 +75,7 @@ const a = {
   render(e) {
     return e("div");
   }
-}, d = {
+}, s = {
   name: "AerizViewer",
   props: {
     blocks: { type: Array, default: void 0 },
@@ -83,7 +90,7 @@ const a = {
   methods: {
     aerizProps() {
       const e = this.$props, t = {
-        onReady: (i) => this.$emit("ready", i)
+        onReady: (r) => this.$emit("ready", r)
       };
       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;
     },
@@ -93,7 +100,7 @@ const a = {
     }
   },
   mounted() {
-    this.aerizController = r(this.$el, this.aerizProps()), o(this, () => {
+    this.aerizController = n(this.$el, this.aerizProps()), o(this, () => {
       var e;
       return (e = this.aerizController) == null ? void 0 : e.update(this.aerizProps());
     });
@@ -105,13 +112,13 @@ const a = {
   render(e) {
     return e("div");
   }
-}, s = {
+}, h = {
   install(e) {
-    e.component("AerizEditor", a), e.component("AerizViewer", d);
+    e.component("AerizEditor", a), e.component("AerizViewer", s);
   }
 };
 export {
   a as AerizEditor,
-  d as AerizViewer,
-  s as AerizWysiwygPlugin
+  s as AerizViewer,
+  h as AerizWysiwygPlugin
 };

package/dist/adapters/wc.cjs

@@ -1 +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;
+"use strict";var V=Object.defineProperty;var y=(e,i,t)=>i in e?V(e,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[i]=t;var s=(e,i,t)=>y(e,typeof i!="symbol"?i+"":i,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("./shared.cjs"),E=["light","dark"],A=["en","ko","ja","zh"];function g(e){return e!==null&&E.includes(e)?e:void 0}function k(e){return e!==null&&A.includes(e)?e:void 0}function z(e){if(e===null)return;const i=e.trim();if(i==="")return;if(i==="false"||i==="none")return!1;if(i.startsWith("{")){try{const l=JSON.parse(i);if(l&&typeof l=="object"&&Array.isArray(l.items))return l}catch{}return}const t=i.split(/[\s,]+/).filter(l=>l.length>0);return t.length>0?{items:t}:void 0}function C(e){const i=e.attachInternals;if(typeof i!="function")return null;try{const t=i.call(e);return typeof t=="object"&&t!==null&&typeof t.setFormValue=="function"?t:null}catch{return null}}class a extends HTMLElement{constructor(){super();s(this,"uploadValue");s(this,"fontsValue");s(this,"highlighterValue");s(this,"fontSizesValue");s(this,"controller",null);s(this,"internals",null);s(this,"pendingValue");s(this,"currentHTML","");this.internals=C(this)}static get observedAttributes(){return["value","placeholder","theme","locale","toolbar","html-styles","read-only","height","status-bar","upload-url","aria-label"]}get upload(){return this.uploadValue}set upload(t){this.uploadValue=t,this.applyProps()}get highlighter(){return this.highlighterValue}set highlighter(t){this.highlighterValue=t,this.applyProps()}get fonts(){return this.fontsValue}set fonts(t){this.fontsValue=t,this.applyProps()}get fontSizes(){return this.fontSizesValue}set fontSizes(t){this.fontSizesValue=t,this.applyProps()}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.getBlocks())??[]}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=f.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,l,r){t==="value"&&(this.pendingValue=r??""),this.applyProps()}applyProps(){this.controller&&(this.controller.update(this.buildProps()),this.pendingValue=void 0)}buildProps(){const t={onChange:n=>{this.pendingValue=void 0,this.syncFormValue(n),this.dispatchEvent(new CustomEvent("input",{detail:{html:n},bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{html:n},bubbles:!0}))},onError:(n,v)=>{this.dispatchEvent(new CustomEvent("error",{detail:{error:n,code:v.code},bubbles:!0}))}};this.pendingValue!==void 0&&(t.value=this.pendingValue);const l=this.getAttribute("placeholder");l!==null&&(t.placeholder=l);const r=g(this.getAttribute("theme"));r!==void 0&&(t.theme=r);const h=k(this.getAttribute("locale"));h!==void 0&&(t.locale=h);const c=z(this.getAttribute("toolbar"));c!==void 0&&(t.toolbar=c);const u=this.getAttribute("html-styles");(u==="class"||u==="inline")&&(t.htmlStyles=u),this.hasAttribute("read-only")&&(t.readOnly=!0),this.getAttribute("status-bar")==="false"&&(t.statusBar=!1);const o=this.getAttribute("height");o&&(t.height=/^\d+$/.test(o)?Number(o):o);const d=this.getAttribute("aria-label");d&&(t.ariaLabel=d);const p=this.getAttribute("upload-url");return this.uploadValue?t.upload=this.uploadValue:p&&(t.upload={url:p}),this.fontsValue&&(t.fonts=this.fontsValue),this.highlighterValue&&(t.highlighter=this.highlighterValue),this.fontSizesValue&&(t.fontSizes=this.fontSizesValue),t}syncFormValue(t){var l;this.currentHTML=t,(l=this.internals)==null||l.setFormValue(t)}}s(a,"formAssociated",!0);class b extends HTMLElement{constructor(){super(...arguments);s(this,"controller",null);s(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 l;this.pendingBlocks=t,(l=this.controller)==null||l.update(this.buildProps())}get viewer(){var t;return((t=this.controller)==null?void 0:t.viewer)??null}connectedCallback(){this.controller||(this.controller=f.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 l=this.getAttribute("html");l!==null&&(t.html=l);const r=g(this.getAttribute("theme"));return r!==void 0&&(t.theme=r),t}}function m(e="aeriz"){if(typeof customElements>"u")return;const i=`${e}-editor`,t=`${e}-viewer`;customElements.get(i)||customElements.define(i,a),customElements.get(t)||customElements.define(t,b)}m();exports.AerizEditorElement=a;exports.AerizViewerElement=b;exports.defineAerizElements=m;

package/dist/adapters/wc.js

@@ -1,49 +1,51 @@
-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) {
+var b = Object.defineProperty;
+var m = (e, i, t) => i in e ? b(e, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[i] = t;
+var s = (e, i, t) => m(e, typeof i != "symbol" ? i + "" : i, t);
+import { createEditorController as v, createViewerController as V } from "./shared.js";
+const y = ["light", "dark"], E = ["en", "ko", "ja", "zh"];
+function p(e) {
   return e !== null && y.includes(e) ? e : void 0;
 }
+function A(e) {
+  return e !== null && E.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("{")) {
+  const i = e.trim();
+  if (i === "") return;
+  if (i === "false" || i === "none") return !1;
+  if (i.startsWith("{")) {
     try {
-      const i = JSON.parse(l);
-      if (i && typeof i == "object" && Array.isArray(i.items))
-        return i;
+      const l = JSON.parse(i);
+      if (l && typeof l == "object" && Array.isArray(l.items))
+        return l;
     } catch {
     }
     return;
   }
-  const t = l.split(/[\s,]+/).filter((i) => i.length > 0);
+  const t = i.split(/[\s,]+/).filter((l) => l.length > 0);
   return t.length > 0 ? { items: t } : void 0;
 }
-function A(e) {
-  const l = e.attachInternals;
-  if (typeof l != "function") return null;
+function C(e) {
+  const i = e.attachInternals;
+  if (typeof i != "function") return null;
   try {
-    const t = l.call(e);
+    const t = i.call(e);
     return typeof t == "object" && t !== null && typeof t.setFormValue == "function" ? t : null;
   } catch {
     return null;
   }
 }
-class p extends HTMLElement {
+class f extends HTMLElement {
   constructor() {
     super();
-    /** 프로퍼티로 설정된 업로드 핸들러. 속성으로는 표현할 수 없다. */
-    r(this, "onImageUpload");
-    r(this, "onFileUpload");
-    r(this, "controller", null);
-    r(this, "internals", null);
+    // 속성(문자열) 으로 나타낼 수 없는 옵션은 프로퍼티로 준다. 바꾸면 바로 반영된다.
+    s(this, "uploadValue");
+    s(this, "fontsValue");
+    s(this, "highlighterValue");
+    s(this, "fontSizesValue");
+    s(this, "controller", null);
+    s(this, "internals", null);
     /**
      * 아직 에디터에 반영되지 않은 **외부에서 지정한** 값.
      *
@@ -51,10 +53,10 @@ class p extends HTMLElement {
      * 바뀔 때마다 낡은 값이 `setHTML()` 로 다시 밀려들어가, 모든 블록 id 가
      * 재발급되고 입력 중이던 캐럿이 문서 맨 앞으로 튄다.
      */
-    r(this, "pendingValue");
+    s(this, "pendingValue");
     /** 에디터가 마지막으로 보고한 본문. 폼 값과 마운트 해제 후 `value` 의 근거. */
-    r(this, "currentHTML", "");
-    this.internals = A(this);
+    s(this, "currentHTML", "");
+    this.internals = C(this);
   }
   static get observedAttributes() {
     return [
@@ -64,10 +66,39 @@ class p extends HTMLElement {
       "locale",
       "toolbar",
       "html-styles",
-      "image-upload-url",
-      "file-upload-url"
+      "read-only",
+      "height",
+      "status-bar",
+      "upload-url",
+      "aria-label"
     ];
   }
+  /** 올리기 설정. `upload-url` 속성보다 우선한다 (헤더 · 직접 올리기가 필요할 때). */
+  get upload() {
+    return this.uploadValue;
+  }
+  set upload(t) {
+    this.uploadValue = t, this.applyProps();
+  }
+  /** 코드 블록 색칠기 (`@aeriz/wysiwyg/highlight` 의 `highlighter`). */
+  get highlighter() {
+    return this.highlighterValue;
+  }
+  set highlighter(t) {
+    this.highlighterValue = t, this.applyProps();
+  }
+  get fonts() {
+    return this.fontsValue;
+  }
+  set fonts(t) {
+    this.fontsValue = t, this.applyProps();
+  }
+  get fontSizes() {
+    return this.fontSizesValue;
+  }
+  set fontSizes(t) {
+    this.fontSizesValue = t, this.applyProps();
+  }
   /** 현재 본문 HTML. 설정하면 본문을 교체한다. */
   get value() {
     return this.controller ? this.controller.editor.getHTML() : this.pendingValue ?? this.currentHTML;
@@ -83,7 +114,7 @@ class p extends HTMLElement {
   /** 블록 상태 스냅샷. */
   getBlocks() {
     var t;
-    return ((t = this.controller) == null ? void 0 : t.editor.serialize()) ?? [];
+    return ((t = this.controller) == null ? void 0 : t.editor.getBlocks()) ?? [];
   }
   /** 본문에 캐럿을 둔다. `HTMLElement.focus()` 를 본문 쪽으로 위임한다. */
   focus() {
@@ -96,7 +127,7 @@ class p extends HTMLElement {
         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(
+      this.controller = v(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
@@ -108,8 +139,8 @@ class p extends HTMLElement {
     var t;
     (t = this.controller) == null || t.destroy(), this.controller = null;
   }
-  attributeChangedCallback(t, i, o) {
-    t === "value" && (this.pendingValue = o ?? ""), this.applyProps();
+  attributeChangedCallback(t, l, r) {
+    t === "value" && (this.pendingValue = r ?? ""), this.applyProps();
   }
   /**
    * 현재 속성·프로퍼티 상태를 컨트롤러에 반영한다.
@@ -120,38 +151,43 @@ class p extends HTMLElement {
   }
   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 }));
+      onChange: (o) => {
+        this.pendingValue = void 0, this.syncFormValue(o), this.dispatchEvent(new CustomEvent("input", { detail: { html: o }, bubbles: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: { html: o }, bubbles: !0 }));
+      },
+      onError: (o, g) => {
+        this.dispatchEvent(new CustomEvent("error", { detail: { error: o, code: g.code }, 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;
+    const l = this.getAttribute("placeholder");
+    l !== null && (t.placeholder = l);
+    const r = p(this.getAttribute("theme"));
+    r !== void 0 && (t.theme = r);
+    const a = A(this.getAttribute("locale"));
+    a !== void 0 && (t.locale = a);
+    const h = k(this.getAttribute("toolbar"));
+    h !== void 0 && (t.toolbar = h);
+    const u = this.getAttribute("html-styles");
+    (u === "class" || u === "inline") && (t.htmlStyles = u), this.hasAttribute("read-only") && (t.readOnly = !0), this.getAttribute("status-bar") === "false" && (t.statusBar = !1);
+    const n = this.getAttribute("height");
+    n && (t.height = /^\d+$/.test(n) ? Number(n) : n);
+    const c = this.getAttribute("aria-label");
+    c && (t.ariaLabel = c);
+    const d = this.getAttribute("upload-url");
+    return this.uploadValue ? t.upload = this.uploadValue : d && (t.upload = { url: d }), this.fontsValue && (t.fonts = this.fontsValue), this.highlighterValue && (t.highlighter = this.highlighterValue), this.fontSizesValue && (t.fontSizes = this.fontSizesValue), t;
   }
   syncFormValue(t) {
-    var i;
-    this.currentHTML = t, (i = this.internals) == null || i.setFormValue(t);
+    var l;
+    this.currentHTML = t, (l = this.internals) == null || l.setFormValue(t);
   }
 }
 /** 폼 연동 대상임을 선언. 미지원 브라우저는 이 필드를 무시한다. */
-r(p, "formAssociated", !0);
-class V extends HTMLElement {
+s(f, "formAssociated", !0);
+class z extends HTMLElement {
   constructor() {
     super(...arguments);
-    r(this, "controller", null);
-    r(this, "pendingBlocks");
+    s(this, "controller", null);
+    s(this, "pendingBlocks");
   }
   static get observedAttributes() {
     return ["html", "theme"];
@@ -162,15 +198,15 @@ class V extends HTMLElement {
     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());
+    var l;
+    this.pendingBlocks = t, (l = this.controller) == null || l.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(
+    this.controller || (this.controller = V(this, this.buildProps()), this.dispatchEvent(
       new CustomEvent("aeriz-ready", {
         detail: { viewer: this.controller.viewer },
         bubbles: !1
@@ -188,20 +224,20 @@ class V extends HTMLElement {
   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;
+    const l = this.getAttribute("html");
+    l !== null && (t.html = l);
+    const r = p(this.getAttribute("theme"));
+    return r !== void 0 && (t.theme = r), t;
   }
 }
-function C(e = "aeriz") {
+function P(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);
+  const i = `${e}-editor`, t = `${e}-viewer`;
+  customElements.get(i) || customElements.define(i, f), customElements.get(t) || customElements.define(t, z);
 }
-C();
+P();
 export {
-  p as AerizEditorElement,
-  V as AerizViewerElement,
-  C as defineAerizElements
+  f as AerizEditorElement,
+  z as AerizViewerElement,
+  P as defineAerizElements
 };

package/dist/aeriz-wysiwyg-adapter.js

@@ -1,28 +1,23 @@
 var AerizWysiwygAdapter = function(exports, wysiwyg) {
   "use strict";
-  function htmlToBlocks(html) {
-    const scratch = document.createElement("div");
-    scratch.innerHTML = html;
-    wysiwyg.normalizeContent(scratch, { writableTail: false });
-    const ids = new wysiwyg.BlockIdRegistry();
-    wysiwyg.assignMissingIds(scratch, ids);
-    return wysiwyg.serializeBlocks(wysiwyg.listBlocks(scratch, (el) => ids.ensure(el)));
-  }
+  const CONTROLLER_PROPS = /* @__PURE__ */ new Set(["value", "onChange", "onStateChange", "onReady", "onDestroy"]);
   function toEditorOptions(element, props, onChange) {
     const options = { element, onChange };
+    for (const [key, value] of Object.entries(props)) {
+      if (value === void 0 || CONTROLLER_PROPS.has(key)) continue;
+      options[key] = value;
+    }
     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;
   }
+  const LIVE_OPTIONS = ["upload", "htmlStyles", "onError"];
+  const REBUILD_OPTIONS = ["locale", "statusBar", "height", "ariaLabel", "fonts", "fontSizes", "highlighter"];
+  function sameValue(a, b) {
+    if (a === b) return true;
+    if (typeof a !== "object" || typeof b !== "object" || !a || !b) return false;
+    return JSON.stringify(a) === JSON.stringify(b);
+  }
   function sameToolbar(a, b) {
     if (a === b) return true;
     if (a === false || b === false || a === void 0 || b === void 0) {
@@ -47,16 +42,11 @@ var AerizWysiwygAdapter = function(exports, wysiwyg) {
     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 live = liveOptions;
+      for (const key of LIVE_OPTIONS) {
+        if (next[key] === void 0) delete live[key];
+        else live[key] = next[key];
+      }
     };
     const create = (from, html) => {
       var _a;
@@ -86,7 +76,7 @@ var AerizWysiwygAdapter = function(exports, wysiwyg) {
         if (disposed) return;
         const prev = props;
         props = next;
-        if (next.locale !== prev.locale || !sameToolbar(next.toolbar, prev.toolbar)) {
+        if (!sameToolbar(next.toolbar, prev.toolbar) || REBUILD_OPTIONS.some((key) => !sameValue(next[key], prev[key]))) {
           const carried = next.value ?? editor.getHTML();
           teardown();
           create(next, carried);
@@ -96,6 +86,9 @@ var AerizWysiwygAdapter = function(exports, wysiwyg) {
         if (next.theme !== prev.theme && next.theme !== void 0) {
           editor.setTheme(next.theme);
         }
+        if (Boolean(next.readOnly) !== Boolean(prev.readOnly)) {
+          editor.setReadOnly(Boolean(next.readOnly));
+        }
         if (next.placeholder !== prev.placeholder) {
           if (next.placeholder === void 0) {
             delete editor.content.dataset.placeholder;
@@ -122,8 +115,8 @@ var AerizWysiwygAdapter = function(exports, wysiwyg) {
   }
   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.blocks !== void 0) options.initialBlocks = props.blocks;
+    else if (props.html !== void 0) options.initialHTML = props.html;
     if (props.theme !== void 0) options.theme = props.theme;
     if (props.htmlStyles !== void 0) options.htmlStyles = props.htmlStyles;
     return options;
@@ -149,7 +142,7 @@ var AerizWysiwygAdapter = function(exports, wysiwyg) {
         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));
+          if (next.html !== viewer.getHTML()) viewer.setHTML(next.html);
         }
       },
       destroy() {
@@ -163,7 +156,6 @@ var AerizWysiwygAdapter = function(exports, wysiwyg) {
   }
   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

@@ -1 +1 @@
-var AerizWysiwygAdapter=function(m,s){"use strict";function v(a){const e=document.createElement("div");e.innerHTML=a,s.normalizeContent(e,{writableTail:!1});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);
+var AerizWysiwygAdapter=function(u,y){"use strict";const S=new Set(["value","onChange","onStateChange","onReady","onDestroy"]);function T(o,i,e){const n={element:o,onChange:e};for(const[r,c]of Object.entries(i))c===void 0||S.has(r)||(n[r]=c);const d=i.value??i.initialHTML;return d!==void 0&&(n.initialHTML=d),n}const L=["upload","htmlStyles","onError"],k=["locale","statusBar","height","ariaLabel","fonts","fontSizes","highlighter"];function C(o,i){return o===i?!0:typeof o!="object"||typeof i!="object"||!o||!i?!1:JSON.stringify(o)===JSON.stringify(i)}function M(o,i){return o===i?!0:o===!1||i===!1||o===void 0||i===void 0||o.sticky!==i.sticky||o.items.length!==i.items.length?!1:o.items.every((e,n)=>e===i.items[n])}function H(o,i){let e=i,n="",d=!1,r=!1;const c=l=>{var a;n=l,!d&&((a=e.onChange)==null||a.call(e,l))};let t,f=null,h;const R=l=>{const a=h;for(const s of L)l[s]===void 0?delete a[s]:a[s]=l[s]},v=(l,a)=>{var g;const s=a!==void 0?{...l,value:a}:l;h=T(o,s,c),t=new y.AerizEditor(h),n=t.getHTML(),f=t.onStateChange(B=>{var O;return(O=e.onStateChange)==null?void 0:O.call(e,B)}),(g=e.onReady)==null||g.call(e,t)},m=()=>{var l;(l=e.onDestroy)==null||l.call(e,t),f==null||f(),f=null,t.destroy()};return v(e),{get editor(){return t},update(l){if(r)return;const a=e;if(e=l,!M(l.toolbar,a.toolbar)||k.some(s=>!C(l[s],a[s]))){const s=l.value??t.getHTML();m(),v(l,s);return}if(R(l),l.theme!==a.theme&&l.theme!==void 0&&t.setTheme(l.theme),!!l.readOnly!=!!a.readOnly&&t.setReadOnly(!!l.readOnly),l.placeholder!==a.placeholder&&(l.placeholder===void 0?delete t.content.dataset.placeholder:t.content.dataset.placeholder=l.placeholder),l.value!==void 0&&l.value!==n&&l.value!==t.getHTML()){d=!0;try{t.setHTML(l.value)}finally{d=!1}n=l.value}},destroy(){r||(r=!0,m())}}}function w(o,i){const e={element:o};return i.blocks!==void 0?e.initialBlocks=i.blocks:i.html!==void 0&&(e.initialHTML=i.html),i.theme!==void 0&&(e.theme=i.theme),i.htmlStyles!==void 0&&(e.htmlStyles=i.htmlStyles),e}function E(o,i){var c;let e=i,n=!1;const d=w(o,i),r=new y.AerizViewer(d);return(c=e.onReady)==null||c.call(e,r),{viewer:r,update(t){if(n)return;const f=e;e=t,t.theme!==f.theme&&t.theme!==void 0&&r.setTheme(t.theme),t.htmlStyles===void 0?delete d.htmlStyles:d.htmlStyles=t.htmlStyles,t.blocks!==void 0?t.blocks!==f.blocks&&r.setBlocks(t.blocks):t.html!==void 0&&t.html!==f.html&&t.html!==r.getHTML()&&r.setHTML(t.html)},destroy(){var t;n||(n=!0,(t=e.onDestroy)==null||t.call(e,r),r.destroy())}}}return u.createEditorController=H,u.createViewerController=E,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"}),u}({},AerizWysiwyg);