@alpaca-editor/core 1.0.4018 → 1.0.4027

package/src/editor/field-types/richtext/components/SimpleDropdown.tsx

@@ -0,0 +1,165 @@
+import React, { useState, useRef, useEffect } from "react";
+
+interface DropdownOption {
+  id: string;
+  type: string;
+  label: string;
+  icon: React.ReactNode;
+  isActive: boolean;
+  onSelect: () => void;
+}
+
+interface SimpleDropdownProps {
+  options: DropdownOption[];
+  label?: string;
+  showIconsOnly?: boolean;
+  isActive: boolean;
+  title?: string;
+}
+
+export const SimpleDropdown: React.FC<SimpleDropdownProps> = ({
+  options,
+  label,
+  showIconsOnly,
+  isActive,
+  title,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const activeOption = options.find((option) => option.isActive);
+  const displayOption = activeOption || options[0];
+
+  const handleToggle = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setIsOpen(!isOpen);
+  };
+
+  const handleOptionSelect = (option: DropdownOption) => {
+    option.onSelect();
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="simple-dropdown" ref={dropdownRef}>
+      <button
+        className={`toolbar-dropdown-button ${isActive ? "active" : ""}`}
+        onMouseDown={handleToggle}
+        title={title || `${label || "Format"} options`}
+        style={{
+          padding: "5px 10px",
+          margin: "0",
+          background: isActive ? "#ffffff" : "transparent",
+          border: "none",
+          borderRadius: "3px",
+          cursor: "pointer",
+          boxShadow: isActive ? "0 1px 2px rgba(0,0,0,0.1)" : "none",
+          display: "flex",
+          alignItems: "center",
+          minWidth: "120px",
+          justifyContent: "space-between",
+        }}
+      >
+        {label ? (
+          <>
+            <span className="toolbar-dropdown-content">
+              {label}: {displayOption?.label}
+            </span>
+            <span className="toolbar-dropdown-arrow">▼</span>
+          </>
+        ) : showIconsOnly ? (
+          <>
+            <span className="toolbar-dropdown-icon">{displayOption?.icon}</span>
+            <span className="toolbar-dropdown-arrow">▼</span>
+          </>
+        ) : (
+          <>
+            <span className="toolbar-dropdown-icon">
+              {displayOption?.icon && (
+                <span className="toolbar-dropdown-icon">
+                  {displayOption.icon}
+                </span>
+              )}
+              <span className="toolbar-dropdown-content">
+                {displayOption?.label}
+              </span>
+            </span>
+            <span className="toolbar-dropdown-arrow">▼</span>
+          </>
+        )}
+      </button>
+
+      {isOpen && (
+        <div
+          className="dropdown-menu"
+          style={{
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            background: "white",
+            border: "1px solid #ddd",
+            borderRadius: "3px",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+            zIndex: 1000,
+            minWidth: "120px",
+          }}
+        >
+          {options.map((option) => (
+            <button
+              key={`${option.type}-${option.id}`}
+              className={`dropdown-item ${option.isActive ? "active" : ""}`}
+              onClick={() => handleOptionSelect(option)}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                width: "100%",
+                padding: "8px 12px",
+                border: "none",
+                background: option.isActive ? "#f0f0f0" : "transparent",
+                cursor: "pointer",
+                textAlign: "left",
+              }}
+              onMouseEnter={(e) => {
+                if (!option.isActive) {
+                  (e.target as HTMLElement).style.background = "#f8f8f8";
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!option.isActive) {
+                  (e.target as HTMLElement).style.background = "transparent";
+                }
+              }}
+            >
+              <span
+                className="dropdown-item-icon"
+                style={{ marginRight: "8px" }}
+              >
+                {option.icon}
+              </span>
+              <span className="dropdown-item-label">{option.label}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SimpleDropdown;

package/src/editor/field-types/richtext/components/SimpleRichTextEditor.css

@@ -0,0 +1,261 @@
+/* SimpleRichTextEditor Styles */
+
+/* Main editor container */
+.simple-rich-text-editor {
+  /* Base styles for the editor */
+}
+
+/* Editor content area */
+.simple-editor-content {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  line-height: 1.5;
+}
+
+.simple-editor-content:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.simple-editor-content:empty:before {
+  content: attr(data-placeholder);
+  color: #999;
+  font-style: italic;
+  pointer-events: none;
+}
+
+/* Toolbar styles - reusing existing Slate toolbar styles */
+.simple-rich-text-editor .toolbar {
+  padding: 6px;
+  margin-bottom: 6px;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.simple-rich-text-editor .toolbar-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.simple-rich-text-editor .toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.simple-rich-text-editor .toolbar-button-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  padding: 2px;
+}
+
+.simple-rich-text-editor .toolbar-dropdown-container {
+  display: inline-block;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  padding: 2px;
+  position: relative;
+}
+
+.simple-rich-text-editor .toolbar-dropdown-button {
+  padding: 5px 10px;
+  margin: 0;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  min-width: 120px;
+  justify-content: space-between;
+}
+
+.simple-rich-text-editor .toolbar-dropdown-button:not(:disabled) {
+  background: transparent;
+}
+
+.simple-rich-text-editor .toolbar-dropdown-button:not(:disabled):hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.simple-rich-text-editor .toolbar-dropdown-button.active {
+  background: #ffffff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.simple-rich-text-editor .toolbar-dropdown-button:disabled {
+  background: transparent;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.simple-rich-text-editor .toolbar-dropdown-arrow {
+  margin-left: 5px;
+  flex-shrink: 0;
+}
+
+.simple-rich-text-editor .toolbar-dropdown-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.simple-rich-text-editor .toolbar-dropdown-icon {
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+/* Dropdown menu styles */
+.simple-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-menu {
+  z-index: 1000;
+}
+
+.dropdown-item {
+  transition: background-color 0.15s ease;
+}
+
+.dropdown-item:hover {
+  background-color: #f8f8f8 !important;
+}
+
+.dropdown-item.active {
+  background-color: #f0f0f0 !important;
+}
+
+/* Special mark styles */
+.simple-editor-content .extrabold {
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+/* List styles */
+.simple-editor-content ul,
+.simple-editor-content ol {
+  margin: 0.5em 0;
+  padding-left: 2em;
+}
+
+.simple-editor-content ul {
+  list-style-type: disc;
+}
+
+.simple-editor-content ol {
+  list-style-type: decimal;
+}
+
+.simple-editor-content li {
+  margin: 0.25em 0;
+  display: list-item;
+}
+
+/* Nested list styles */
+.simple-editor-content ul ul {
+  list-style-type: circle;
+}
+
+.simple-editor-content ul ul ul {
+  list-style-type: square;
+}
+
+.simple-editor-content ol ol {
+  list-style-type: lower-alpha;
+}
+
+.simple-editor-content ol ol ol {
+  list-style-type: lower-roman;
+}
+
+/* Block element spacing */
+.simple-editor-content p,
+.simple-editor-content h1,
+.simple-editor-content h2,
+.simple-editor-content h3,
+.simple-editor-content h4,
+.simple-editor-content h5,
+.simple-editor-content h6 {
+  margin: 0.5em 0;
+}
+
+.simple-editor-content h1 {
+  font-size: 2em;
+  font-weight: bold;
+}
+.simple-editor-content h2 {
+  font-size: 1.75em;
+  font-weight: bold;
+}
+.simple-editor-content h3 {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+.simple-editor-content h4 {
+  font-size: 1.25em;
+  font-weight: bold;
+}
+.simple-editor-content h5 {
+  font-size: 1.1em;
+  font-weight: bold;
+}
+.simple-editor-content h6 {
+  font-size: 1em;
+  font-weight: bold;
+}
+
+/* First and last element margin reset */
+.simple-editor-content > *:first-child {
+  margin-top: 0;
+}
+
+.simple-editor-content > *:last-child {
+  margin-bottom: 0;
+}
+
+/* Enhanced tooltip styles */
+.toolbar-button,
+.toolbar-dropdown-button {
+  position: relative;
+}
+
+.toolbar-button[title]:hover::after,
+.toolbar-dropdown-button[title]:hover::after {
+  content: attr(title);
+  position: absolute;
+  bottom: -35px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.9);
+  color: white;
+  padding: 6px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.toolbar-button[title]:hover::before,
+.toolbar-dropdown-button[title]:hover::before {
+  content: "";
+  position: absolute;
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-bottom-color: rgba(0, 0, 0, 0.9);
+  z-index: 1000;
+  pointer-events: none;
+}