@evolution-james/evolution-editor 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,1665 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+const PADDING_OPTIONS = ['0px', '4px', '8px', '12px', '16px', '24px', '32px', '40px', '48px', '64px'];
+const MARGIN_OPTIONS = ['0px', '4px', '8px', '12px', '16px', '24px', '32px', '40px', '48px', '64px'];
+/**
+ * Block type identifiers used throughout the editor.
+ * Each type corresponds to a React block component.
+ */
+const BLOCK_TYPES = {
+  PARAGRAPH: 'paragraph',
+  // Standard text block
+  HEADING: 'heading',
+  // Heading block (h1, h2, h3)
+  LIST: 'list',
+  // Ordered or unordered list
+  IMAGE: 'image',
+  // Image block
+  YOUTUBE: 'youtube',
+  // Embedded YouTube video
+  DIVIDER: 'divider' // Horizontal divider
+};
+
+/**
+ * Supported heading levels for heading blocks.
+ */
+const HEADING_LEVELS = {
+  H1: 1,
+  H2: 2,
+  H3: 3
+};
+
+/**
+ * List style options for list blocks.
+ */
+const LIST_STYLES = {
+  UNORDERED: 'unordered',
+  // Bulleted list
+  ORDERED: 'ordered' // Numbered list
+};
+
+/**
+ * Default style objects for each block type.
+ * These are used as the initial styles for new blocks.
+ */
+const DEFAULT_STYLES = {
+  heading: {
+    1: {
+      fontSize: '32px',
+      marginTop: '0px',
+      marginBottom: '16px',
+      marginLeft: '0px',
+      marginRight: '0px',
+      paddingTop: '0px',
+      paddingBottom: '0px',
+      paddingLeft: '0px',
+      paddingRight: '0px',
+      color: '#000000'
+    },
+    2: {
+      fontSize: '24px',
+      marginTop: '0px',
+      marginBottom: '14px',
+      marginLeft: '0px',
+      marginRight: '0px',
+      paddingTop: '0px',
+      paddingBottom: '0px',
+      paddingLeft: '0px',
+      paddingRight: '0px',
+      color: '#000000'
+    },
+    3: {
+      fontSize: '20px',
+      marginTop: '0px',
+      marginBottom: '12px',
+      marginLeft: '0px',
+      marginRight: '0px',
+      paddingTop: '0px',
+      paddingBottom: '0px',
+      paddingLeft: '0px',
+      paddingRight: '0px',
+      color: '#000000'
+    }
+  },
+  paragraph: {
+    fontSize: '16px',
+    marginTop: '0px',
+    marginBottom: '12px',
+    marginLeft: '0px',
+    marginRight: '0px',
+    paddingTop: '0px',
+    paddingBottom: '0px',
+    paddingLeft: '0px',
+    paddingRight: '0px',
+    color: '#333333'
+  },
+  list: {
+    fontSize: '16px',
+    marginTop: '0px',
+    marginBottom: '12px',
+    marginLeft: '0px',
+    marginRight: '0px',
+    paddingTop: '0px',
+    paddingBottom: '0px',
+    paddingLeft: '40px',
+    paddingRight: '0px',
+    color: '#333333'
+  },
+  image: {
+    marginTop: '16px',
+    marginBottom: '16px',
+    marginLeft: '0px',
+    marginRight: '0px',
+    paddingTop: '0px',
+    paddingBottom: '0px',
+    paddingLeft: '0px',
+    paddingRight: '0px'
+  },
+  youtube: {
+    marginTop: '16px',
+    marginBottom: '16px',
+    marginLeft: '0px',
+    marginRight: '0px',
+    paddingTop: '0px',
+    paddingBottom: '0px',
+    paddingLeft: '0px',
+    paddingRight: '0px'
+  },
+  divider: {
+    marginTop: '24px',
+    marginBottom: '24px',
+    marginLeft: '0px',
+    marginRight: '0px',
+    paddingTop: '0px',
+    paddingBottom: '0px',
+    paddingLeft: '0px',
+    paddingRight: '0px'
+  }
+};
+
+/**
+ * Font size options for the toolbar font size picker.
+ */
+const FONT_SIZE_OPTIONS = ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px', '48px'];
+
+/**
+ * Color options for the toolbar color pickers (text, border, background).
+ */
+const COLOR_OPTIONS = ['#000000', '#333333', '#666666', '#999999', '#CCCCCC', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#FFA500', '#800080', '#008000'];
+
+/**
+ * Generate a unique block ID
+ */
+function generateId() {
+  return `block_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+
+/**
+ * Create an empty paragraph block with instructions
+ */
+function createEmptyBlock() {
+  return createBlock(BLOCK_TYPES.PARAGRAPH, {
+    text: '',
+    htmlTag: 'p',
+    styles: {
+      ...DEFAULT_STYLES.paragraph
+    }
+  });
+}
+
+/**
+ * Create a new block with given type and data
+ */
+function createBlock(type, data) {
+  return {
+    id: generateId(),
+    type,
+    data
+  };
+}
+
+/**
+ * Create a heading block
+ */
+function createHeadingBlock(level = HEADING_LEVELS.H1, text = '') {
+  return createBlock(BLOCK_TYPES.HEADING, {
+    level,
+    text,
+    htmlTag: `h${level}`,
+    styles: {
+      ...DEFAULT_STYLES.heading[level]
+    }
+  });
+}
+
+/**
+ * Create a list block
+ */
+function createListBlock(style = LIST_STYLES.UNORDERED, items = ['']) {
+  return createBlock(BLOCK_TYPES.LIST, {
+    style,
+    items,
+    htmlTag: style === LIST_STYLES.UNORDERED ? 'ul' : 'ol',
+    styles: {
+      ...DEFAULT_STYLES.list
+    }
+  });
+}
+
+/**
+ * Create an image block
+ */
+function createImageBlock(url = '', alt = '') {
+  return createBlock(BLOCK_TYPES.IMAGE, {
+    url,
+    alt,
+    htmlTag: 'img',
+    styles: {
+      ...DEFAULT_STYLES.image
+    }
+  });
+}
+
+/**
+ * Create a YouTube block
+ */
+function createYouTubeBlock(url = '') {
+  const videoId = extractYouTubeId(url);
+  return createBlock(BLOCK_TYPES.YOUTUBE, {
+    url,
+    videoId,
+    htmlTag: 'iframe',
+    styles: {
+      ...DEFAULT_STYLES.youtube
+    }
+  });
+}
+
+/**
+ * Create a divider block
+ */
+function createDividerBlock() {
+  return createBlock(BLOCK_TYPES.DIVIDER, {
+    htmlTag: 'hr',
+    styles: {
+      ...DEFAULT_STYLES.divider
+    }
+  });
+}
+
+/**
+ * Extract YouTube video ID from URL
+ */
+function extractYouTubeId(url) {
+  if (!url) return '';
+  const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+  const match = url.match(regExp);
+  return match && match[7].length === 11 ? match[7] : '';
+}
+
+/**
+ * Update block styles
+ */
+function updateBlockStyles(block, styleUpdates) {
+  return {
+    ...block,
+    data: {
+      ...block.data,
+      styles: {
+        ...block.data.styles,
+        ...styleUpdates
+      }
+    }
+  };
+}
+
+/**
+ * Update block data
+ */
+function updateBlockData(block, dataUpdates) {
+  return {
+    ...block,
+    data: {
+      ...block.data,
+      ...dataUpdates
+    }
+  };
+}
+
+/**
+ * Serialize editor blocks to JSON format
+ */
+function serialize(blocks) {
+  return {
+    version: '1.0.0',
+    time: Date.now(),
+    blocks: blocks.map(block => ({
+      id: block.id,
+      type: block.type,
+      data: block.data
+    }))
+  };
+}
+
+/**
+ * Deserialize JSON to editor blocks
+ */
+function deserialize(json) {
+  // Handle empty or invalid JSON
+  if (!json || !json.blocks || !Array.isArray(json.blocks)) {
+    return [createEmptyBlock()];
+  }
+
+  // Handle empty blocks array
+  if (json.blocks.length === 0) {
+    return [createEmptyBlock()];
+  }
+
+  // Map JSON blocks to editor blocks
+  return json.blocks.map(block => ({
+    id: block.id,
+    type: block.type,
+    data: block.data
+  }));
+}
+
+/**
+ * Main hook for managing editor state
+ */
+function useEditor(initialData) {
+  const [blocks, setBlocks] = useState(() => {
+    if (initialData) {
+      return deserialize(initialData);
+    }
+    return [];
+  });
+  const [focusedBlockId, setFocusedBlockId] = useState(null);
+
+  // Update blocks when initialData changes
+  useEffect(() => {
+    if (initialData) {
+      setBlocks(deserialize(initialData));
+    } else {
+      setBlocks([]);
+    }
+  }, [initialData]);
+
+  /**
+   * Add a new block at the specified index
+   */
+  const addBlock = useCallback((block, index) => {
+    setBlocks(prev => {
+      const newBlocks = [...prev];
+      newBlocks.splice(index, 0, block);
+      return newBlocks;
+    });
+  }, []);
+
+  /**
+   * Update a block by ID
+   */
+  const updateBlock = useCallback((blockId, updates) => {
+    setBlocks(prev => prev.map(block => block.id === blockId ? updateBlockData(block, updates) : block));
+  }, []);
+
+  /**
+   * Update block styles by ID
+   */
+  const updateBlockStyle = useCallback((blockId, styleUpdates) => {
+    setBlocks(prev => prev.map(block => block.id === blockId ? updateBlockStyles(block, styleUpdates) : block));
+  }, []);
+
+  /**
+   * Delete a block by ID
+   */
+  const deleteBlock = useCallback(blockId => {
+    setBlocks(prev => {
+      const filtered = prev.filter(block => block.id !== blockId);
+      return filtered;
+    });
+  }, []);
+
+  /**
+   * Move a block to a new position
+   */
+  const moveBlock = useCallback((fromIndex, toIndex) => {
+    setBlocks(prev => {
+      const newBlocks = [...prev];
+      const [movedBlock] = newBlocks.splice(fromIndex, 1);
+      newBlocks.splice(toIndex, 0, movedBlock);
+      return newBlocks;
+    });
+  }, []);
+
+  /**
+   * Get the current editor data as JSON
+   */
+  const getJSON = useCallback(() => {
+    return serialize(blocks);
+  }, [blocks]);
+
+  /**
+   * Clear all blocks
+   */
+  const clear = useCallback(() => {
+    setBlocks([createEmptyBlock()]);
+  }, []);
+  return {
+    blocks,
+    focusedBlockId,
+    setFocusedBlockId,
+    addBlock,
+    updateBlock,
+    updateBlockStyle,
+    deleteBlock,
+    moveBlock,
+    getJSON,
+    clear
+  };
+}
+
+function ToolbarButton({
+  onClick,
+  children,
+  title,
+  active,
+  disabled
+}) {
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: onClick,
+    title: title,
+    disabled: disabled,
+    className: `toolbar-button ${active ? 'active' : ''}`,
+    type: "button"
+  }, children);
+}
+
+const TEXT_TYPES = ['paragraph', 'heading', 'list'];
+function Toolbar({
+  focusedBlock,
+  onUpdateBlockStyle,
+  onMoveBlockUp,
+  onMoveBlockDown,
+  onSave
+}) {
+  const [showFontSizePicker, setShowFontSizePicker] = useState(false);
+  const [showBgColorPicker, setShowBgColorPicker] = useState(false);
+  const [showPaddingPicker, setShowPaddingPicker] = useState(false);
+  const [showMarginPicker, setShowMarginPicker] = useState(false);
+  const hasFocusedBlock = !!focusedBlock;
+  const isTextBlock = focusedBlock && TEXT_TYPES.includes(focusedBlock.type);
+  const styles = focusedBlock?.data?.styles || {};
+  const handleStyleChange = updates => {
+    if (!hasFocusedBlock) return;
+    onUpdateBlockStyle(updates);
+  };
+  const handleColorChange = color => {
+    handleStyleChange({
+      color
+    });
+  };
+  const handleFontSizeChange = fontSize => {
+    handleStyleChange({
+      fontSize
+    });
+    setShowFontSizePicker(false);
+  };
+  const handleBorderColorChange = borderColor => {
+    handleStyleChange({
+      borderColor,
+      borderStyle: 'solid'
+    });
+  };
+  const handleBgColorChange = backgroundColor => {
+    handleStyleChange({
+      backgroundColor
+    });
+    setShowBgColorPicker(false);
+  };
+  const handleAllPadding = value => {
+    handleStyleChange({
+      paddingTop: value,
+      paddingRight: value,
+      paddingBottom: value,
+      paddingLeft: value
+    });
+  };
+  const handleAllMargin = value => {
+    handleStyleChange({
+      marginTop: value,
+      marginRight: value,
+      marginBottom: value,
+      marginLeft: value
+    });
+  };
+  const parsePx = val => parseInt(val, 10) || 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "toolbar"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-sections"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-section"
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    onClick: onMoveBlockUp,
+    disabled: !hasFocusedBlock,
+    title: "Move Up"
+  }, "\u2191"), /*#__PURE__*/React.createElement(ToolbarButton, {
+    onClick: onMoveBlockDown,
+    disabled: !hasFocusedBlock,
+    title: "Move Down"
+  }, "\u2193")), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-section"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "toolbar-label"
+  }, "Align:"), /*#__PURE__*/React.createElement(ToolbarButton, {
+    onClick: () => handleStyleChange({
+      textAlign: 'left'
+    }),
+    disabled: !isTextBlock,
+    active: isTextBlock && (styles.textAlign || 'left') === 'left',
+    title: "Align Left"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "align-icon align-left"
+  })), /*#__PURE__*/React.createElement(ToolbarButton, {
+    onClick: () => handleStyleChange({
+      textAlign: 'center'
+    }),
+    disabled: !isTextBlock,
+    active: isTextBlock && styles.textAlign === 'center',
+    title: "Align Center"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "align-icon align-center"
+  })), /*#__PURE__*/React.createElement(ToolbarButton, {
+    onClick: () => handleStyleChange({
+      textAlign: 'right'
+    }),
+    disabled: !isTextBlock,
+    active: isTextBlock && styles.textAlign === 'right',
+    title: "Align Right"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "align-icon align-right"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-section"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "toolbar-label"
+  }, "Font Size:"), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-dropdown"
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    onClick: () => setShowFontSizePicker(!showFontSizePicker),
+    disabled: !isTextBlock,
+    title: "Font Size"
+  }, styles.fontSize || '16px'), showFontSizePicker && /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-dropdown-menu font-size-picker"
+  }, FONT_SIZE_OPTIONS.map(size => /*#__PURE__*/React.createElement("button", {
+    key: size,
+    className: "font-size-option",
+    onClick: () => handleFontSizeChange(size)
+  }, size))))), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-section"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "toolbar-label"
+  }, "Text Color:"), /*#__PURE__*/React.createElement("input", {
+    type: "color",
+    className: "toolbar-color-picker",
+    value: styles.color || '#333333',
+    onChange: e => handleColorChange(e.target.value),
+    disabled: !isTextBlock,
+    title: "Text Color"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-section"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "toolbar-label"
+  }, "Padding:"), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-dropdown"
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    onClick: () => setShowPaddingPicker(!showPaddingPicker),
+    disabled: !hasFocusedBlock,
+    title: "Padding (all sides)"
+  }, styles.paddingTop || '0px'), showPaddingPicker && /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-dropdown-menu padding-picker"
+  }, PADDING_OPTIONS.map(option => /*#__PURE__*/React.createElement("button", {
+    key: option,
+    className: "padding-option",
+    onClick: () => {
+      handleAllPadding(option);
+      setShowPaddingPicker(false);
+    }
+  }, option))))), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-section"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "toolbar-label"
+  }, "Margin:"), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-dropdown"
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    onClick: () => setShowMarginPicker(!showMarginPicker),
+    disabled: !hasFocusedBlock,
+    title: "Margin (all sides)"
+  }, styles.marginTop || '0px'), showMarginPicker && /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-dropdown-menu margin-picker"
+  }, MARGIN_OPTIONS.map(option => /*#__PURE__*/React.createElement("button", {
+    key: option,
+    className: "margin-option",
+    onClick: () => {
+      handleAllMargin(option);
+      setShowMarginPicker(false);
+    }
+  }, option))))), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-section"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "toolbar-label"
+  }, "Border Color:"), /*#__PURE__*/React.createElement("input", {
+    type: "color",
+    className: "toolbar-color-picker",
+    value: styles.borderColor || '#cccccc',
+    onChange: e => handleBorderColorChange(e.target.value),
+    disabled: !hasFocusedBlock,
+    title: "Border Color"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-section"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "toolbar-label"
+  }, "Border Width:"), /*#__PURE__*/React.createElement("input", {
+    type: "number",
+    className: "toolbar-input",
+    min: "0",
+    value: parsePx(styles.borderWidth),
+    disabled: !hasFocusedBlock,
+    onChange: e => handleStyleChange({
+      borderWidth: `${e.target.value}px`,
+      borderStyle: 'solid'
+    }),
+    title: "Border Width"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-section"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "toolbar-label"
+  }, "Background Color:"), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-dropdown"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "toolbar-color-swatch",
+    style: {
+      backgroundColor: hasFocusedBlock ? styles.backgroundColor || '#ffffff' : '#cccccc'
+    },
+    onClick: () => hasFocusedBlock && setShowBgColorPicker(!showBgColorPicker),
+    disabled: !hasFocusedBlock,
+    title: "Background Color"
+  }), showBgColorPicker && /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-dropdown-menu color-picker"
+  }, COLOR_OPTIONS.map(color => /*#__PURE__*/React.createElement("button", {
+    key: color,
+    className: "color-option",
+    style: {
+      backgroundColor: color
+    },
+    onClick: () => handleBgColorChange(color),
+    title: color
+  })))))), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-section"
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    onClick: onSave,
+    title: "Save"
+  }, "\uD83D\uDCBE Save")));
+}
+
+function ParagraphBlock({
+  block,
+  onChange,
+  onFocus,
+  onKeyDown,
+  isFocused,
+  editable = true,
+  placeholder
+}) {
+  const editorRef = useRef(null);
+  const isUpdatingRef = useRef(false);
+  useEffect(() => {
+    if (editable && isFocused && editorRef.current) {
+      editorRef.current.focus();
+    }
+  }, [isFocused, editable]);
+  useEffect(() => {
+    // Only update if content changed from outside (not from user typing)
+    if (editorRef.current && !isUpdatingRef.current) {
+      if (editorRef.current.innerHTML !== block.data.text) {
+        editorRef.current.innerHTML = block.data.text || '';
+      }
+    }
+    isUpdatingRef.current = false;
+  }, [block.data.text]);
+  const handleInput = e => {
+    isUpdatingRef.current = true;
+    onChange({
+      text: e.target.innerHTML
+    });
+  };
+  const handleKeyDown = e => {
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+  };
+  if (!editable) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "paragraph-block",
+      style: block.data.styles,
+      dangerouslySetInnerHTML: {
+        __html: block.data.text || ''
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    ref: editorRef,
+    className: "paragraph-block",
+    contentEditable: true,
+    suppressContentEditableWarning: true,
+    onInput: handleInput,
+    onFocus: onFocus,
+    onKeyDown: handleKeyDown,
+    "data-placeholder": placeholder || "Start typing...",
+    style: block.data.styles
+  });
+}
+
+function HeadingBlock({
+  block,
+  onChange,
+  onFocus,
+  onKeyDown,
+  isFocused,
+  editable = true
+}) {
+  const editorRef = useRef(null);
+  const isUpdatingRef = useRef(false);
+  const HeadingTag = block.data.htmlTag || 'h1';
+  useEffect(() => {
+    if (editable && isFocused && editorRef.current) {
+      editorRef.current.focus();
+    }
+  }, [isFocused, editable]);
+  useEffect(() => {
+    if (editorRef.current && !isUpdatingRef.current) {
+      if (editorRef.current.innerHTML !== block.data.text) {
+        editorRef.current.innerHTML = block.data.text || '';
+      }
+    }
+    isUpdatingRef.current = false;
+  }, [block.data.text]);
+  const handleInput = e => {
+    isUpdatingRef.current = true;
+    onChange({
+      text: e.target.innerHTML
+    });
+  };
+  const handleKeyDown = e => {
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+  };
+  if (!editable) {
+    return /*#__PURE__*/React.createElement(HeadingTag, {
+      className: "heading-block",
+      style: block.data.styles,
+      dangerouslySetInnerHTML: {
+        __html: block.data.text || ''
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement(HeadingTag, {
+    ref: editorRef,
+    className: "heading-block",
+    contentEditable: true,
+    suppressContentEditableWarning: true,
+    onInput: handleInput,
+    onFocus: onFocus,
+    onKeyDown: handleKeyDown,
+    "data-placeholder": "Heading",
+    style: block.data.styles
+  });
+}
+
+function ListBlock({
+  block,
+  onChange,
+  onFocus,
+  editable = true
+}) {
+  const [editingIndex, setEditingIndex] = useState(null);
+  // Focus the first item when block is focused/created
+  useEffect(() => {
+    if (!editable) return;
+    if (typeof onFocus === 'function' && editingIndex === null) {
+      // Wait for block to be focused by parent
+      setTimeout(() => {
+        if (listRef.current) {
+          const first = listRef.current.querySelector('.list-item-content[data-idx="0"]');
+          if (first) {
+            first.focus();
+            setEditingIndex(0);
+          }
+        }
+      }, 0);
+    }
+  }, [editable, onFocus, editingIndex]);
+  const ListTag = block.data.htmlTag || 'ul';
+  const listRef = useRef(null);
+  const handleItemChange = (index, value, el) => {
+    // Save caret position
+    let caretOffset = 0;
+    if (el && el.isContentEditable) {
+      const selection = window.getSelection();
+      if (selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        const preCaretRange = range.cloneRange();
+        preCaretRange.selectNodeContents(el);
+        preCaretRange.setEnd(range.endContainer, range.endOffset);
+        caretOffset = preCaretRange.toString().length;
+      }
+    }
+    const newItems = [...block.data.items];
+    newItems[index] = value;
+    onChange({
+      items: newItems
+    });
+    // Restore caret position
+    if (el && el.isContentEditable) {
+      setTimeout(() => {
+        let node = el;
+        let charIndex = 0,
+          found = false,
+          sel = window.getSelection();
+        function setCaret(node) {
+          if (found) return;
+          if (node.nodeType === 3) {
+            // text node
+            const nextCharIndex = charIndex + node.length;
+            if (!found && caretOffset >= charIndex && caretOffset <= nextCharIndex) {
+              const range = document.createRange();
+              range.setStart(node, caretOffset - charIndex);
+              range.collapse(true);
+              sel.removeAllRanges();
+              sel.addRange(range);
+              found = true;
+            }
+            charIndex = nextCharIndex;
+          } else {
+            for (let i = 0; i < node.childNodes.length; i++) {
+              setCaret(node.childNodes[i]);
+              if (found) break;
+            }
+          }
+        }
+        setCaret(node);
+      }, 0);
+    }
+  };
+  const handleItemKeyDown = (e, index) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const newItems = [...block.data.items];
+      newItems.splice(index + 1, 0, '');
+      onChange({
+        items: newItems
+      });
+      setTimeout(() => {
+        setEditingIndex(index + 1);
+        // Focus the next item, scoped to this ListBlock only
+        if (listRef.current) {
+          const next = listRef.current.querySelector(`.list-item-content[data-idx='${index + 1}']`);
+          if (next) {
+            next.focus();
+          }
+        }
+      }, 0);
+    } else if (e.key === 'Backspace' && block.data.items[index] === '') {
+      e.preventDefault();
+      if (block.data.items.length > 1) {
+        const newItems = block.data.items.filter((_, i) => i !== index);
+        onChange({
+          items: newItems
+        });
+        setEditingIndex(index > 0 ? index - 1 : 0);
+      }
+    }
+  };
+  if (!editable) {
+    return /*#__PURE__*/React.createElement(ListTag, {
+      className: "list-block",
+      style: block.data.styles
+    }, block.data.items.map((item, index) => /*#__PURE__*/React.createElement("li", {
+      key: index,
+      className: "list-item"
+    }, /*#__PURE__*/React.createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: item
+      }
+    }))));
+  }
+  return /*#__PURE__*/React.createElement(ListTag, {
+    className: "list-block",
+    style: block.data.styles,
+    onClick: onFocus,
+    ref: listRef
+  }, block.data.items.map((item, index) => /*#__PURE__*/React.createElement("li", {
+    key: index,
+    className: "list-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    contentEditable: true,
+    suppressContentEditableWarning: true,
+    "data-idx": index,
+    onInput: e => handleItemChange(index, e.target.textContent, e.currentTarget),
+    onKeyDown: e => handleItemKeyDown(e, index),
+    onFocus: () => setEditingIndex(index),
+    dangerouslySetInnerHTML: {
+      __html: item
+    },
+    className: "list-item-content"
+  }))));
+}
+
+function ImageBlock({
+  block,
+  onChange,
+  onFocus,
+  editable = true
+}) {
+  const [isEditing, setIsEditing] = useState(!block.data.url);
+  const [inputUrl, setInputUrl] = useState(block.data.url || '');
+  const handleSubmit = e => {
+    e.preventDefault();
+    if (inputUrl.trim()) {
+      onChange({
+        url: inputUrl.trim()
+      });
+      setIsEditing(false);
+    }
+  };
+  const handleEdit = () => {
+    setIsEditing(true);
+    setInputUrl(block.data.url || '');
+  };
+  if (editable && isEditing) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "image-block-input",
+      style: block.data.styles,
+      onClick: onFocus
+    }, /*#__PURE__*/React.createElement("form", {
+      onSubmit: handleSubmit
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      placeholder: "Enter image URL...",
+      value: inputUrl,
+      onChange: e => setInputUrl(e.target.value),
+      autoFocus: true,
+      className: "image-url-input"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "image-block-actions"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "submit",
+      className: "image-block-btn"
+    }, "Insert"), block.data.url && /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: () => setIsEditing(false),
+      className: "image-block-btn"
+    }, "Cancel"))));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "image-block-wrapper",
+    style: block.data.styles,
+    onClick: editable ? onFocus : undefined
+  }, /*#__PURE__*/React.createElement("img", {
+    src: block.data.url,
+    alt: block.data.alt || 'Image',
+    className: "image-block",
+    onError: e => {
+      e.target.style.display = 'none';
+      e.target.nextSibling.style.display = 'block';
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "image-error",
+    style: {
+      display: 'none'
+    }
+  }, "Failed to load image"), editable && /*#__PURE__*/React.createElement("button", {
+    onClick: handleEdit,
+    className: "image-edit-btn"
+  }, "Edit URL"));
+}
+
+function YouTubeBlock({
+  block,
+  onChange,
+  onFocus,
+  editable = true
+}) {
+  const [isEditing, setIsEditing] = useState(!block.data.videoId);
+  const [inputUrl, setInputUrl] = useState(block.data.url || '');
+  const handleSubmit = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (inputUrl.trim()) {
+      const videoId = extractYouTubeId(inputUrl.trim());
+      if (videoId) {
+        onChange({
+          url: inputUrl.trim(),
+          videoId
+        });
+        setIsEditing(false);
+      } else {
+        alert('Invalid YouTube URL. Please enter a valid YouTube video link.');
+      }
+    }
+  };
+  const handleEdit = () => {
+    setIsEditing(true);
+    setInputUrl(block.data.url || '');
+  };
+  if (editable && isEditing) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "youtube-block-input",
+      style: block.data.styles,
+      onClick: onFocus
+    }, /*#__PURE__*/React.createElement("form", {
+      onSubmit: handleSubmit
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      placeholder: "Enter YouTube URL...",
+      value: inputUrl,
+      onChange: e => setInputUrl(e.target.value),
+      autoFocus: true,
+      className: "youtube-url-input"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "youtube-block-actions"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "submit",
+      className: "youtube-block-btn"
+    }, "Embed"), block.data.videoId && /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: () => setIsEditing(false),
+      className: "youtube-block-btn"
+    }, "Cancel"))));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "youtube-block-wrapper",
+    style: block.data.styles,
+    onClick: editable ? onFocus : undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "youtube-embed"
+  }, /*#__PURE__*/React.createElement("iframe", {
+    src: `https://www.youtube.com/embed/${block.data.videoId}`,
+    frameBorder: "0",
+    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+    allowFullScreen: true,
+    title: "YouTube video"
+  })), editable && /*#__PURE__*/React.createElement("button", {
+    onClick: handleEdit,
+    className: "youtube-edit-btn"
+  }, "Change Video"));
+}
+
+function DividerBlock({
+  block,
+  onFocus
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "divider-block-wrapper",
+    style: block.data.styles,
+    onClick: onFocus
+  }, /*#__PURE__*/React.createElement("hr", {
+    className: "divider-block"
+  }));
+}
+
+function ContextMenu({
+  x,
+  y,
+  onAddBlock,
+  onClose
+}) {
+  const menuRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = e => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    const handleEscape = e => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [onClose]);
+  const handleInsert = block => {
+    onAddBlock(block, 'append');
+    onClose();
+  };
+  const items = [{
+    label: '¶ Paragraph',
+    action: () => handleInsert(createEmptyBlock())
+  }, {
+    label: 'H1',
+    action: () => handleInsert(createHeadingBlock(HEADING_LEVELS.H1))
+  }, {
+    label: 'H2',
+    action: () => handleInsert(createHeadingBlock(HEADING_LEVELS.H2))
+  }, {
+    label: 'H3',
+    action: () => handleInsert(createHeadingBlock(HEADING_LEVELS.H3))
+  }, {
+    label: '• Bullet List',
+    action: () => handleInsert(createListBlock(LIST_STYLES.UNORDERED))
+  }, {
+    label: '1. Numbered List',
+    action: () => handleInsert(createListBlock(LIST_STYLES.ORDERED))
+  }, {
+    label: 'Image',
+    action: () => handleInsert(createImageBlock())
+  }, {
+    label: 'YouTube',
+    action: () => handleInsert(createYouTubeBlock())
+  }, {
+    label: '─ Divider',
+    action: () => handleInsert(createDividerBlock())
+  }];
+  return /*#__PURE__*/React.createElement("div", {
+    ref: menuRef,
+    className: "context-menu",
+    style: {
+      left: x,
+      top: y
+    }
+  }, items.map(item => /*#__PURE__*/React.createElement("button", {
+    key: item.label,
+    className: "context-menu-item",
+    onClick: item.action
+  }, item.label)));
+}
+
+const TEXT_BLOCK_TYPES = [BLOCK_TYPES.PARAGRAPH, BLOCK_TYPES.HEADING, BLOCK_TYPES.LIST];
+function StyleField({
+  label,
+  value,
+  onChange,
+  type = 'text',
+  suffix = ''
+}) {
+  if (type === 'color') {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "style-modal-field"
+    }, /*#__PURE__*/React.createElement("label", null, label), /*#__PURE__*/React.createElement("input", {
+      type: "color",
+      value: value || '#000000',
+      onChange: e => onChange(e.target.value)
+    }));
+  }
+  if (type === 'font-size') {
+    const numericValue = parseInt(value, 10) || 16;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "style-modal-field"
+    }, /*#__PURE__*/React.createElement("label", null, label), /*#__PURE__*/React.createElement("div", {
+      className: "style-modal-font-size"
+    }, /*#__PURE__*/React.createElement("select", {
+      value: FONT_SIZE_OPTIONS.includes(value) ? value : '',
+      onChange: e => {
+        if (e.target.value) onChange(e.target.value);
+      }
+    }, /*#__PURE__*/React.createElement("option", {
+      value: "",
+      disabled: true
+    }, "Common sizes"), FONT_SIZE_OPTIONS.map(size => /*#__PURE__*/React.createElement("option", {
+      key: size,
+      value: size
+    }, size))), /*#__PURE__*/React.createElement("div", {
+      className: "style-modal-input-wrapper"
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "number",
+      min: "1",
+      value: numericValue,
+      onChange: e => onChange(`${e.target.value}px`)
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "style-modal-suffix"
+    }, "px"))));
+  }
+  const numericValue = parseInt(value, 10) || 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "style-modal-field"
+  }, /*#__PURE__*/React.createElement("label", null, label), /*#__PURE__*/React.createElement("div", {
+    className: "style-modal-input-wrapper"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "number",
+    min: "0",
+    value: numericValue,
+    onChange: e => onChange(`${e.target.value}${suffix}`)
+  }), suffix && /*#__PURE__*/React.createElement("span", {
+    className: "style-modal-suffix"
+  }, suffix)));
+}
+function StyleModal({
+  block,
+  onUpdateStyle,
+  onClose
+}) {
+  const styles = block.data.styles || {};
+  const isTextBlock = TEXT_BLOCK_TYPES.includes(block.type);
+  const handleChange = (prop, value) => {
+    const updates = {
+      [prop]: value
+    };
+    if (prop === 'borderWidth' || prop === 'borderColor') {
+      updates.borderStyle = 'solid';
+    }
+    onUpdateStyle(block.id, updates);
+  };
+  const handleAllMargins = value => {
+    onUpdateStyle(block.id, {
+      marginTop: value,
+      marginRight: value,
+      marginBottom: value,
+      marginLeft: value
+    });
+  };
+  const handleAllPadding = value => {
+    onUpdateStyle(block.id, {
+      paddingTop: value,
+      paddingRight: value,
+      paddingBottom: value,
+      paddingLeft: value
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "style-modal-overlay",
+    onMouseDown: onClose
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "style-modal",
+    onMouseDown: e => e.stopPropagation()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "style-modal-header"
+  }, /*#__PURE__*/React.createElement("h3", null, "Edit Block Style"), /*#__PURE__*/React.createElement("button", {
+    className: "style-modal-close",
+    onClick: onClose
+  }, "\xD7")), /*#__PURE__*/React.createElement("div", {
+    className: "style-modal-body"
+  }, isTextBlock && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "style-modal-section"
+  }, /*#__PURE__*/React.createElement("h4", null, "Text"), /*#__PURE__*/React.createElement("div", {
+    className: "style-modal-row"
+  }, /*#__PURE__*/React.createElement(StyleField, {
+    label: "Font Size",
+    value: styles.fontSize,
+    onChange: v => handleChange('fontSize', v),
+    type: "font-size"
+  }), /*#__PURE__*/React.createElement(StyleField, {
+    label: "Color",
+    value: styles.color,
+    onChange: v => handleChange('color', v),
+    type: "color"
+  }))), /*#__PURE__*/React.createElement("hr", {
+    className: "style-modal-divider"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "style-modal-section"
+  }, /*#__PURE__*/React.createElement("h4", null, "Margin"), /*#__PURE__*/React.createElement("div", {
+    className: "style-modal-row"
+  }, /*#__PURE__*/React.createElement(StyleField, {
+    label: "All",
+    value: styles.marginAll || '',
+    onChange: v => {
+      handleAllMargins(v);
+      handleChange('marginAll', v);
+    },
+    suffix: "px"
+  }), /*#__PURE__*/React.createElement(StyleField, {
+    label: "Top",
+    value: styles.marginTop,
+    onChange: v => handleChange('marginTop', v),
+    suffix: "px"
+  }), /*#__PURE__*/React.createElement(StyleField, {
+    label: "Right",
+    value: styles.marginRight,
+    onChange: v => handleChange('marginRight', v),
+    suffix: "px"
+  }), /*#__PURE__*/React.createElement(StyleField, {
+    label: "Bottom",
+    value: styles.marginBottom,
+    onChange: v => handleChange('marginBottom', v),
+    suffix: "px"
+  }), /*#__PURE__*/React.createElement(StyleField, {
+    label: "Left",
+    value: styles.marginLeft,
+    onChange: v => handleChange('marginLeft', v),
+    suffix: "px"
+  }))), /*#__PURE__*/React.createElement("hr", {
+    className: "style-modal-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "style-modal-section"
+  }, /*#__PURE__*/React.createElement("h4", null, "Padding"), /*#__PURE__*/React.createElement("div", {
+    className: "style-modal-row"
+  }, /*#__PURE__*/React.createElement(StyleField, {
+    label: "All",
+    value: styles.paddingAll || '',
+    onChange: v => {
+      handleAllPadding(v);
+      handleChange('paddingAll', v);
+    },
+    suffix: "px"
+  }), /*#__PURE__*/React.createElement(StyleField, {
+    label: "Top",
+    value: styles.paddingTop,
+    onChange: v => handleChange('paddingTop', v),
+    suffix: "px"
+  }), /*#__PURE__*/React.createElement(StyleField, {
+    label: "Right",
+    value: styles.paddingRight,
+    onChange: v => handleChange('paddingRight', v),
+    suffix: "px"
+  }), /*#__PURE__*/React.createElement(StyleField, {
+    label: "Bottom",
+    value: styles.paddingBottom,
+    onChange: v => handleChange('paddingBottom', v),
+    suffix: "px"
+  }), /*#__PURE__*/React.createElement(StyleField, {
+    label: "Left",
+    value: styles.paddingLeft,
+    onChange: v => handleChange('paddingLeft', v),
+    suffix: "px"
+  }))), /*#__PURE__*/React.createElement("hr", {
+    className: "style-modal-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "style-modal-section"
+  }, /*#__PURE__*/React.createElement("h4", null, "Border"), /*#__PURE__*/React.createElement("div", {
+    className: "style-modal-row"
+  }, /*#__PURE__*/React.createElement(StyleField, {
+    label: "Width",
+    value: styles.borderWidth,
+    onChange: v => handleChange('borderWidth', v),
+    suffix: "px"
+  }), /*#__PURE__*/React.createElement(StyleField, {
+    label: "Color",
+    value: styles.borderColor,
+    onChange: v => handleChange('borderColor', v),
+    type: "color"
+  }))), /*#__PURE__*/React.createElement("hr", {
+    className: "style-modal-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "style-modal-section"
+  }, /*#__PURE__*/React.createElement("h4", null, "Background"), /*#__PURE__*/React.createElement("div", {
+    className: "style-modal-row"
+  }, /*#__PURE__*/React.createElement(StyleField, {
+    label: "Color",
+    value: styles.backgroundColor,
+    onChange: v => handleChange('backgroundColor', v),
+    type: "color"
+  }))))));
+}
+
+function Editor({
+  initialData,
+  onSave,
+  placeholder = 'Start writing...',
+  editable = true,
+  showBranding = true
+}) {
+  const editorContentRef = useRef(null);
+  const blockRefs = useRef({});
+  const [contextMenu, setContextMenu] = useState({
+    visible: false,
+    x: 0,
+    y: 0
+  });
+  const [editingBlockId, setEditingBlockId] = useState(null);
+  const [showSaveNotification, setShowSaveNotification] = useState(false);
+  const {
+    blocks,
+    focusedBlockId,
+    setFocusedBlockId,
+    addBlock,
+    updateBlock,
+    updateBlockStyle,
+    deleteBlock,
+    moveBlock,
+    getJSON
+  } = useEditor(initialData);
+
+  // Global ESC key handler to deselect
+  useEffect(() => {
+    if (!editable) return;
+    const handleGlobalKeyDown = e => {
+      if (e.key === 'Escape' && focusedBlockId) {
+        setFocusedBlockId(null);
+        if (document.activeElement) {
+          document.activeElement.blur();
+        }
+      }
+    };
+    document.addEventListener('keydown', handleGlobalKeyDown);
+    return () => document.removeEventListener('keydown', handleGlobalKeyDown);
+  }, [focusedBlockId, editable, setFocusedBlockId]);
+  const handleSave = () => {
+    const json = getJSON();
+    if (onSave) {
+      onSave(json);
+    }
+    setShowSaveNotification(true);
+    setTimeout(() => setShowSaveNotification(false), 1800);
+  };
+  const handleBlockChange = (blockId, updates) => {
+    updateBlock(blockId, updates);
+  };
+  const handleBlockStyleChange = styleUpdates => {
+    if (focusedBlockId) {
+      updateBlockStyle(focusedBlockId, styleUpdates);
+    }
+  };
+  const handleMoveBlockUp = () => {
+    if (!focusedBlockId) return;
+    const index = blocks.findIndex(b => b.id === focusedBlockId);
+    if (index > 0) {
+      moveBlock(index, index - 1);
+    }
+  };
+  const handleMoveBlockDown = () => {
+    if (!focusedBlockId) return;
+    const index = blocks.findIndex(b => b.id === focusedBlockId);
+    if (index < blocks.length - 1) {
+      moveBlock(index, index + 1);
+    }
+  };
+  const handleAddBlock = (block, mode = 'append') => {
+    if (mode === 'replace' && focusedBlockId) {
+      const focusedIndex = blocks.findIndex(b => b.id === focusedBlockId);
+      if (focusedIndex !== -1) {
+        deleteBlock(focusedBlockId);
+        addBlock(block, focusedIndex);
+        setTimeout(() => setFocusedBlockId(block.id), 0);
+        return;
+      }
+    }
+    addBlock(block, blocks.length);
+    setTimeout(() => setFocusedBlockId(block.id), 0);
+  };
+  const handleContextMenu = e => {
+    if (!editable) return;
+    e.preventDefault();
+    const rect = editorContentRef.current.getBoundingClientRect();
+    setContextMenu({
+      visible: true,
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    });
+  };
+  const handleMouseDown = e => {
+    if (!editable) return;
+    let clickedBlockId = null;
+    for (let blockId in blockRefs.current) {
+      const blockEl = blockRefs.current[blockId];
+      if (blockEl && blockEl.contains(e.target)) {
+        clickedBlockId = blockId;
+        break;
+      }
+    }
+    if (clickedBlockId) {
+      setFocusedBlockId(clickedBlockId);
+    } else {
+      setFocusedBlockId(null);
+    }
+  };
+  const handleKeyDown = (blockId, e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      setFocusedBlockId(null);
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
+      return;
+    }
+    const blockIndex = blocks.findIndex(b => b.id === blockId);
+    const block = blocks[blockIndex];
+    if (e.key === 'Backspace' && block.data.text === '') {
+      e.preventDefault();
+      deleteBlock(blockId);
+      if (blockIndex > 0) {
+        setFocusedBlockId(blocks[blockIndex - 1].id);
+      }
+    }
+  };
+  const renderBlock = block => {
+    const isFocused = editable && block.id === focusedBlockId;
+    const commonProps = {
+      block,
+      onChange: updates => handleBlockChange(block.id, updates),
+      onFocus: () => {},
+      isFocused,
+      editable,
+      placeholder
+    };
+    switch (block.type) {
+      case BLOCK_TYPES.PARAGRAPH:
+        return /*#__PURE__*/React.createElement(ParagraphBlock, _extends({}, commonProps, {
+          onKeyDown: editable ? e => handleKeyDown(block.id, e) : undefined
+        }));
+      case BLOCK_TYPES.HEADING:
+        return /*#__PURE__*/React.createElement(HeadingBlock, _extends({}, commonProps, {
+          onKeyDown: editable ? e => handleKeyDown(block.id, e) : undefined
+        }));
+      case BLOCK_TYPES.LIST:
+        return /*#__PURE__*/React.createElement(ListBlock, commonProps);
+      case BLOCK_TYPES.IMAGE:
+        return /*#__PURE__*/React.createElement(ImageBlock, commonProps);
+      case BLOCK_TYPES.YOUTUBE:
+        return /*#__PURE__*/React.createElement(YouTubeBlock, commonProps);
+      case BLOCK_TYPES.DIVIDER:
+        return /*#__PURE__*/React.createElement(DividerBlock, commonProps);
+      default:
+        return null;
+    }
+  };
+  const getBlockTagLabel = block => {
+    switch (block.type) {
+      case BLOCK_TYPES.PARAGRAPH:
+        return 'p';
+      case BLOCK_TYPES.HEADING:
+        return block.data.htmlTag || 'h1';
+      case BLOCK_TYPES.LIST:
+        return block.data.style === LIST_STYLES.ORDERED ? 'ol' : 'ul';
+      case BLOCK_TYPES.IMAGE:
+        return 'img';
+      case BLOCK_TYPES.YOUTUBE:
+        return 'iframe';
+      case BLOCK_TYPES.DIVIDER:
+        return 'hr';
+      default:
+        return 'div';
+    }
+  };
+  const focusedBlock = blocks.find(b => b.id === focusedBlockId);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `evolution-editor ${!editable ? 'read-only' : ''}`
+  }, editable && /*#__PURE__*/React.createElement(React.Fragment, null, showBranding && /*#__PURE__*/React.createElement("div", {
+    className: "editor-branding"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "editor-logo"
+  }, "Evolution Editor"), /*#__PURE__*/React.createElement("div", {
+    className: "editor-subtitle"
+  }, "Developed by ", /*#__PURE__*/React.createElement("a", {
+    href: "https://github.com/james-evolution",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, "@james-evolution")), showSaveNotification && /*#__PURE__*/React.createElement("div", {
+    className: "editor-save-notification"
+  }, "JSON exported successfully")), !showBranding && showSaveNotification && /*#__PURE__*/React.createElement("div", {
+    className: "editor-save-notification editor-save-notification-no-brand"
+  }, "JSON exported successfully"), /*#__PURE__*/React.createElement("div", {
+    className: "editor-stepper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "step"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "step-label"
+  }, "Add Element"), /*#__PURE__*/React.createElement("span", {
+    className: "step-desc"
+  }, "Right-click anywhere to open the menu for inserting elements.")), /*#__PURE__*/React.createElement("div", {
+    className: "step"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "step-label"
+  }, "Style Element"), /*#__PURE__*/React.createElement("span", {
+    className: "step-desc"
+  }, "Click the element to unlock toolbar styling options, or hover over the element and click \u270F\uFE0F to style.")), /*#__PURE__*/React.createElement("div", {
+    className: "step"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "step-label"
+  }, "Reorder Element"), /*#__PURE__*/React.createElement("span", {
+    className: "step-desc"
+  }, "Use \u2191 \u2193 on the toolbar or hover an element and click \u2195\uFE0F to reorder.")), /*#__PURE__*/React.createElement("div", {
+    className: "step"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "step-label"
+  }, "Delete Element"), /*#__PURE__*/React.createElement("span", {
+    className: "step-desc"
+  }, "Hover over an element and click \uD83D\uDDD1\uFE0F to delete it."))), /*#__PURE__*/React.createElement(Toolbar, {
+    focusedBlock: focusedBlock,
+    onUpdateBlockStyle: handleBlockStyleChange,
+    onMoveBlockUp: handleMoveBlockUp,
+    onMoveBlockDown: handleMoveBlockDown,
+    onSave: handleSave
+  })), /*#__PURE__*/React.createElement("div", {
+    ref: editorContentRef,
+    className: "editor-content",
+    onMouseDown: handleMouseDown,
+    onContextMenu: editable ? handleContextMenu : undefined
+  }, blocks.map((block, idx) => /*#__PURE__*/React.createElement("div", {
+    key: block.id,
+    className: "editor-block-wrapper"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "block-tag-label"
+  }, "<", getBlockTagLabel(block), ">"), /*#__PURE__*/React.createElement("div", {
+    className: "block-left-controls"
+  }, editable && /*#__PURE__*/React.createElement("div", {
+    className: "block-move-controls"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "block-move-btn",
+    onClick: () => idx > 0 && moveBlock(idx, idx - 1),
+    title: "Move up",
+    disabled: idx === 0
+  }, "\u2191"), /*#__PURE__*/React.createElement("button", {
+    className: "block-move-btn",
+    onClick: () => idx < blocks.length - 1 && moveBlock(idx, idx + 1),
+    title: "Move down",
+    disabled: idx === blocks.length - 1
+  }, "\u2193"))), /*#__PURE__*/React.createElement("div", {
+    ref: editable ? el => blockRefs.current[block.id] = el : undefined,
+    className: `editor-block ${editable && block.id === focusedBlockId ? 'focused' : ''}`,
+    "data-block-id": block.id
+  }, renderBlock(block)), editable && /*#__PURE__*/React.createElement("div", {
+    className: "block-actions"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "block-edit-button",
+    onClick: () => setEditingBlockId(block.id),
+    title: "Edit block style"
+  }, "\u270F\uFE0F"), /*#__PURE__*/React.createElement("button", {
+    className: "block-delete-button",
+    onClick: () => deleteBlock(block.id),
+    title: "Delete block"
+  }, "\uD83D\uDDD1\uFE0F")))), editable && contextMenu.visible && /*#__PURE__*/React.createElement(ContextMenu, {
+    x: contextMenu.x,
+    y: contextMenu.y,
+    onAddBlock: handleAddBlock,
+    onClose: () => setContextMenu({
+      visible: false,
+      x: 0,
+      y: 0
+    })
+  })), editable && editingBlockId && /*#__PURE__*/React.createElement(StyleModal, {
+    block: blocks.find(b => b.id === editingBlockId),
+    onUpdateStyle: (blockId, styleUpdates) => updateBlockStyle(blockId, styleUpdates),
+    onClose: () => setEditingBlockId(null)
+  }));
+}
+
+export { BLOCK_TYPES, Editor as EvolutionEditor, HEADING_LEVELS, LIST_STYLES, deserialize, serialize };
+//# sourceMappingURL=index.esm.js.map