@alpaca-editor/core 1.0.3992 → 1.0.3995

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

@@ -0,0 +1,165 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Editor } from 'slate';
+import { DropdownOption } from '../types';
+import './EditorDropdown.css';
+
+// Editor dropdown component
+const EditorDropdown = <T,>({ 
+  options, 
+  editor,
+  buttonStyle,
+  label
+}: { 
+  options: DropdownOption<T>[], 
+  editor: Editor,
+  buttonStyle?: React.CSSProperties,
+  label?: string
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [buttonWidth, setButtonWidth] = useState(0); // Start with 0 to calculate
+  const [menuWidth, setMenuWidth] = useState(0);     // Start with 0 to calculate
+  
+  useEffect(() => {
+    // Calculate based on text length
+    const span = document.createElement('span');
+    span.style.visibility = 'hidden';
+    span.style.position = 'absolute';
+    span.style.whiteSpace = 'nowrap';
+    span.style.font = '13px system-ui, -apple-system, sans-serif'; // More consistent font
+    span.style.padding = '0';
+    span.style.margin = '0';
+    document.body.appendChild(span);
+    
+    let maxWidth = 0;
+    
+    // Calculate width for all options (both menu and button will use the same width)
+    options.forEach(option => {
+      span.textContent = option.label || '';
+      const labelWidth = span.getBoundingClientRect().width;
+      const iconWidth = option.icon ? 20 : 0;
+      const iconSpacing = option.icon ? 8 : 0;
+      
+      // Calculate width for menu option
+      const menuOptionWidth = labelWidth + iconWidth + iconSpacing + 24; // Icon + text + spacing + menu padding
+      
+      // Calculate width for button option (considering label prefix if present)
+      let buttonOptionWidth;
+      if (label) {
+        span.textContent = `${label}: ${option.label}`;
+        const textWidth = span.getBoundingClientRect().width;
+        buttonOptionWidth = textWidth + iconWidth + iconSpacing + 30; // Text + icon + spacing + arrow + padding
+      } else {
+        buttonOptionWidth = labelWidth + iconWidth + iconSpacing + 30; // Text + icon + spacing + arrow + padding
+      }
+      
+      // Use the maximum of both menu and button widths
+      maxWidth = Math.max(maxWidth, menuOptionWidth, buttonOptionWidth);
+    });
+    
+    // Fallback if no options
+    if (options.length === 0) {
+      maxWidth = 100;
+    }
+    
+    // Set minimum width
+    const minWidth = 80;
+    const finalWidth = Math.max(maxWidth, minWidth);
+    
+    // Both button and menu use the same width
+    setButtonWidth(finalWidth);
+    setMenuWidth(finalWidth);
+    
+    document.body.removeChild(span);
+  }, [options, label]);
+  
+  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 toggleDropdown = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setIsOpen(!isOpen);
+  };
+  
+  const handleSelect = (option: DropdownOption<T>) => (event: React.MouseEvent) => {
+    event.preventDefault();
+    option.onSelect(editor, event);
+    setIsOpen(false);
+  };
+  
+  const currentOption = options.find(option => option.isActive(editor)) || options[0];
+  
+  return (
+    <div ref={dropdownRef} className="editor-dropdown">
+      <button
+        onMouseDown={toggleDropdown}
+        className="editor-dropdown-button"
+        style={{
+          width: buttonWidth > 0 ? `${buttonWidth}px` : 'auto',
+          ...buttonStyle
+        }}
+      >
+        {label ? (
+          <>
+            <span className="editor-dropdown-button-content">
+              {currentOption?.icon && (
+                <span className="editor-dropdown-button-icon">{currentOption.icon}</span>
+              )}
+              <span className="editor-dropdown-button-text">
+                {label}: {currentOption?.label}
+              </span>
+            </span>
+            <span className="editor-dropdown-button-arrow">▼</span>
+          </>
+        ) : (
+          <>
+            <span className="editor-dropdown-button-content">
+              {currentOption?.icon && (
+                <span className="editor-dropdown-button-icon">{currentOption.icon}</span>
+              )}
+              <span className="editor-dropdown-button-text">
+                {currentOption?.label}
+              </span>
+            </span>
+            <span className="editor-dropdown-button-arrow">▼</span>
+          </>
+        )}
+      </button>
+      
+      {isOpen && (
+        <div
+          className="editor-dropdown-menu"
+          style={{
+            width: `${menuWidth}px`
+          }}
+        >
+          {options.map((option, index) => (
+            <div
+              key={index}
+              onMouseDown={handleSelect(option)}
+              className={`editor-dropdown-option ${option.isActive(editor) ? 'active' : ''}`}
+              style={option.style}
+            >
+              {option.icon && <span className="editor-dropdown-option-icon">{option.icon}</span>}
+              <span className="editor-dropdown-option-text">
+                {option.label}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EditorDropdown;

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

@@ -0,0 +1,161 @@
+/* ReactSlate Editor Styles */
+
+/* Main editor container */
+.slate-editor {
+  /* Base styles for the editor */
+}
+
+/* List item styles */
+.slate-editor .slate-list-item {
+  position: relative;
+  margin: 4px 0;
+  line-height: 1.5;
+  display: flex;
+  align-items: flex-start;
+}
+
+.slate-editor .slate-list-item .slate-list-bullet {
+  flex-shrink: 0;
+  width: 20px;
+  text-align: right;
+  padding-right: 8px;
+  user-select: none;
+  color: #666;
+  font-weight: normal;
+  margin-top: 0;
+}
+
+.slate-editor .slate-list-item.slate-list-ordered .slate-list-bullet {
+  font-weight: 500;
+}
+
+.slate-editor .slate-list-item.slate-list-unordered .slate-list-bullet {
+  font-size: 1.2em;
+  line-height: 1.25;
+}
+
+.slate-editor .slate-list-item .slate-list-content {
+  flex: 1;
+  min-height: 1.5em;
+}
+
+/* List indentation levels */
+.slate-editor .slate-list-item[data-indent="0"] { margin-left: 0px; }
+.slate-editor .slate-list-item[data-indent="1"] { margin-left: 20px; }
+.slate-editor .slate-list-item[data-indent="2"] { margin-left: 40px; }
+.slate-editor .slate-list-item[data-indent="3"] { margin-left: 60px; }
+.slate-editor .slate-list-item[data-indent="4"] { margin-left: 80px; }
+.slate-editor .slate-list-item[data-indent="5"] { margin-left: 100px; }
+
+/* Different bullet styles for different levels */
+.slate-editor .slate-list-item.slate-list-unordered[data-indent="0"] .slate-list-bullet::before { content: "•"; }
+.slate-editor .slate-list-item.slate-list-unordered[data-indent="1"] .slate-list-bullet::before { content: "◦"; }
+.slate-editor .slate-list-item.slate-list-unordered[data-indent="2"] .slate-list-bullet::before { content: "▪"; }
+.slate-editor .slate-list-item.slate-list-unordered[data-indent="3"] .slate-list-bullet::before { content: "▫"; }
+.slate-editor .slate-list-item.slate-list-unordered[data-indent="4"] .slate-list-bullet::before { content: "•"; }
+.slate-editor .slate-list-item.slate-list-unordered[data-indent="5"] .slate-list-bullet::before { content: "◦"; }
+
+/* Toolbar styles */
+.slate-editor .toolbar {
+  padding: 6px;
+  margin-bottom: 6px;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.slate-editor .toolbar-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.slate-editor .toolbar-button-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  padding: 2px;
+}
+
+.slate-editor .toolbar-dropdown-container {
+  display: inline-block;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  padding: 2px;
+}
+
+.slate-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;
+}
+
+.slate-editor .toolbar-dropdown-button:not(:disabled) {
+  background: transparent;
+}
+
+.slate-editor .toolbar-dropdown-button:not(:disabled):hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.slate-editor .toolbar-dropdown-button.active {
+  background: #ffffff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.slate-editor .toolbar-dropdown-button:disabled {
+  background: transparent;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.slate-editor .toolbar-dropdown-arrow {
+  margin-left: 5px;
+  flex-shrink: 0;
+}
+
+.slate-editor .toolbar-dropdown-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.slate-editor .toolbar-dropdown-icon {
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+/* Link styles */
+.slate-editor .slate-link {
+  cursor: pointer;
+  padding: 0 2px;
+  border-radius: 2px;
+}
+
+.slate-editor .slate-link.internal-link {
+  color: #008800;
+  background-color: rgba(0, 136, 0, 0.05);
+}
+
+.slate-editor .slate-link.external-link {
+  color: #0066cc;
+  background-color: rgba(0, 102, 204, 0.05);
+}
+
+/* Special mark styles */
+.slate-editor .extrabold {
+  font-weight: 800;
+  text-transform: uppercase;
+}