@tfw.in/structura-lib 0.2.0

package/dist/esm/EditableContent.js

@@ -0,0 +1,161 @@
+import { slicedToArray as _slicedToArray } from './_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+
+// Helper function to extract text content while preserving structure
+var extractTextPreservingStructure = function extractTextPreservingStructure(html) {
+  var _a;
+  // Create a temporary DOM element
+  var tempDiv = document.createElement("div");
+  tempDiv.innerHTML = html;
+  // For headings, preserve the heading tag but extract just the text
+  if (html.match(/<h[1-6]/i)) {
+    ((_a = html.match(/<(h[1-6])/i)) === null || _a === void 0 ? void 0 : _a[1]) || "p";
+    var textContent = tempDiv.textContent || tempDiv.innerText || "";
+    return textContent;
+  }
+  // For other elements, extract just the text content
+  return tempDiv.textContent || tempDiv.innerText || "";
+};
+function EditableContent(_ref) {
+  var id = _ref.id,
+    content = _ref.content,
+    onContentChange = _ref.onContentChange,
+    _ref$isHeading = _ref.isHeading,
+    isHeading = _ref$isHeading === void 0 ? false : _ref$isHeading,
+    onNodeClick = _ref.onNodeClick;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEditing = _useState2[0],
+    setIsEditing = _useState2[1];
+  var _useState3 = useState(content),
+    _useState4 = _slicedToArray(_useState3, 2),
+    editedContent = _useState4[0],
+    setEditedContent = _useState4[1];
+  var _useState5 = useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    textAreaContent = _useState6[0],
+    setTextAreaContent = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isEdited = _useState8[0],
+    setIsEdited = _useState8[1];
+  var contentRef = useRef(null);
+  var originalHtmlStructure = useRef(content);
+  // Update content when props change, but preserve edited state
+  useEffect(function () {
+    if (!isEdited) {
+      setEditedContent(content);
+      originalHtmlStructure.current = content;
+    }
+  }, [content, isEdited]);
+  // Extract heading level if content is a heading
+  var headingLevel = 1;
+  var originalTag = "p";
+  if (isHeading) {
+    var headingMatch = content.match(/<h([1-6])/);
+    headingLevel = headingMatch ? parseInt(headingMatch[1]) : 1;
+    originalTag = "h".concat(headingLevel);
+  } else {
+    // Try to detect paragraph or other tags
+    var tagMatch = content.match(/<([a-z0-9]+)[^>]*>/i);
+    originalTag = tagMatch ? tagMatch[1] : "p";
+  }
+  var getHeadingStyles = function getHeadingStyles(level) {
+    switch (level) {
+      case 1:
+        return "text-2xl font-bold";
+      case 2:
+        return "text-xl font-bold";
+      case 3:
+        return "text-lg font-bold";
+      case 4:
+        return "text-base font-bold";
+      case 5:
+        return "text-sm font-bold";
+      case 6:
+        return "text-xs font-bold";
+      default:
+        return "text-base";
+    }
+  };
+  var handleDoubleClick = function handleDoubleClick(e) {
+    // Stop propagation to prevent parent click handlers from firing
+    e.stopPropagation();
+    if (onContentChange) {
+      // Extract text content for textarea while preserving structure
+      setTextAreaContent(extractTextPreservingStructure(editedContent));
+      setIsEditing(true);
+    }
+  };
+  var handleChange = function handleChange(e) {
+    setTextAreaContent(e.target.value);
+  };
+  var handleBlur = function handleBlur() {
+    setIsEditing(false);
+    // Only update if content actually changed
+    // Preserve original HTML structure (tag) but update the content
+    var newHtmlContent = "";
+    if (isHeading || originalTag.match(/^h[1-6]$/)) {
+      // For headings
+      newHtmlContent = "<".concat(originalTag, ">").concat(textAreaContent, "</").concat(originalTag, ">");
+    } else if (originalTag === "p" || !originalHtmlStructure.current.match(/<[a-z]+[^>]*>/i)) {
+      // For paragraphs or plain text
+      newHtmlContent = "<p>".concat(textAreaContent, "</p>");
+    } else {
+      // For other elements, try to preserve the original tag
+      newHtmlContent = "<".concat(originalTag, ">").concat(textAreaContent, "</").concat(originalTag, ">");
+    }
+    // Compare original text content with new text content for change detection
+    var originalTextContent = extractTextPreservingStructure(content);
+    if (textAreaContent !== originalTextContent && onContentChange) {
+      setEditedContent(newHtmlContent);
+      setIsEdited(true);
+      onContentChange(id, newHtmlContent);
+    }
+  };
+  var handleClick = function handleClick(e) {
+    // Stop editing mode click from propagating
+    if (isEditing) {
+      e.stopPropagation();
+      return;
+    }
+    // If there's an onNodeClick handler, call it
+    if (onNodeClick) {
+      e.stopPropagation(); // Prevent click from reaching parent containers
+      onNodeClick();
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    // Handle Enter key to complete editing (Shift+Enter to add a line break)
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleBlur();
+    }
+  };
+  return jsx("div", {
+    className: "w-full ".concat(isEdited ? "bg-yellow-100" : "", " ").concat(onNodeClick && !isEditing ? "cursor-pointer" : ""),
+    onClick: handleClick,
+    onDoubleClick: handleDoubleClick,
+    children: isEditing ? jsx("textarea", {
+      value: textAreaContent,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      autoFocus: true,
+      className: "w-full p-1 border border-blue-400 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900",
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      rows: 3
+    }) : jsx("div", {
+      ref: contentRef,
+      className: "prose max-w-none ".concat(isHeading ? getHeadingStyles(headingLevel) : ""),
+      dangerouslySetInnerHTML: {
+        __html: editedContent
+      }
+    })
+  });
+}
+
+export { EditableContent as default };