ninegrid2 6.1315.0 → 6.1317.0

package/dist/bundle.cjs.js

@@ -47627,6 +47627,581 @@ function wrappingInputRule(config) {
     undoable: config.undoable
   });
 }
+
+// src/lib/ResizableNodeView.ts
+var isTouchEvent = (e) => {
+  return "touches" in e;
+};
+var ResizableNodeView = class {
+  /**
+   * Creates a new ResizableNodeView instance.
+   *
+   * The constructor sets up the resize handles, applies initial sizing from
+   * node attributes, and configures all resize behavior options.
+   *
+   * @param options - Configuration options for the resizable node view
+   */
+  constructor(options) {
+    /** Active resize handle directions */
+    this.directions = ["bottom-left", "bottom-right", "top-left", "top-right"];
+    /** Minimum allowed dimensions */
+    this.minSize = {
+      height: 8,
+      width: 8
+    };
+    /** Whether to always preserve aspect ratio */
+    this.preserveAspectRatio = false;
+    /** CSS class names for elements */
+    this.classNames = {
+      container: "",
+      wrapper: "",
+      handle: "",
+      resizing: ""
+    };
+    /** Initial width of the element (for aspect ratio calculation) */
+    this.initialWidth = 0;
+    /** Initial height of the element (for aspect ratio calculation) */
+    this.initialHeight = 0;
+    /** Calculated aspect ratio (width / height) */
+    this.aspectRatio = 1;
+    /** Whether a resize operation is currently active */
+    this.isResizing = false;
+    /** The handle currently being dragged */
+    this.activeHandle = null;
+    /** Starting mouse X position when resize began */
+    this.startX = 0;
+    /** Starting mouse Y position when resize began */
+    this.startY = 0;
+    /** Element width when resize began */
+    this.startWidth = 0;
+    /** Element height when resize began */
+    this.startHeight = 0;
+    /** Whether Shift key is currently pressed (for temporary aspect ratio lock) */
+    this.isShiftKeyPressed = false;
+    /** Last known editable state of the editor */
+    this.lastEditableState = void 0;
+    /** Map of handle elements by direction */
+    this.handleMap = /* @__PURE__ */ new Map();
+    /**
+     * Handles mouse movement during an active resize.
+     *
+     * Calculates the delta from the starting position, computes new dimensions
+     * based on the active handle direction, applies constraints and aspect ratio,
+     * then updates the element's style and calls the onResize callback.
+     *
+     * @param event - The mouse move event
+     */
+    this.handleMouseMove = (event) => {
+      if (!this.isResizing || !this.activeHandle) {
+        return;
+      }
+      const deltaX = event.clientX - this.startX;
+      const deltaY = event.clientY - this.startY;
+      this.handleResize(deltaX, deltaY);
+    };
+    this.handleTouchMove = (event) => {
+      if (!this.isResizing || !this.activeHandle) {
+        return;
+      }
+      const touch = event.touches[0];
+      if (!touch) {
+        return;
+      }
+      const deltaX = touch.clientX - this.startX;
+      const deltaY = touch.clientY - this.startY;
+      this.handleResize(deltaX, deltaY);
+    };
+    /**
+     * Completes the resize operation when the mouse button is released.
+     *
+     * Captures final dimensions, calls the onCommit callback to persist changes,
+     * removes the resizing state and class, and cleans up document-level listeners.
+     */
+    this.handleMouseUp = () => {
+      if (!this.isResizing) {
+        return;
+      }
+      const finalWidth = this.element.offsetWidth;
+      const finalHeight = this.element.offsetHeight;
+      this.onCommit(finalWidth, finalHeight);
+      this.isResizing = false;
+      this.activeHandle = null;
+      this.container.dataset.resizeState = "false";
+      if (this.classNames.resizing) {
+        this.container.classList.remove(this.classNames.resizing);
+      }
+      document.removeEventListener("mousemove", this.handleMouseMove);
+      document.removeEventListener("mouseup", this.handleMouseUp);
+      document.removeEventListener("keydown", this.handleKeyDown);
+      document.removeEventListener("keyup", this.handleKeyUp);
+    };
+    /**
+     * Tracks Shift key state to enable temporary aspect ratio locking.
+     *
+     * When Shift is pressed during resize, aspect ratio is preserved even if
+     * preserveAspectRatio is false.
+     *
+     * @param event - The keyboard event
+     */
+    this.handleKeyDown = (event) => {
+      if (event.key === "Shift") {
+        this.isShiftKeyPressed = true;
+      }
+    };
+    /**
+     * Tracks Shift key release to disable temporary aspect ratio locking.
+     *
+     * @param event - The keyboard event
+     */
+    this.handleKeyUp = (event) => {
+      if (event.key === "Shift") {
+        this.isShiftKeyPressed = false;
+      }
+    };
+    var _a, _b, _c, _d, _e, _f;
+    this.node = options.node;
+    this.editor = options.editor;
+    this.element = options.element;
+    this.contentElement = options.contentElement;
+    this.getPos = options.getPos;
+    this.onResize = options.onResize;
+    this.onCommit = options.onCommit;
+    this.onUpdate = options.onUpdate;
+    if ((_a = options.options) == null ? void 0 : _a.min) {
+      this.minSize = {
+        ...this.minSize,
+        ...options.options.min
+      };
+    }
+    if ((_b = options.options) == null ? void 0 : _b.max) {
+      this.maxSize = options.options.max;
+    }
+    if ((_c = options == null ? void 0 : options.options) == null ? void 0 : _c.directions) {
+      this.directions = options.options.directions;
+    }
+    if ((_d = options.options) == null ? void 0 : _d.preserveAspectRatio) {
+      this.preserveAspectRatio = options.options.preserveAspectRatio;
+    }
+    if ((_e = options.options) == null ? void 0 : _e.className) {
+      this.classNames = {
+        container: options.options.className.container || "",
+        wrapper: options.options.className.wrapper || "",
+        handle: options.options.className.handle || "",
+        resizing: options.options.className.resizing || ""
+      };
+    }
+    if ((_f = options.options) == null ? void 0 : _f.createCustomHandle) {
+      this.createCustomHandle = options.options.createCustomHandle;
+    }
+    this.wrapper = this.createWrapper();
+    this.container = this.createContainer();
+    this.applyInitialSize();
+    this.attachHandles();
+    this.editor.on("update", this.handleEditorUpdate.bind(this));
+  }
+  /**
+   * Returns the top-level DOM node that should be placed in the editor.
+   *
+   * This is required by the ProseMirror NodeView interface. The container
+   * includes the wrapper, handles, and the actual content element.
+   *
+   * @returns The container element to be inserted into the editor
+   */
+  get dom() {
+    return this.container;
+  }
+  get contentDOM() {
+    var _a;
+    return (_a = this.contentElement) != null ? _a : null;
+  }
+  handleEditorUpdate() {
+    const isEditable = this.editor.isEditable;
+    if (isEditable === this.lastEditableState) {
+      return;
+    }
+    this.lastEditableState = isEditable;
+    if (!isEditable) {
+      this.removeHandles();
+    } else if (isEditable && this.handleMap.size === 0) {
+      this.attachHandles();
+    }
+  }
+  /**
+   * Called when the node's content or attributes change.
+   *
+   * Updates the internal node reference. If a custom `onUpdate` callback
+   * was provided, it will be called to handle additional update logic.
+   *
+   * @param node - The new/updated node
+   * @param decorations - Node decorations
+   * @param innerDecorations - Inner decorations
+   * @returns `false` if the node type has changed (requires full rebuild), otherwise the result of `onUpdate` or `true`
+   */
+  update(node, decorations, innerDecorations) {
+    if (node.type !== this.node.type) {
+      return false;
+    }
+    this.node = node;
+    if (this.onUpdate) {
+      return this.onUpdate(node, decorations, innerDecorations);
+    }
+    return true;
+  }
+  /**
+   * Cleanup method called when the node view is being removed.
+   *
+   * Removes all event listeners to prevent memory leaks. This is required
+   * by the ProseMirror NodeView interface. If a resize is active when
+   * destroy is called, it will be properly cancelled.
+   */
+  destroy() {
+    if (this.isResizing) {
+      this.container.dataset.resizeState = "false";
+      if (this.classNames.resizing) {
+        this.container.classList.remove(this.classNames.resizing);
+      }
+      document.removeEventListener("mousemove", this.handleMouseMove);
+      document.removeEventListener("mouseup", this.handleMouseUp);
+      document.removeEventListener("keydown", this.handleKeyDown);
+      document.removeEventListener("keyup", this.handleKeyUp);
+      this.isResizing = false;
+      this.activeHandle = null;
+    }
+    this.editor.off("update", this.handleEditorUpdate.bind(this));
+    this.container.remove();
+  }
+  /**
+   * Creates the outer container element.
+   *
+   * The container is the top-level element returned by the NodeView and
+   * wraps the entire resizable node. It's set up with flexbox to handle
+   * alignment and includes data attributes for styling and identification.
+   *
+   * @returns The container element
+   */
+  createContainer() {
+    const element = document.createElement("div");
+    element.dataset.resizeContainer = "";
+    element.dataset.node = this.node.type.name;
+    element.style.display = "flex";
+    if (this.classNames.container) {
+      element.className = this.classNames.container;
+    }
+    element.appendChild(this.wrapper);
+    return element;
+  }
+  /**
+   * Creates the wrapper element that contains the content and handles.
+   *
+   * The wrapper uses relative positioning so that resize handles can be
+   * positioned absolutely within it. This is the direct parent of the
+   * content element being made resizable.
+   *
+   * @returns The wrapper element
+   */
+  createWrapper() {
+    const element = document.createElement("div");
+    element.style.position = "relative";
+    element.style.display = "block";
+    element.dataset.resizeWrapper = "";
+    if (this.classNames.wrapper) {
+      element.className = this.classNames.wrapper;
+    }
+    element.appendChild(this.element);
+    return element;
+  }
+  /**
+   * Creates a resize handle element for a specific direction.
+   *
+   * Each handle is absolutely positioned and includes a data attribute
+   * identifying its direction for styling purposes.
+   *
+   * @param direction - The resize direction for this handle
+   * @returns The handle element
+   */
+  createHandle(direction) {
+    const handle = document.createElement("div");
+    handle.dataset.resizeHandle = direction;
+    handle.style.position = "absolute";
+    if (this.classNames.handle) {
+      handle.className = this.classNames.handle;
+    }
+    return handle;
+  }
+  /**
+   * Positions a handle element according to its direction.
+   *
+   * Corner handles (e.g., 'top-left') are positioned at the intersection
+   * of two edges. Edge handles (e.g., 'top') span the full width or height.
+   *
+   * @param handle - The handle element to position
+   * @param direction - The direction determining the position
+   */
+  positionHandle(handle, direction) {
+    const isTop = direction.includes("top");
+    const isBottom = direction.includes("bottom");
+    const isLeft = direction.includes("left");
+    const isRight = direction.includes("right");
+    if (isTop) {
+      handle.style.top = "0";
+    }
+    if (isBottom) {
+      handle.style.bottom = "0";
+    }
+    if (isLeft) {
+      handle.style.left = "0";
+    }
+    if (isRight) {
+      handle.style.right = "0";
+    }
+    if (direction === "top" || direction === "bottom") {
+      handle.style.left = "0";
+      handle.style.right = "0";
+    }
+    if (direction === "left" || direction === "right") {
+      handle.style.top = "0";
+      handle.style.bottom = "0";
+    }
+  }
+  /**
+   * Creates and attaches all resize handles to the wrapper.
+   *
+   * Iterates through the configured directions, creates a handle for each,
+   * positions it, attaches the mousedown listener, and appends it to the DOM.
+   */
+  attachHandles() {
+    this.directions.forEach((direction) => {
+      let handle;
+      if (this.createCustomHandle) {
+        handle = this.createCustomHandle(direction);
+      } else {
+        handle = this.createHandle(direction);
+      }
+      if (!(handle instanceof HTMLElement)) {
+        console.warn(
+          `[ResizableNodeView] createCustomHandle("${direction}") did not return an HTMLElement. Falling back to default handle.`
+        );
+        handle = this.createHandle(direction);
+      }
+      if (!this.createCustomHandle) {
+        this.positionHandle(handle, direction);
+      }
+      handle.addEventListener("mousedown", (event) => this.handleResizeStart(event, direction));
+      handle.addEventListener("touchstart", (event) => this.handleResizeStart(event, direction));
+      this.handleMap.set(direction, handle);
+      this.wrapper.appendChild(handle);
+    });
+  }
+  /**
+   * Removes all resize handles from the wrapper.
+   *
+   * Cleans up the handle map and removes each handle element from the DOM.
+   */
+  removeHandles() {
+    this.handleMap.forEach((el) => el.remove());
+    this.handleMap.clear();
+  }
+  /**
+   * Applies initial sizing from node attributes to the element.
+   *
+   * If width/height attributes exist on the node, they're applied to the element.
+   * Otherwise, the element's natural/current dimensions are measured. The aspect
+   * ratio is calculated for later use in aspect-ratio-preserving resizes.
+   */
+  applyInitialSize() {
+    const width = this.node.attrs.width;
+    const height = this.node.attrs.height;
+    if (width) {
+      this.element.style.width = `${width}px`;
+      this.initialWidth = width;
+    } else {
+      this.initialWidth = this.element.offsetWidth;
+    }
+    if (height) {
+      this.element.style.height = `${height}px`;
+      this.initialHeight = height;
+    } else {
+      this.initialHeight = this.element.offsetHeight;
+    }
+    if (this.initialWidth > 0 && this.initialHeight > 0) {
+      this.aspectRatio = this.initialWidth / this.initialHeight;
+    }
+  }
+  /**
+   * Initiates a resize operation when a handle is clicked.
+   *
+   * Captures the starting mouse position and element dimensions, sets up
+   * the resize state, adds the resizing class and state attribute, and
+   * attaches document-level listeners for mouse movement and keyboard input.
+   *
+   * @param event - The mouse down event
+   * @param direction - The direction of the handle being dragged
+   */
+  handleResizeStart(event, direction) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isResizing = true;
+    this.activeHandle = direction;
+    if (isTouchEvent(event)) {
+      this.startX = event.touches[0].clientX;
+      this.startY = event.touches[0].clientY;
+    } else {
+      this.startX = event.clientX;
+      this.startY = event.clientY;
+    }
+    this.startWidth = this.element.offsetWidth;
+    this.startHeight = this.element.offsetHeight;
+    if (this.startWidth > 0 && this.startHeight > 0) {
+      this.aspectRatio = this.startWidth / this.startHeight;
+    }
+    this.getPos();
+    this.container.dataset.resizeState = "true";
+    if (this.classNames.resizing) {
+      this.container.classList.add(this.classNames.resizing);
+    }
+    document.addEventListener("mousemove", this.handleMouseMove);
+    document.addEventListener("touchmove", this.handleTouchMove);
+    document.addEventListener("mouseup", this.handleMouseUp);
+    document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener("keyup", this.handleKeyUp);
+  }
+  handleResize(deltaX, deltaY) {
+    if (!this.activeHandle) {
+      return;
+    }
+    const shouldPreserveAspectRatio = this.preserveAspectRatio || this.isShiftKeyPressed;
+    const { width, height } = this.calculateNewDimensions(this.activeHandle, deltaX, deltaY);
+    const constrained = this.applyConstraints(width, height, shouldPreserveAspectRatio);
+    this.element.style.width = `${constrained.width}px`;
+    this.element.style.height = `${constrained.height}px`;
+    if (this.onResize) {
+      this.onResize(constrained.width, constrained.height);
+    }
+  }
+  /**
+   * Calculates new dimensions based on mouse delta and resize direction.
+   *
+   * Takes the starting dimensions and applies the mouse movement delta
+   * according to the handle direction. For corner handles, both dimensions
+   * are affected. For edge handles, only one dimension changes. If aspect
+   * ratio should be preserved, delegates to applyAspectRatio.
+   *
+   * @param direction - The active resize handle direction
+   * @param deltaX - Horizontal mouse movement since resize start
+   * @param deltaY - Vertical mouse movement since resize start
+   * @returns The calculated width and height
+   */
+  calculateNewDimensions(direction, deltaX, deltaY) {
+    let newWidth = this.startWidth;
+    let newHeight = this.startHeight;
+    const isRight = direction.includes("right");
+    const isLeft = direction.includes("left");
+    const isBottom = direction.includes("bottom");
+    const isTop = direction.includes("top");
+    if (isRight) {
+      newWidth = this.startWidth + deltaX;
+    } else if (isLeft) {
+      newWidth = this.startWidth - deltaX;
+    }
+    if (isBottom) {
+      newHeight = this.startHeight + deltaY;
+    } else if (isTop) {
+      newHeight = this.startHeight - deltaY;
+    }
+    if (direction === "right" || direction === "left") {
+      newWidth = this.startWidth + (isRight ? deltaX : -deltaX);
+    }
+    if (direction === "top" || direction === "bottom") {
+      newHeight = this.startHeight + (isBottom ? deltaY : -deltaY);
+    }
+    const shouldPreserveAspectRatio = this.preserveAspectRatio || this.isShiftKeyPressed;
+    if (shouldPreserveAspectRatio) {
+      return this.applyAspectRatio(newWidth, newHeight, direction);
+    }
+    return { width: newWidth, height: newHeight };
+  }
+  /**
+   * Applies min/max constraints to dimensions.
+   *
+   * When aspect ratio is NOT preserved, constraints are applied independently
+   * to width and height. When aspect ratio IS preserved, constraints are
+   * applied while maintaining the aspect ratio—if one dimension hits a limit,
+   * the other is recalculated proportionally.
+   *
+   * This ensures that aspect ratio is never broken when constrained.
+   *
+   * @param width - The unconstrained width
+   * @param height - The unconstrained height
+   * @param preserveAspectRatio - Whether to maintain aspect ratio while constraining
+   * @returns The constrained dimensions
+   */
+  applyConstraints(width, height, preserveAspectRatio) {
+    var _a, _b, _c, _d;
+    if (!preserveAspectRatio) {
+      let constrainedWidth2 = Math.max(this.minSize.width, width);
+      let constrainedHeight2 = Math.max(this.minSize.height, height);
+      if ((_a = this.maxSize) == null ? void 0 : _a.width) {
+        constrainedWidth2 = Math.min(this.maxSize.width, constrainedWidth2);
+      }
+      if ((_b = this.maxSize) == null ? void 0 : _b.height) {
+        constrainedHeight2 = Math.min(this.maxSize.height, constrainedHeight2);
+      }
+      return { width: constrainedWidth2, height: constrainedHeight2 };
+    }
+    let constrainedWidth = width;
+    let constrainedHeight = height;
+    if (constrainedWidth < this.minSize.width) {
+      constrainedWidth = this.minSize.width;
+      constrainedHeight = constrainedWidth / this.aspectRatio;
+    }
+    if (constrainedHeight < this.minSize.height) {
+      constrainedHeight = this.minSize.height;
+      constrainedWidth = constrainedHeight * this.aspectRatio;
+    }
+    if (((_c = this.maxSize) == null ? void 0 : _c.width) && constrainedWidth > this.maxSize.width) {
+      constrainedWidth = this.maxSize.width;
+      constrainedHeight = constrainedWidth / this.aspectRatio;
+    }
+    if (((_d = this.maxSize) == null ? void 0 : _d.height) && constrainedHeight > this.maxSize.height) {
+      constrainedHeight = this.maxSize.height;
+      constrainedWidth = constrainedHeight * this.aspectRatio;
+    }
+    return { width: constrainedWidth, height: constrainedHeight };
+  }
+  /**
+   * Adjusts dimensions to maintain the original aspect ratio.
+   *
+   * For horizontal handles (left/right), uses width as the primary dimension
+   * and calculates height from it. For vertical handles (top/bottom), uses
+   * height as primary and calculates width. For corner handles, uses width
+   * as the primary dimension.
+   *
+   * @param width - The new width
+   * @param height - The new height
+   * @param direction - The active resize direction
+   * @returns Dimensions adjusted to preserve aspect ratio
+   */
+  applyAspectRatio(width, height, direction) {
+    const isHorizontal = direction === "left" || direction === "right";
+    const isVertical = direction === "top" || direction === "bottom";
+    if (isHorizontal) {
+      return {
+        width,
+        height: width / this.aspectRatio
+      };
+    }
+    if (isVertical) {
+      return {
+        width: height * this.aspectRatio,
+        height
+      };
+    }
+    return {
+      width,
+      height: width / this.aspectRatio
+    };
+  }
+};
 function canInsertNode(state, nodeType) {
   const { selection } = state;
   const { $from } = selection;
@@ -48252,7 +48827,7 @@ var h = (tag, attributes) => {
 };
 
 // src/blockquote.tsx
-var inputRegex$3 = /^\s*>\s$/;
+var inputRegex$5 = /^\s*>\s$/;
 var Blockquote = Node3.create({
   name: "blockquote",
   addOptions() {
@@ -48314,7 +48889,7 @@ ${prefix}
   addInputRules() {
     return [
       wrappingInputRule({
-        find: inputRegex$3,
+        find: inputRegex$5,
         type: this.type
       })
     ];
@@ -48408,8 +48983,8 @@ var Bold = Mark.create({
 });
 
 // src/code.ts
-var inputRegex$2 = /(^|[^`])`([^`]+)`(?!`)$/;
-var pasteRegex$1 = /(^|[^`])`([^`]+)`(?!`)/g;
+var inputRegex$4 = /(^|[^`])`([^`]+)`(?!`)$/;
+var pasteRegex$2 = /(^|[^`])`([^`]+)`(?!`)/g;
 var Code = Mark.create({
   name: "code",
   addOptions() {
@@ -48457,7 +49032,7 @@ var Code = Mark.create({
   addInputRules() {
     return [
       markInputRule({
-        find: inputRegex$2,
+        find: inputRegex$4,
         type: this.type
       })
     ];
@@ -48465,7 +49040,7 @@ var Code = Mark.create({
   addPasteRules() {
     return [
       markPasteRule({
-        find: pasteRegex$1,
+        find: pasteRegex$2,
         type: this.type
       })
     ];
@@ -51960,7 +52535,7 @@ var OrderedList = Node3.create({
     return [inputRule];
   }
 });
-var inputRegex$1 = /^\s*(\[([( |x])?\])\s$/;
+var inputRegex$3 = /^\s*(\[([( |x])?\])\s$/;
 var TaskItem = Node3.create({
   name: "taskItem",
   addOptions() {
@@ -52147,7 +52722,7 @@ var TaskItem = Node3.create({
   addInputRules() {
     return [
       wrappingInputRule({
-        find: inputRegex$1,
+        find: inputRegex$3,
         type: this.type,
         getAttributes: (match) => ({
           checked: match[match.length - 1] === "x"
@@ -52366,8 +52941,8 @@ var Paragraph = Node3.create({
 });
 
 // src/strike.ts
-var inputRegex = /(?:^|\s)(~~(?!\s+~~)((?:[^~]+))~~(?!\s+~~))$/;
-var pasteRegex = /(?:^|\s)(~~(?!\s+~~)((?:[^~]+))~~(?!\s+~~))/g;
+var inputRegex$2 = /(?:^|\s)(~~(?!\s+~~)((?:[^~]+))~~(?!\s+~~))$/;
+var pasteRegex$1 = /(?:^|\s)(~~(?!\s+~~)((?:[^~]+))~~(?!\s+~~))/g;
 var Strike = Mark.create({
   name: "strike",
   addOptions() {
@@ -52424,7 +52999,7 @@ var Strike = Mark.create({
   addInputRules() {
     return [
       markInputRule({
-        find: inputRegex,
+        find: inputRegex$2,
         type: this.type
       })
     ];
@@ -52432,7 +53007,7 @@ var Strike = Mark.create({
   addPasteRules() {
     return [
       markPasteRule({
-        find: pasteRegex,
+        find: pasteRegex$1,
         type: this.type
       })
     ];
@@ -53947,116 +54522,781 @@ var StarterKit = Extension.create({
 // src/index.ts
 var index_default = StarterKit;
 
-//const QUILL_STYLE_URL = "https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css";
-
-class nxEditor extends nxDiv {
-	#editor = null;
-	#quill = null;
-	#container = null;
-
-	constructor() {
-		super();
-	}
-
-	connectedCallback() {
-		if (super.connectedCallback()) {
-			this.#render();
-			this.#initEditor();
-		}
-	}
-
-	#render() {
-		// TipTap은 UI가 없으므로 스타일을 직접 정의해야 합니다.
-		this.shadowRoot.innerHTML = `
-          <style>
-             @import "https://cdn.jsdelivr.net/npm/react-quill-new@latest/dist/quill.snow.css";
-             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxEditor.css";
-             ${ninegrid.getCustomPath(this,"nxEditor.css")}
-             
-             :host { display: block; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
-             .menu-bar { background: #f5f5f5; padding: 8px; border-bottom: 1px solid #ddd; }
-             .menu-bar button { margin-right: 4px; cursor: pointer; border: 1px solid #ccc; background: white; }
-             .menu-bar button.is-active { background: #333; color: white; }
-             
-             /* 에디터 기본 스타일 (중요) */
-             .tiptap { padding: 15px; min-height: 200px; outline: none; }
-             .tiptap p.is-editor-empty:first-child::before {
-                content: attr(data-placeholder); float: left; color: #adb5bd; pointer-events: none; height: 0;
-             }
-          </style>
-          <div class="menu-bar">
-             <button type="button" id="bold-btn"><b>B</b></button>
-             <button type="button" id="italic-btn"><i>I</i></button>
-          </div>
-          <div id="editor-container"></div>
-        `;
-		this.#container = this.shadowRoot.querySelector('#editor-container');
-	}
-
-	#initEditor() {
-		this.#editor = new Editor({
-			element: this.#container,
-			extensions: [
-				index_default, // 기본적인 서식(Bold, Italic, List 등) 포함
-			],
-			content: this.originContents || '<p>내용을 입력하세요...</p>',
-			// Shadow DOM 환경에서 포커스 유실을 방지하는 설정
-			injectCSS: true,
-			onUpdate: ({ editor }) => {
-				// 내용이 바뀔 때마다 외부로 알림 (필요 시)
-				const html = editor.getHTML();
-				this.dispatchEvent(new CustomEvent('change', { detail: html }));
-			}
-		});
-
-		// 메뉴 버튼 이벤트 연결
-		this.shadowRoot.querySelector('#bold-btn').onclick = () =>
-			this.#editor.chain().focus().toggleBold().run();
-		this.shadowRoot.querySelector('#italic-btn').onclick = () =>
-			this.#editor.chain().focus().toggleItalic().run();
-	}
-
-//@import "https://cdn.ckeditor.com/ckeditor5/44.1.0/ckeditor5.css";
-	#init = async () => {
-		const htmlTmpl = document.createElement("template");
-		htmlTmpl.innerHTML = `
-          <style>
-             @import "https://cdn.jsdelivr.net/npm/react-quill-new@latest/dist/quill.snow.css";
-             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxEditor.css";
-             ${ninegrid.getCustomPath(this,"nxEditor.css")}
-          </style>
-          <ReactQuill
-				theme="snow"
-				value="aaaa"
-				//onChange={setContent}
-				modules={{
-					toolbar: [
-						[{ 'header': [1, 2, false] }],
-						['bold', 'italic', 'underline', 'strike'],
-						[{ 'list': 'ordered' }, { 'list': 'bullet' }],
-						['link', 'image'], // 이미지 버튼 포함
-						['clean']
-					],
-				}}
-				//style={{ height: '500px', width: '100%', border: '1px solid #ccc' }}
-			/>
-        `;
-	}
-
-	setData = (value) => {
-		if (this.#editor) {
-			this.#editor.setData(value || "");
-		} else {
-			this.originContents = value;
-		}
-	}
-
-	getData = () => {
-		return this.#editor ? this.#editor.getData() : "";
-	}
-
-	disconnectedCallback() {
-		if (this.#editor) ;
+// src/text-style/index.ts
+var MAX_FIND_CHILD_SPAN_DEPTH = 20;
+var findChildSpans = (element, depth = 0) => {
+  const childSpans = [];
+  if (!element.children.length || depth > MAX_FIND_CHILD_SPAN_DEPTH) {
+    return childSpans;
+  }
+  Array.from(element.children).forEach((child) => {
+    if (child.tagName === "SPAN") {
+      childSpans.push(child);
+    } else if (child.children.length) {
+      childSpans.push(...findChildSpans(child, depth + 1));
+    }
+  });
+  return childSpans;
+};
+var mergeNestedSpanStyles = (element) => {
+  if (!element.children.length) {
+    return;
+  }
+  const childSpans = findChildSpans(element);
+  if (!childSpans) {
+    return;
+  }
+  childSpans.forEach((childSpan) => {
+    var _a, _b;
+    const childStyle = childSpan.getAttribute("style");
+    const closestParentSpanStyleOfChild = (_b = (_a = childSpan.parentElement) == null ? void 0 : _a.closest("span")) == null ? void 0 : _b.getAttribute("style");
+    childSpan.setAttribute("style", `${closestParentSpanStyleOfChild};${childStyle}`);
+  });
+};
+var TextStyle = Mark.create({
+  name: "textStyle",
+  priority: 101,
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      mergeNestedSpanStyles: true
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span",
+        consuming: false,
+        getAttrs: (element) => {
+          const hasStyles = element.hasAttribute("style");
+          if (!hasStyles) {
+            return false;
+          }
+          if (this.options.mergeNestedSpanStyles) {
+            mergeNestedSpanStyles(element);
+          }
+          return {};
+        }
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["span", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  addCommands() {
+    return {
+      toggleTextStyle: (attributes) => ({ commands }) => {
+        return commands.toggleMark(this.name, attributes);
+      },
+      removeEmptyTextStyle: () => ({ tr }) => {
+        const { selection } = tr;
+        tr.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
+          if (node.isTextblock) {
+            return true;
+          }
+          if (!node.marks.filter((mark) => mark.type === this.type).some((mark) => Object.values(mark.attrs).some((value) => !!value))) {
+            tr.removeMark(pos, pos + node.nodeSize, this.type);
+          }
+        });
+        return true;
+      }
+    };
+  }
+});
+var BackgroundColor = Extension.create({
+  name: "backgroundColor",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          backgroundColor: {
+            default: null,
+            parseHTML: (element) => {
+              var _a;
+              const styleAttr = element.getAttribute("style");
+              if (styleAttr) {
+                const decls = styleAttr.split(";").map((s) => s.trim()).filter(Boolean);
+                for (let i = decls.length - 1; i >= 0; i -= 1) {
+                  const parts = decls[i].split(":");
+                  if (parts.length >= 2) {
+                    const prop = parts[0].trim().toLowerCase();
+                    const val = parts.slice(1).join(":").trim();
+                    if (prop === "background-color") {
+                      return val.replace(/['"]+/g, "");
+                    }
+                  }
+                }
+              }
+              return (_a = element.style.backgroundColor) == null ? void 0 : _a.replace(/['"]+/g, "");
+            },
+            renderHTML: (attributes) => {
+              if (!attributes.backgroundColor) {
+                return {};
+              }
+              return {
+                style: `background-color: ${attributes.backgroundColor}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setBackgroundColor: (backgroundColor) => ({ chain }) => {
+        return chain().setMark("textStyle", { backgroundColor }).run();
+      },
+      unsetBackgroundColor: () => ({ chain }) => {
+        return chain().setMark("textStyle", { backgroundColor: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+var Color = Extension.create({
+  name: "color",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          color: {
+            default: null,
+            parseHTML: (element) => {
+              var _a;
+              const styleAttr = element.getAttribute("style");
+              if (styleAttr) {
+                const decls = styleAttr.split(";").map((s) => s.trim()).filter(Boolean);
+                for (let i = decls.length - 1; i >= 0; i -= 1) {
+                  const parts = decls[i].split(":");
+                  if (parts.length >= 2) {
+                    const prop = parts[0].trim().toLowerCase();
+                    const val = parts.slice(1).join(":").trim();
+                    if (prop === "color") {
+                      return val.replace(/['"]+/g, "");
+                    }
+                  }
+                }
+              }
+              return (_a = element.style.color) == null ? void 0 : _a.replace(/['"]+/g, "");
+            },
+            renderHTML: (attributes) => {
+              if (!attributes.color) {
+                return {};
+              }
+              return {
+                style: `color: ${attributes.color}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setColor: (color) => ({ chain }) => {
+        return chain().setMark("textStyle", { color }).run();
+      },
+      unsetColor: () => ({ chain }) => {
+        return chain().setMark("textStyle", { color: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+var FontFamily = Extension.create({
+  name: "fontFamily",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontFamily: {
+            default: null,
+            parseHTML: (element) => element.style.fontFamily,
+            renderHTML: (attributes) => {
+              if (!attributes.fontFamily) {
+                return {};
+              }
+              return {
+                style: `font-family: ${attributes.fontFamily}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontFamily: (fontFamily) => ({ chain }) => {
+        return chain().setMark("textStyle", { fontFamily }).run();
+      },
+      unsetFontFamily: () => ({ chain }) => {
+        return chain().setMark("textStyle", { fontFamily: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+var FontSize = Extension.create({
+  name: "fontSize",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: (element) => element.style.fontSize,
+            renderHTML: (attributes) => {
+              if (!attributes.fontSize) {
+                return {};
+              }
+              return {
+                style: `font-size: ${attributes.fontSize}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontSize: (fontSize) => ({ chain }) => {
+        return chain().setMark("textStyle", { fontSize }).run();
+      },
+      unsetFontSize: () => ({ chain }) => {
+        return chain().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+var LineHeight = Extension.create({
+  name: "lineHeight",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          lineHeight: {
+            default: null,
+            parseHTML: (element) => element.style.lineHeight,
+            renderHTML: (attributes) => {
+              if (!attributes.lineHeight) {
+                return {};
+              }
+              return {
+                style: `line-height: ${attributes.lineHeight}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setLineHeight: (lineHeight) => ({ chain }) => {
+        return chain().setMark("textStyle", { lineHeight }).run();
+      },
+      unsetLineHeight: () => ({ chain }) => {
+        return chain().setMark("textStyle", { lineHeight: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+Extension.create({
+  name: "textStyleKit",
+  addExtensions() {
+    const extensions = [];
+    if (this.options.backgroundColor !== false) {
+      extensions.push(BackgroundColor.configure(this.options.backgroundColor));
+    }
+    if (this.options.color !== false) {
+      extensions.push(Color.configure(this.options.color));
+    }
+    if (this.options.fontFamily !== false) {
+      extensions.push(FontFamily.configure(this.options.fontFamily));
+    }
+    if (this.options.fontSize !== false) {
+      extensions.push(FontSize.configure(this.options.fontSize));
+    }
+    if (this.options.lineHeight !== false) {
+      extensions.push(LineHeight.configure(this.options.lineHeight));
+    }
+    if (this.options.textStyle !== false) {
+      extensions.push(TextStyle.configure(this.options.textStyle));
+    }
+    return extensions;
+  }
+});
+
+// src/highlight.ts
+var inputRegex$1 = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/;
+var pasteRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))/g;
+var Highlight = Mark.create({
+  name: "highlight",
+  addOptions() {
+    return {
+      multicolor: false,
+      HTMLAttributes: {}
+    };
+  },
+  addAttributes() {
+    if (!this.options.multicolor) {
+      return {};
+    }
+    return {
+      color: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-color") || element.style.backgroundColor,
+        renderHTML: (attributes) => {
+          if (!attributes.color) {
+            return {};
+          }
+          return {
+            "data-color": attributes.color,
+            style: `background-color: ${attributes.color}; color: inherit`
+          };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "mark"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["mark", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  renderMarkdown: (node, h) => {
+    return `==${h.renderChildren(node)}==`;
+  },
+  parseMarkdown: (token, h) => {
+    return h.applyMark("highlight", h.parseInline(token.tokens || []));
+  },
+  markdownTokenizer: {
+    name: "highlight",
+    level: "inline",
+    start: (src) => src.indexOf("=="),
+    tokenize(src, _, h) {
+      const rule = /^(==)([^=]+)(==)/;
+      const match = rule.exec(src);
+      if (match) {
+        const innerContent = match[2].trim();
+        const children = h.inlineTokens(innerContent);
+        return {
+          type: "highlight",
+          raw: match[0],
+          text: innerContent,
+          tokens: children
+        };
+      }
+    }
+  },
+  addCommands() {
+    return {
+      setHighlight: (attributes) => ({ commands }) => {
+        return commands.setMark(this.name, attributes);
+      },
+      toggleHighlight: (attributes) => ({ commands }) => {
+        return commands.toggleMark(this.name, attributes);
+      },
+      unsetHighlight: () => ({ commands }) => {
+        return commands.unsetMark(this.name);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Shift-h": () => this.editor.commands.toggleHighlight()
+    };
+  },
+  addInputRules() {
+    return [
+      markInputRule({
+        find: inputRegex$1,
+        type: this.type
+      })
+    ];
+  },
+  addPasteRules() {
+    return [
+      markPasteRule({
+        find: pasteRegex,
+        type: this.type
+      })
+    ];
+  }
+});
+
+// src/text-align.ts
+var TextAlign = Extension.create({
+  name: "textAlign",
+  addOptions() {
+    return {
+      types: [],
+      alignments: ["left", "center", "right", "justify"],
+      defaultAlignment: null
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          textAlign: {
+            default: this.options.defaultAlignment,
+            parseHTML: (element) => {
+              const alignment = element.style.textAlign;
+              return this.options.alignments.includes(alignment) ? alignment : this.options.defaultAlignment;
+            },
+            renderHTML: (attributes) => {
+              if (!attributes.textAlign) {
+                return {};
+              }
+              return { style: `text-align: ${attributes.textAlign}` };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setTextAlign: (alignment) => ({ commands }) => {
+        if (!this.options.alignments.includes(alignment)) {
+          return false;
+        }
+        return this.options.types.map((type) => commands.updateAttributes(type, { textAlign: alignment })).some((response) => response);
+      },
+      unsetTextAlign: () => ({ commands }) => {
+        return this.options.types.map((type) => commands.resetAttributes(type, "textAlign")).some((response) => response);
+      },
+      toggleTextAlign: (alignment) => ({ editor, commands }) => {
+        if (!this.options.alignments.includes(alignment)) {
+          return false;
+        }
+        if (editor.isActive({ textAlign: alignment })) {
+          return commands.unsetTextAlign();
+        }
+        return commands.setTextAlign(alignment);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Shift-l": () => this.editor.commands.setTextAlign("left"),
+      "Mod-Shift-e": () => this.editor.commands.setTextAlign("center"),
+      "Mod-Shift-r": () => this.editor.commands.setTextAlign("right"),
+      "Mod-Shift-j": () => this.editor.commands.setTextAlign("justify")
+    };
+  }
+});
+
+// src/image.ts
+var inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
+var Image = Node3.create({
+  name: "image",
+  addOptions() {
+    return {
+      inline: false,
+      allowBase64: false,
+      HTMLAttributes: {},
+      resize: false
+    };
+  },
+  inline() {
+    return this.options.inline;
+  },
+  group() {
+    return this.options.inline ? "inline" : "block";
+  },
+  draggable: true,
+  addAttributes() {
+    return {
+      src: {
+        default: null
+      },
+      alt: {
+        default: null
+      },
+      title: {
+        default: null
+      },
+      width: {
+        default: null
+      },
+      height: {
+        default: null
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: this.options.allowBase64 ? "img[src]" : 'img[src]:not([src^="data:"])'
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["img", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+  },
+  parseMarkdown: (token, helpers) => {
+    return helpers.createNode("image", {
+      src: token.href,
+      title: token.title,
+      alt: token.text
+    });
+  },
+  renderMarkdown: (node) => {
+    var _a, _b, _c, _d, _e, _f;
+    const src = (_b = (_a = node.attrs) == null ? void 0 : _a.src) != null ? _b : "";
+    const alt = (_d = (_c = node.attrs) == null ? void 0 : _c.alt) != null ? _d : "";
+    const title = (_f = (_e = node.attrs) == null ? void 0 : _e.title) != null ? _f : "";
+    return title ? `![${alt}](${src} "${title}")` : `![${alt}](${src})`;
+  },
+  addNodeView() {
+    if (!this.options.resize || !this.options.resize.enabled || typeof document === "undefined") {
+      return null;
+    }
+    const { directions, minWidth, minHeight, alwaysPreserveAspectRatio } = this.options.resize;
+    return ({ node, getPos, HTMLAttributes, editor }) => {
+      const el = document.createElement("img");
+      Object.entries(HTMLAttributes).forEach(([key, value]) => {
+        if (value != null) {
+          switch (key) {
+            case "width":
+            case "height":
+              break;
+            default:
+              el.setAttribute(key, value);
+              break;
+          }
+        }
+      });
+      el.src = HTMLAttributes.src;
+      const nodeView = new ResizableNodeView({
+        element: el,
+        editor,
+        node,
+        getPos,
+        onResize: (width, height) => {
+          el.style.width = `${width}px`;
+          el.style.height = `${height}px`;
+        },
+        onCommit: (width, height) => {
+          const pos = getPos();
+          if (pos === void 0) {
+            return;
+          }
+          this.editor.chain().setNodeSelection(pos).updateAttributes(this.name, {
+            width,
+            height
+          }).run();
+        },
+        onUpdate: (updatedNode, _decorations, _innerDecorations) => {
+          if (updatedNode.type !== node.type) {
+            return false;
+          }
+          return true;
+        },
+        options: {
+          directions,
+          min: {
+            width: minWidth,
+            height: minHeight
+          },
+          preserveAspectRatio: alwaysPreserveAspectRatio === true
+        }
+      });
+      const dom = nodeView.dom;
+      dom.style.visibility = "hidden";
+      dom.style.pointerEvents = "none";
+      el.onload = () => {
+        dom.style.visibility = "";
+        dom.style.pointerEvents = "";
+      };
+      return nodeView;
+    };
+  },
+  addCommands() {
+    return {
+      setImage: (options) => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: options
+        });
+      }
+    };
+  },
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: (match) => {
+          const [, , alt, src, title] = match;
+          return { src, alt, title };
+        }
+      })
+    ];
+  }
+});
+
+class nxEditor extends nxDiv {
+	#editor = null;
+	#container = null;
+
+	constructor() {
+		super();
+		//this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		if (super.connectedCallback()) {
+			this.#render();
+			this.#initEditor();
+		}
+	}
+
+	#render() {
+		this.shadowRoot.innerHTML = `
+          <style>
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxEditor.css";
+             ${ninegrid.getCustomPath(this,"nxEditor.css")}
+          </style>
+          
+          <div class="menu-bar">
+             <button type="button" data-cmd="bold"><b>B</b></button>
+             <button type="button" data-cmd="italic"><i>I</i></button>
+             <button type="button" data-cmd="underline"><u>U</u></button>
+             <button type="button" data-cmd="strike">S</button>
+             
+             <input type="color" id="color-picker" title="Text Color">
+             <button type="button" data-cmd="highlight">Highlight</button>
+             
+             <button type="button" data-align="left">Left</button>
+             <button type="button" data-align="center">Center</button>
+             <button type="button" data-align="right">Right</button>
+             
+             <button type="button" data-cmd="bulletList">Bullet</button>
+             <button type="button" data-cmd="orderedList">Ordered</button>
+             
+             <button type="button" id="img-btn">Image</button>
+             
+             <button type="button" data-cmd="undo">Undo</button>
+             <button type="button" data-cmd="redo">Redo</button>
+          </div>
+          <div id="editor-container"></div>
+        `;
+		this.#container = this.shadowRoot.querySelector('#editor-container');
+	}
+
+	#initEditor() {
+		this.#editor = new Editor({
+			element: this.#container,
+			extensions: [
+				index_default,
+				Underline,
+				TextStyle,
+				Color,
+				Highlight.configure({ multicolor: true }),
+				TextAlign.configure({ types: ['heading', 'paragraph'] }),
+				Image.configure({ inline: true, allowBase64: true }),
+			],
+			content: this.originContents || '',
+			onUpdate: ({ editor }) => {
+				this.dispatchEvent(new CustomEvent('change', { detail: editor.getHTML() }));
+			}
+		});
+
+		this.#bindEvents();
+	}
+
+	#bindEvents() {
+		const editor = this.#editor;
+
+		// 일반 커맨드 버튼
+		this.shadowRoot.querySelectorAll('[data-cmd]').forEach(btn => {
+			btn.onclick = () => {
+				const cmd = btn.dataset.cmd;
+				if (cmd === 'bold') editor.chain().focus().toggleBold().run();
+				if (cmd === 'italic') editor.chain().focus().toggleItalic().run();
+				if (cmd === 'underline') editor.chain().focus().toggleUnderline().run();
+				if (cmd === 'strike') editor.chain().focus().toggleStrike().run();
+				if (cmd === 'highlight') editor.chain().focus().toggleHighlight().run();
+				if (cmd === 'bulletList') editor.chain().focus().toggleBulletList().run();
+				if (cmd === 'orderedList') editor.chain().focus().toggleOrderedList().run();
+				if (cmd === 'undo') editor.chain().focus().undo().run();
+				if (cmd === 'redo') editor.chain().focus().redo().run();
+			};
+		});
+
+		// 색상 변경
+		this.shadowRoot.querySelector('#color-picker').oninput = (e) => {
+			editor.chain().focus().setColor(e.target.value).run();
+		};
+
+		// 정렬
+		this.shadowRoot.querySelectorAll('[data-align]').forEach(btn => {
+			btn.onclick = () => editor.chain().focus().setTextAlign(btn.dataset.align).run();
+		});
+
+		// 이미지 삽입 (Prompt 방식)
+		this.shadowRoot.querySelector('#img-btn').onclick = () => {
+			const url = window.prompt('Image URL');
+			if (url) editor.chain().focus().setImage({ src: url }).run();
+		};
+	}
+
+	setData = (value) => {
+		if (this.#editor) {
+			this.#editor.commands.setContent(value || "", false);
+		} else {
+			this.originContents = value;
+		}
+	}
+
+	getData = () => {
+		return this.#editor ? this.#editor.getHTML() : "";
+	}
+
+	disconnectedCallback() {
+		if (this.#editor) {
+			this.#editor.destroy();
+			this.#editor = null;
+		}
 	}
 }