@alpaca-editor/core 1.0.4018 → 1.0.4027

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

@@ -0,0 +1,362 @@
+import React, { useCallback } from "react";
+import {
+  RichTextEditorProfile,
+  ToolbarGroupConfig,
+  ToolbarOptionConfig,
+  SLATE_MARKS,
+  SLATE_BLOCKS,
+  SLATE_ALIGNMENTS,
+} from "../types";
+import { SimpleToolbarButton } from "./SimpleToolbarButton";
+import { SimpleDropdown } from "./SimpleDropdown";
+
+interface SimpleToolbarProps {
+  profile: RichTextEditorProfile;
+  isMarkActive: (markId: string) => boolean;
+  isBlockActive: (blockId: string) => boolean;
+  isAlignActive: (alignment: string) => boolean;
+  isListActive: (listType: "unordered" | "ordered") => boolean;
+  toggleMark: (markId: string) => void;
+  toggleBlock: (blockId: string) => void;
+  toggleAlign: (alignment: string) => void;
+  toggleList: (listType: "unordered" | "ordered") => void;
+  stripFormatting: () => void;
+}
+
+interface ToolbarOption {
+  id: string;
+  type: string;
+  label: string;
+  icon: React.ReactNode;
+  isActive: boolean;
+  onSelect: () => void;
+}
+
+export const SimpleToolbar: React.FC<SimpleToolbarProps> = ({
+  profile,
+  isMarkActive,
+  isBlockActive,
+  isAlignActive,
+  isListActive,
+  toggleMark,
+  toggleBlock,
+  toggleAlign,
+  toggleList,
+  stripFormatting,
+}) => {
+  // Create toolbar option from configuration
+  const createToolbarOption = useCallback(
+    (option: ToolbarOptionConfig): ToolbarOption | null => {
+      switch (option.type) {
+        case "mark":
+          const markConfig = SLATE_MARKS[option.id];
+          if (markConfig) {
+            return {
+              id: option.id,
+              type: option.type,
+              label: markConfig.label,
+              icon: markConfig.icon,
+              isActive: isMarkActive(option.id),
+              onSelect: () => toggleMark(option.id),
+            };
+          }
+          return null;
+
+        case "block":
+          const blockConfig = SLATE_BLOCKS[option.id];
+          if (blockConfig) {
+            return {
+              id: option.id,
+              type: option.type,
+              label: blockConfig.label,
+              icon: blockConfig.icon,
+              isActive: isBlockActive(option.id),
+              onSelect: () => toggleBlock(option.id),
+            };
+          }
+          return null;
+
+        case "alignment":
+          const alignConfig = SLATE_ALIGNMENTS[option.id];
+          if (alignConfig) {
+            return {
+              id: option.id,
+              type: option.type,
+              label: alignConfig.label,
+              icon: alignConfig.icon,
+              isActive: isAlignActive(alignConfig.value),
+              onSelect: () => toggleAlign(alignConfig.value),
+            };
+          }
+          return null;
+
+        case "list":
+          const listType =
+            option.id === "unordered-list" ? "unordered" : "ordered";
+          return {
+            id: option.id,
+            type: option.type,
+            label:
+              option.id === "unordered-list"
+                ? "Bulleted List"
+                : "Numbered List",
+            icon: option.id === "unordered-list" ? "•" : "1.",
+            isActive: isListActive(listType),
+            onSelect: () => toggleList(listType),
+          };
+
+        case "divider":
+          return {
+            id: "divider",
+            type: "divider",
+            label: "Divider",
+            icon: null,
+            isActive: false,
+            onSelect: () => {},
+          };
+
+        case "strip":
+          return {
+            id: "strip-formatting",
+            type: "strip",
+            label: "Strip Formatting",
+            icon: "✗",
+            isActive: false,
+            onSelect: () => stripFormatting(),
+          };
+
+        default:
+          return null;
+      }
+    },
+    [
+      isMarkActive,
+      isBlockActive,
+      isAlignActive,
+      isListActive,
+      toggleMark,
+      toggleBlock,
+      toggleAlign,
+      toggleList,
+    ],
+  );
+
+  // Split options by dividers
+  const splitOptionsByDividers = (
+    options: ToolbarOption[],
+  ): ToolbarOption[][] => {
+    const groups: ToolbarOption[][] = [];
+    let currentGroup: ToolbarOption[] = [];
+
+    options.forEach((option) => {
+      if (option.type === "divider") {
+        if (currentGroup.length > 0) {
+          groups.push(currentGroup);
+          currentGroup = [];
+        }
+      } else {
+        currentGroup.push(option);
+      }
+    });
+
+    if (currentGroup.length > 0) {
+      groups.push(currentGroup);
+    }
+
+    return groups;
+  };
+
+  // Render a toolbar group
+  const renderToolbarGroup = (group: ToolbarGroupConfig, rowIndex: number) => {
+    if (!group.options || group.options.length === 0) return null;
+
+    // Create toolbar options from configuration
+    const validOptions = group.options
+      .map(createToolbarOption)
+      .filter((option): option is ToolbarOption => option !== null);
+
+    if (validOptions.length === 0) return null;
+
+    const groupKey = `${group.id}-${rowIndex}`;
+
+    // Render as buttons
+    if (group.display === "buttons" || !group.display) {
+      const subGroups = splitOptionsByDividers(validOptions);
+      return (
+        <div key={groupKey} className="toolbar-group">
+          {subGroups.map((subGroup, subGroupIndex) => (
+            <div
+              key={`subgroup-${subGroupIndex}`}
+              className="toolbar-button-group"
+            >
+              {subGroup.map((option) => (
+                <SimpleToolbarButton
+                  key={`${option.type}-${option.id}`}
+                  icon={option.icon}
+                  active={option.isActive}
+                  title={option.label}
+                  onMouseDown={(event: React.MouseEvent<HTMLButtonElement>) => {
+                    event.preventDefault();
+                    option.onSelect();
+                  }}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    // Render as dropdown
+    if (group.display === "dropdown") {
+      const blockOptions = validOptions.filter(
+        (option) => option.type === "block",
+      );
+
+      // If there's only one block option, render it as a disabled-style button
+      if (blockOptions.length === 1) {
+        const singleOption = blockOptions[0];
+        if (!singleOption) return null;
+        return (
+          <div key={groupKey} className="toolbar-group">
+            <div className="toolbar-dropdown-container">
+              <button className="toolbar-dropdown-button" disabled>
+                {group.label ? (
+                  <>
+                    <span className="toolbar-dropdown-content">
+                      {group.label}: {singleOption.label}
+                    </span>
+                    <span className="toolbar-dropdown-arrow">▼</span>
+                  </>
+                ) : group.showIconsOnly ? (
+                  <>
+                    <span className="toolbar-dropdown-icon">
+                      {singleOption.icon}
+                    </span>
+                    <span className="toolbar-dropdown-arrow">▼</span>
+                  </>
+                ) : (
+                  <>
+                    <span className="toolbar-dropdown-icon">
+                      {singleOption.icon && (
+                        <span className="toolbar-dropdown-icon">
+                          {singleOption.icon}
+                        </span>
+                      )}
+                      <span className="toolbar-dropdown-content">
+                        {singleOption.label}
+                      </span>
+                    </span>
+                    <span className="toolbar-dropdown-arrow">▼</span>
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        );
+      }
+
+      // Multiple options - render normally with dropdown
+      const isActive = validOptions.some((option) => option.isActive);
+      return (
+        <div key={groupKey} className="toolbar-group">
+          <div className="toolbar-dropdown-container">
+            <SimpleDropdown
+              options={validOptions}
+              label={group.label}
+              showIconsOnly={group.showIconsOnly}
+              isActive={isActive}
+              title={
+                group.label
+                  ? `${group.label} formatting options`
+                  : "Formatting options"
+              }
+            />
+          </div>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  if (!profile.toolbar?.groups || profile.toolbar.groups.length === 0) {
+    return null;
+  }
+
+  // Group toolbar items by row
+  const groupsByRow = profile.toolbar.groups.reduce(
+    (acc, group, index) => {
+      const row = group.row !== undefined ? group.row : index;
+      if (!acc[row]) acc[row] = [];
+      acc[row].push(group);
+      return acc;
+    },
+    {} as Record<number, typeof profile.toolbar.groups>,
+  );
+
+  // Create strip formatting option that's always available
+  const stripFormattingOption: ToolbarOption = {
+    id: "strip-formatting",
+    type: "strip",
+    label: "Strip Formatting",
+    icon: "✗",
+    isActive: false,
+    onSelect: () => stripFormatting(),
+  };
+
+  // Render each row
+  return (
+    <div className="toolbar">
+      {Object.entries(groupsByRow)
+        .sort(([a], [b]) => parseInt(a) - parseInt(b))
+        .map(([rowIndex, rowGroups]) => (
+          <div key={`row-${rowIndex}`} className="toolbar-row">
+            {rowGroups.map((group) =>
+              renderToolbarGroup(group, parseInt(rowIndex)),
+            )}
+            {/* Add strip formatting button to the first row */}
+            {parseInt(rowIndex) === 0 && (
+              <div className="toolbar-group">
+                <div className="toolbar-button-group">
+                  <SimpleToolbarButton
+                    key="strip-formatting"
+                    icon={stripFormattingOption.icon}
+                    active={stripFormattingOption.isActive}
+                    title={stripFormattingOption.label}
+                    onMouseDown={(
+                      event: React.MouseEvent<HTMLButtonElement>,
+                    ) => {
+                      event.preventDefault();
+                      stripFormattingOption.onSelect();
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+      {/* If no groups exist, still show strip formatting */}
+      {Object.keys(groupsByRow).length === 0 && (
+        <div className="toolbar-row">
+          <div className="toolbar-group">
+            <div className="toolbar-button-group">
+              <SimpleToolbarButton
+                key="strip-formatting"
+                icon={stripFormattingOption.icon}
+                active={stripFormattingOption.isActive}
+                title={stripFormattingOption.label}
+                onMouseDown={(event: React.MouseEvent<HTMLButtonElement>) => {
+                  event.preventDefault();
+                  stripFormattingOption.onSelect();
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SimpleToolbar;

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

@@ -0,0 +1,36 @@
+import React from "react";
+
+interface SimpleToolbarButtonProps {
+  icon: React.ReactNode;
+  active: boolean;
+  title?: string;
+  onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const SimpleToolbarButton: React.FC<SimpleToolbarButtonProps> = ({
+  icon,
+  active,
+  title,
+  onMouseDown,
+}) => {
+  return (
+    <button
+      className={`toolbar-button ${active ? "active" : ""}`}
+      onMouseDown={onMouseDown}
+      title={title}
+      style={{
+        padding: "5px 10px",
+        margin: "0 2px",
+        background: active ? "#ffffff" : "transparent",
+        border: "none",
+        borderRadius: "3px",
+        cursor: "pointer",
+        boxShadow: active ? "0 1px 2px rgba(0,0,0,0.1)" : "none",
+      }}
+    >
+      {icon}
+    </button>
+  );
+};
+
+export default SimpleToolbarButton;

package/src/editor/field-types/richtext/contextMenuFactory.tsx

@@ -0,0 +1,264 @@
+import { MenuItem } from "../../../config/types";
+import { Field } from "../../pageModel";
+import { EditContextType } from "../../client/editContext";
+import { getRichTextProfile } from "../../services/contentService";
+import { getCachedParsedProfile } from "./utils/profileServiceCache";
+import {
+  RichTextEditorProfile,
+  SLATE_MARKS,
+  SLATE_BLOCKS,
+  SLATE_ALIGNMENTS,
+  RichTextField,
+} from "./types";
+
+// Helper function to execute formatting commands on the contentEditable element in iframe
+function executeFormatCommand(
+  command: string,
+  iframeDocument: Document,
+  value?: string,
+): boolean {
+  try {
+    // Focus the contentEditable element first
+    const activeElement = iframeDocument.activeElement;
+    if (
+      activeElement &&
+      (activeElement as HTMLElement).contentEditable === "true"
+    ) {
+      (activeElement as HTMLElement).focus();
+    }
+
+    // Execute the command on the iframe document
+    console.log("Executing command:", command, value);
+    return iframeDocument.execCommand(command, false, value);
+  } catch (error) {
+    console.error(`Failed to execute command: ${command}`, error);
+    return false;
+  }
+}
+
+// Helper function to get the current contentEditable element for this field in iframe
+function getFieldEditableElement(
+  fieldId: string,
+  iframeDocument: Document,
+): HTMLElement | null {
+  // Look for the contentEditable element with the matching field ID in iframe
+  const element = iframeDocument.querySelector(
+    `[data-fieldid="${fieldId}"][contenteditable="true"]`,
+  ) as HTMLElement;
+  return element;
+}
+
+// Trigger a save by calling the editContext operations directly
+// Wait for DOM to update before reading content to avoid race conditions
+async function triggerSave(
+  element: HTMLElement,
+  field: Field,
+  editContext: EditContextType,
+): Promise<void> {
+  try {
+    // Wait for DOM updates to complete before reading content
+    await new Promise((resolve) => {
+      // Use a shorter delay - just enough for execCommand to complete
+      setTimeout(resolve, 50);
+    });
+
+    const isRichText = element.getAttribute("data-is-richtext") === "true";
+    const value = isRichText ? element.innerHTML : element.innerText;
+
+    await editContext.operations.editField({
+      field: field.descriptor,
+      value: value,
+      refresh: "none",
+    });
+  } catch (error) {
+    console.error("Failed to save field value:", error);
+  }
+}
+
+export async function createRichTextContextMenu(
+  field: Field,
+  editContext: EditContextType,
+): Promise<MenuItem[]> {
+  const richTextField = field as RichTextField;
+  const profilePath = richTextField.customProperties?.profile;
+
+  if (!profilePath) {
+    return [];
+  }
+
+  // Get the iframe document
+  const iframeDocument =
+    editContext.pageView?.editorIframeRef?.current?.contentWindow?.document;
+  if (!iframeDocument) {
+    console.error("Could not find iframe document for rich text editing");
+    return [];
+  }
+
+  try {
+    // Get the rich text profile using the cached parsed profile
+    const profile: RichTextEditorProfile | null = await getCachedParsedProfile(
+      profilePath,
+      getRichTextProfile,
+    );
+
+    if (!profile?.toolbar?.groups) {
+      return [];
+    }
+
+    // Create format submenu items based on the profile
+    const formatMenuItems: MenuItem[] = [];
+
+    // Process each toolbar group to extract formatting options
+    for (const group of profile.toolbar.groups) {
+      if (group.options && group.options.length > 0) {
+        // Collect valid items for this group first
+        const groupItems: MenuItem[] = [];
+
+        // Process each option in the group
+        for (const option of group.options) {
+          let menuItem: MenuItem | null = null;
+
+          switch (option.type) {
+            case "mark":
+              const markConfig = SLATE_MARKS[option.id];
+              if (markConfig) {
+                let command = "";
+                // Only support specific formatting commands
+                switch (option.id) {
+                  case "bold":
+                    command = "bold";
+                    break;
+                  case "italic":
+                    command = "italic";
+                    break;
+                  case "underline":
+                    command = "underline";
+                    break;
+                  case "strikethrough":
+                    command = "strikeThrough";
+                    break;
+                  case "subscript":
+                    command = "subscript";
+                    break;
+                  case "superscript":
+                    command = "superscript";
+                    break;
+                  default:
+                    // Skip unsupported commands
+                    continue;
+                }
+
+                menuItem = {
+                  id: `format-mark-${option.id}`,
+                  label: markConfig.label,
+                  icon: (
+                    <span
+                      style={{ fontFamily: "monospace", fontWeight: "bold" }}
+                    >
+                      {markConfig.icon}
+                    </span>
+                  ),
+                  command: async () => {
+                    try {
+                      const element = getFieldEditableElement(
+                        field.id,
+                        iframeDocument,
+                      );
+                      if (element) {
+                        element.focus();
+                        const success = executeFormatCommand(
+                          command,
+                          iframeDocument,
+                        );
+                        if (success) {
+                          await triggerSave(element, field, editContext);
+                        }
+                      }
+                    } catch (error) {
+                      console.error(
+                        `Failed to apply mark formatting: ${option.id}`,
+                        error,
+                      );
+                    }
+                  },
+                };
+              }
+              break;
+
+            // Block, alignment, and list formatting not supported
+            case "block":
+            case "alignment":
+            case "list":
+              // Skip unsupported formatting types
+              continue;
+          }
+
+          if (menuItem) {
+            groupItems.push(menuItem);
+          }
+        }
+
+        // Only add group items if we have any valid items for this group
+        if (groupItems.length > 0) {
+          // Add separator if we already have items from previous groups
+          if (formatMenuItems.length > 0) {
+            formatMenuItems.push({
+              id: `${group.id}-separator`,
+              separator: true,
+            });
+          }
+
+          // Add all valid items from this group
+          formatMenuItems.push(...groupItems);
+        }
+      }
+    }
+
+    // Build the context menu items
+    const menuItems: MenuItem[] = [];
+
+    // Add the Format submenu if we have any items
+    if (formatMenuItems.length > 0) {
+      menuItems.push({
+        id: "format-submenu",
+        label: "Format",
+        icon: (
+          <span style={{ fontFamily: "monospace", fontWeight: "bold" }}>
+            F
+          </span>
+        ),
+        items: formatMenuItems,
+      });
+    }
+
+    // Add Strip Formatting command
+    menuItems.push({
+      id: "strip-formatting",
+      label: "Strip Formatting",
+      icon: (
+        <span style={{ fontFamily: "monospace", fontWeight: "bold" }}>
+          ✗
+        </span>
+      ),
+      command: async () => {
+        try {
+          const element = getFieldEditableElement(field.id, iframeDocument);
+          if (element) {
+            element.focus();
+            const success = executeFormatCommand("removeFormat", iframeDocument);
+            if (success) {
+              await triggerSave(element, field, editContext);
+            }
+          }
+        } catch (error) {
+          console.error("Failed to strip formatting:", error);
+        }
+      },
+    });
+
+    return menuItems;
+  } catch (error) {
+    console.error("Error creating RichText context menu:", error);
+    return [];
+  }
+}

package/src/editor/field-types/richtext/index.ts

@@ -1,5 +1,6 @@
-export * from './components/ReactSlate';
-export * from './types';
-export * from './utils/profileServiceCache';
-export * from './hooks/useProfileCache';
-export * from './hooks/useRichTextProfile';
+export * from "./components/ReactSlate";
+export * from "./components/SimpleRichTextEditor";
+export * from "./types";
+export * from "./utils/profileServiceCache";
+export * from "./hooks/useProfileCache";
+export * from "./hooks/useRichTextProfile";