@codella-software/react 2.1.0 → 2.2.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, createContext, useContext, useCallback } from "react";
+import { useState, useEffect, useMemo, createContext, useContext, useCallback, useRef } from "react";
 import { TableBuilder } from "@codella/core";
 import { jsx } from "react/jsx-runtime";
 import { fromEvent, Observable as Observable$1, of, EMPTY, Subject as Subject$1, BehaviorSubject, timer } from "rxjs";
@@ -1629,6 +1629,782 @@ const useLiveUpdates = (eventName) => {
   }, [eventName, service]);
   return { data, error };
 };
+class ContentModel {
+  constructor(doc) {
+    this.document = doc || this.createEmptyDocument();
+  }
+  /**
+   * Create empty document with single empty paragraph
+   */
+  static createEmpty() {
+    return {
+      type: "document",
+      version: "1.0",
+      children: [
+        {
+          type: "paragraph",
+          children: [{ type: "text", text: "" }]
+        }
+      ]
+    };
+  }
+  /**
+   * Get the current document
+   */
+  getDocument() {
+    return JSON.parse(JSON.stringify(this.document));
+  }
+  /**
+   * Replace entire document
+   */
+  setDocument(doc) {
+    this.document = JSON.parse(JSON.stringify(doc));
+  }
+  /**
+   * Get all text content as plain string
+   */
+  getPlainText() {
+    let text = "";
+    const traverse = (node) => {
+      if (node.type === "text") {
+        text += node.text;
+      } else if ("children" in node) {
+        node.children.forEach(traverse);
+      } else if (node.type === "image") {
+        text += "[Image]";
+      } else if (node.type === "mention") {
+        text += `@${node.label}`;
+      }
+    };
+    this.document.children.forEach(traverse);
+    return text;
+  }
+  /**
+   * Insert text at selection/cursor position
+   */
+  insertText(text, marks) {
+    const doc = this.cloneDocument();
+    const firstPara = this.getFirstParagraph(doc);
+    if (firstPara && firstPara.children.length > 0) {
+      const firstChild = firstPara.children[0];
+      if (firstChild.type === "text") {
+        firstChild.text += text;
+        if (marks) {
+          firstChild.marks = marks;
+        }
+      }
+    }
+    return doc;
+  }
+  /**
+   * Insert a paragraph at the end
+   */
+  insertParagraph(content) {
+    const doc = this.cloneDocument();
+    doc.children.push({
+      type: "paragraph",
+      children: content || [{ type: "text", text: "" }]
+    });
+    return doc;
+  }
+  /**
+   * Insert heading
+   */
+  insertHeading(level, content) {
+    const doc = this.cloneDocument();
+    doc.children.push({
+      type: "heading",
+      level,
+      children: content || [{ type: "text", text: "" }]
+    });
+    return doc;
+  }
+  /**
+   * Insert image
+   */
+  insertImage(url, attrs) {
+    const doc = this.cloneDocument();
+    const lastBlock = doc.children[doc.children.length - 1];
+    if ((attrs == null ? void 0 : attrs.display) === "block") {
+      doc.children.push({
+        type: "paragraph",
+        children: [
+          {
+            type: "image",
+            url,
+            attrs: attrs || {}
+          }
+        ]
+      });
+    } else {
+      if (lastBlock && lastBlock.type === "paragraph") {
+        lastBlock.children.push({
+          type: "image",
+          url,
+          attrs: attrs || {}
+        });
+      } else {
+        doc.children.push({
+          type: "paragraph",
+          children: [
+            {
+              type: "image",
+              url,
+              attrs: attrs || {}
+            }
+          ]
+        });
+      }
+    }
+    return doc;
+  }
+  /**
+   * Insert mention
+   */
+  insertMention(id, label, meta) {
+    const doc = this.cloneDocument();
+    const lastBlock = doc.children[doc.children.length - 1];
+    if (lastBlock && lastBlock.type === "paragraph") {
+      lastBlock.children.push({
+        type: "mention",
+        id,
+        label,
+        meta
+      });
+    }
+    return doc;
+  }
+  /**
+   * Insert list
+   */
+  insertList(listType, items = [[]]) {
+    const doc = this.cloneDocument();
+    const children = items.map((item) => ({
+      type: "list-item",
+      children: item || [{ type: "text", text: "" }],
+      depth: 0
+    }));
+    doc.children.push({
+      type: "list",
+      listType,
+      children
+    });
+    return doc;
+  }
+  /**
+   * Toggle a mark type on text in a range
+   */
+  toggleMark(mark, selection) {
+    var _a;
+    const doc = this.cloneDocument();
+    const firstPara = this.getFirstParagraph(doc);
+    if (firstPara && ((_a = firstPara.children[0]) == null ? void 0 : _a.type) === "text") {
+      const textNode = firstPara.children[0];
+      if (!textNode.marks) {
+        textNode.marks = [];
+      }
+      const existingMark = textNode.marks.findIndex((m) => m.type === mark);
+      if (existingMark >= 0) {
+        textNode.marks.splice(existingMark, 1);
+      } else {
+        textNode.marks.push({ type: mark });
+      }
+    }
+    return doc;
+  }
+  /**
+   * Check if a mark type is active at cursor
+   */
+  isMarkActive(mark) {
+    var _a, _b;
+    const firstPara = this.getFirstParagraph(this.document);
+    if (((_a = firstPara == null ? void 0 : firstPara.children[0]) == null ? void 0 : _a.type) === "text") {
+      const textNode = firstPara.children[0];
+      return ((_b = textNode.marks) == null ? void 0 : _b.some((m) => m.type === mark)) || false;
+    }
+    return false;
+  }
+  /**
+   * Get active marks at cursor
+   */
+  getActiveMarks() {
+    var _a, _b;
+    const firstPara = this.getFirstParagraph(this.document);
+    if (((_a = firstPara == null ? void 0 : firstPara.children[0]) == null ? void 0 : _a.type) === "text") {
+      const textNode = firstPara.children[0];
+      return ((_b = textNode.marks) == null ? void 0 : _b.map((m) => m.type)) || [];
+    }
+    return [];
+  }
+  /**
+   * Delete content (simplified - deletes last block)
+   */
+  deleteContent(selection) {
+    const doc = this.cloneDocument();
+    if (doc.children.length > 1) {
+      doc.children.pop();
+    } else if (doc.children.length === 1 && doc.children[0].type === "paragraph") {
+      doc.children[0].children = [{ type: "text", text: "" }];
+    }
+    return doc;
+  }
+  /**
+   * Replace entire content
+   */
+  replaceContent(nodes) {
+    const doc = this.cloneDocument();
+    doc.children = nodes;
+    return doc;
+  }
+  /**
+   * Clone document (deep copy)
+   */
+  cloneDocument() {
+    return JSON.parse(JSON.stringify(this.document));
+  }
+  /**
+   * Get first paragraph in document
+   */
+  getFirstParagraph(doc) {
+    for (const block of doc.children) {
+      if (block.type === "paragraph") {
+        return block;
+      }
+    }
+    return null;
+  }
+  /**
+   * Find node by predicate
+   */
+  findNode(predicate) {
+    const search = (node) => {
+      if (predicate(node)) {
+        return node;
+      }
+      if ("children" in node) {
+        for (const child of node.children) {
+          const result = search(child);
+          if (result) return result;
+        }
+      }
+      return null;
+    };
+    for (const child of this.document.children) {
+      const result = search(child);
+      if (result) return result;
+    }
+    return null;
+  }
+  /**
+   * Count all nodes of a type
+   */
+  countNodes(type) {
+    let count = 0;
+    const traverse = (node) => {
+      if (node.type === type) count++;
+      if ("children" in node) {
+        node.children.forEach(traverse);
+      }
+    };
+    this.document.children.forEach(traverse);
+    return count;
+  }
+  createEmptyDocument() {
+    return ContentModel.createEmpty();
+  }
+}
+class RichContentService {
+  constructor(config2 = {}) {
+    this.history = [];
+    this.historyIndex = -1;
+    this.adapter = null;
+    this.defaultImageHandler = async (file) => {
+      return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          var _a;
+          resolve({ url: (_a = e.target) == null ? void 0 : _a.result });
+        };
+        reader.readAsDataURL(file);
+      });
+    };
+    this.config = {
+      initialContent: config2.initialContent || ContentModel.createEmpty(),
+      allowedMarks: config2.allowedMarks || [
+        "bold",
+        "italic",
+        "underline",
+        "strikethrough",
+        "code"
+      ],
+      allowedBlocks: config2.allowedBlocks || [
+        "document",
+        "paragraph",
+        "heading",
+        "list",
+        "blockquote",
+        "code-block",
+        "horizontal-rule"
+      ],
+      maxListDepth: config2.maxListDepth ?? 3,
+      imageUploadHandler: config2.imageUploadHandler || this.defaultImageHandler,
+      mentionProvider: config2.mentionProvider || (() => Promise.resolve([])),
+      middleware: config2.middleware || {},
+      enableHistory: config2.enableHistory ?? true,
+      maxHistorySteps: config2.maxHistorySteps ?? 100,
+      placeholder: config2.placeholder || "",
+      readOnly: config2.readOnly ?? false
+    };
+    this.middleware = this.config.middleware;
+    this.contentModel = new ContentModel(this.config.initialContent);
+    this.contentSubject = new BehaviorSubject(
+      this.contentModel.getDocument()
+    );
+    this.commandSubject = new Subject$1();
+    this.mentionSubject = new Subject$1();
+    this.stateSubject = new BehaviorSubject({
+      content: this.contentModel.getDocument(),
+      selection: null,
+      canUndo: false,
+      canRedo: false,
+      isFocused: false,
+      isDirty: false,
+      mentions: {
+        isActive: false,
+        query: "",
+        position: { x: 0, y: 0 }
+      },
+      selectedFormats: /* @__PURE__ */ new Set()
+    });
+    if (this.config.enableHistory) {
+      this.history.push({
+        content: this.contentModel.getDocument(),
+        timestamp: Date.now()
+      });
+      this.historyIndex = 0;
+    }
+    this.commandSubject.subscribe((cmd) => this.executeCommand(cmd));
+  }
+  /**
+   * Create service from empty state
+   */
+  static create(config2) {
+    return new RichContentService(config2);
+  }
+  // =========================================================================
+  // PUBLIC OBSERVABLES
+  // =========================================================================
+  /**
+   * Get content$ observable
+   */
+  getContent$() {
+    return this.contentSubject.asObservable();
+  }
+  /**
+   * Get full state$ observable
+   */
+  getState$() {
+    return this.stateSubject.asObservable();
+  }
+  /**
+   * Get canUndo$ observable
+   */
+  getCanUndo$() {
+    return this.stateSubject.pipe(
+      map((s) => s.canUndo),
+      distinctUntilChanged()
+    );
+  }
+  /**
+   * Get canRedo$ observable
+   */
+  getCanRedo$() {
+    return this.stateSubject.pipe(
+      map((s) => s.canRedo),
+      distinctUntilChanged()
+    );
+  }
+  /**
+   * Get isFocused$ observable
+   */
+  getIsFocused$() {
+    return this.stateSubject.pipe(
+      map((s) => s.isFocused),
+      distinctUntilChanged()
+    );
+  }
+  /**
+   * Get mentions$ observable - for autocomplete dropdown
+   */
+  getMentions$() {
+    return this.mentionSubject.asObservable();
+  }
+  /**
+   * Get selectedFormats$ observable
+   */
+  getSelectedFormats$() {
+    return this.stateSubject.pipe(
+      map((s) => s.selectedFormats || /* @__PURE__ */ new Set()),
+      distinctUntilChanged()
+    );
+  }
+  // =========================================================================
+  // STATE GETTERS
+  // =========================================================================
+  getContent() {
+    return this.contentSubject.getValue();
+  }
+  getState() {
+    return this.stateSubject.getValue();
+  }
+  getPlainText() {
+    return this.contentModel.getPlainText();
+  }
+  canUndo() {
+    return this.historyIndex > 0;
+  }
+  canRedo() {
+    return this.historyIndex < this.history.length - 1;
+  }
+  isFocused() {
+    return this.getState().isFocused;
+  }
+  // =========================================================================
+  // ADAPTER MANAGEMENT
+  // =========================================================================
+  /**
+   * Attach DOM adapter for contentEditable syncing
+   */
+  attachAdapter(adapter) {
+    this.adapter = adapter;
+    const docFromDom = adapter.syncFromDOM();
+    this.setContent(docFromDom);
+  }
+  /**
+   * Detach adapter
+   */
+  detachAdapter() {
+    if (this.adapter) {
+      this.adapter.unmount();
+      this.adapter = null;
+    }
+  }
+  /**
+   * Get attached adapter
+   */
+  getAdapter() {
+    return this.adapter;
+  }
+  // =========================================================================
+  // COMMAND EXECUTION
+  // =========================================================================
+  /**
+   * Execute a command
+   */
+  execute(command, payload) {
+    const cmd = typeof command === "string" ? { type: command, payload } : command;
+    this.commandSubject.next(cmd);
+  }
+  /**
+   * Execute text insertion
+   */
+  insertText(text, marks) {
+    this.execute("insertText", { text, marks });
+  }
+  /**
+   * Execute paragraph insertion
+   */
+  insertParagraph() {
+    this.execute("insertParagraph");
+  }
+  /**
+   * Execute heading insertion
+   */
+  insertHeading(level) {
+    this.execute("insertHeading", { level });
+  }
+  /**
+   * Execute image insertion
+   */
+  insertImage(url, attrs) {
+    this.execute("insertImage", { url, attrs });
+  }
+  /**
+   * Execute image upload
+   */
+  async uploadImage(file) {
+    try {
+      const result = await this.config.imageUploadHandler(file);
+      this.insertImage(result.url, result.attrs);
+    } catch (error) {
+      console.error("Image upload failed:", error);
+      throw error;
+    }
+  }
+  /**
+   * Execute mention insertion
+   */
+  insertMention(id, label, meta) {
+    this.execute("insertMention", { id, label, meta });
+  }
+  /**
+   * Execute list insertion
+   */
+  insertList(listType) {
+    this.execute("insertList", { listType });
+  }
+  /**
+   * Execute mark toggle (bold, italic, etc.)
+   */
+  toggleMark(mark) {
+    this.execute("toggleMark", { mark });
+  }
+  /**
+   * Delete content
+   */
+  deleteContent() {
+    this.execute("deleteContent");
+  }
+  /**
+   * Set focus state
+   */
+  setFocus(focused) {
+    const state = this.getState();
+    state.isFocused = focused;
+    this.stateSubject.next(state);
+  }
+  /**
+   * Set selection
+   */
+  setSelection(selection) {
+    const state = this.getState();
+    state.selection = selection;
+    this.stateSubject.next(state);
+  }
+  /**
+   * Set mention query (triggers autocomplete)
+   */
+  setMentionQuery(query, position) {
+    if (query.length > 0) {
+      this.mentionSubject.next({ query, position });
+    }
+  }
+  // =========================================================================
+  // HISTORY (UNDO/REDO)
+  // =========================================================================
+  /**
+   * Undo to previous state
+   */
+  undo() {
+    if (this.canUndo()) {
+      this.historyIndex--;
+      this.applyHistoryState();
+    }
+  }
+  /**
+   * Redo to next state
+   */
+  redo() {
+    if (this.canRedo()) {
+      this.historyIndex++;
+      this.applyHistoryState();
+    }
+  }
+  /**
+   * Clear history
+   */
+  clearHistory() {
+    this.history = [{ content: this.getContent(), timestamp: Date.now() }];
+    this.historyIndex = 0;
+    this.updateHistoryState();
+  }
+  // =========================================================================
+  // PRIVATE METHODS
+  // =========================================================================
+  executeCommand(cmd) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+    if (this.config.readOnly) {
+      console.warn("Editor is in read-only mode");
+      return;
+    }
+    this.getContent();
+    let newContent;
+    switch (cmd.type) {
+      case "insertText":
+        newContent = this.contentModel.insertText((_a = cmd.payload) == null ? void 0 : _a.text, (_b = cmd.payload) == null ? void 0 : _b.marks);
+        break;
+      case "insertParagraph":
+        newContent = this.contentModel.insertParagraph((_c = cmd.payload) == null ? void 0 : _c.children);
+        break;
+      case "insertHeading":
+        newContent = this.contentModel.insertHeading(
+          ((_d = cmd.payload) == null ? void 0 : _d.level) || 1,
+          (_e = cmd.payload) == null ? void 0 : _e.children
+        );
+        break;
+      case "insertImage":
+        newContent = this.contentModel.insertImage((_f = cmd.payload) == null ? void 0 : _f.url, (_g = cmd.payload) == null ? void 0 : _g.attrs);
+        break;
+      case "insertMention":
+        newContent = this.contentModel.insertMention(
+          (_h = cmd.payload) == null ? void 0 : _h.id,
+          (_i = cmd.payload) == null ? void 0 : _i.label,
+          (_j = cmd.payload) == null ? void 0 : _j.meta
+        );
+        break;
+      case "insertList":
+        newContent = this.contentModel.insertList((_k = cmd.payload) == null ? void 0 : _k.listType, (_l = cmd.payload) == null ? void 0 : _l.items);
+        break;
+      case "toggleMark":
+        newContent = this.contentModel.toggleMark((_m = cmd.payload) == null ? void 0 : _m.mark, (_n = cmd.payload) == null ? void 0 : _n.selection);
+        break;
+      case "deleteContent":
+        newContent = this.contentModel.deleteContent((_o = cmd.payload) == null ? void 0 : _o.selection);
+        break;
+      case "replaceContent":
+        newContent = this.contentModel.replaceContent((_p = cmd.payload) == null ? void 0 : _p.nodes);
+        break;
+      default:
+        console.warn(`Unknown command type: ${cmd.type}`);
+        return;
+    }
+    if (this.config.enableHistory) {
+      this.history = this.history.slice(0, this.historyIndex + 1);
+      this.history.push({
+        content: newContent,
+        timestamp: Date.now()
+      });
+      if (this.history.length > this.config.maxHistorySteps) {
+        this.history.shift();
+      } else {
+        this.historyIndex++;
+      }
+    }
+    this.setContent(newContent);
+  }
+  setContent(doc) {
+    this.contentModel.setDocument(doc);
+    this.contentSubject.next(doc);
+    const state = this.getState();
+    state.content = doc;
+    state.isDirty = true;
+    state.selectedFormats = new Set(this.contentModel.getActiveMarks());
+    this.stateSubject.next(state);
+    if (this.adapter) {
+      this.adapter.syncToDOM(doc);
+    }
+    this.updateHistoryState();
+  }
+  applyHistoryState() {
+    const entry = this.history[this.historyIndex];
+    this.contentModel.setDocument(entry.content);
+    this.contentSubject.next(entry.content);
+    const state = this.getState();
+    state.content = entry.content;
+    this.stateSubject.next(state);
+    if (this.adapter) {
+      this.adapter.syncToDOM(entry.content);
+    }
+    this.updateHistoryState();
+  }
+  updateHistoryState() {
+    const state = this.getState();
+    state.canUndo = this.canUndo();
+    state.canRedo = this.canRedo();
+    this.stateSubject.next(state);
+  }
+}
+function useRichContent(options = {}) {
+  const service = useMemo(() => RichContentService.create(options), []);
+  const [content, setContent] = useState(service.getContent());
+  const [state, setState] = useState(service.getState());
+  const [isFocused, setIsFocused] = useState(false);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const [selectedFormats, setSelectedFormats] = useState(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    const contentSub = service.getContent$().subscribe(setContent);
+    const stateSub = service.getState$().subscribe((newState) => {
+      setState(newState);
+      setIsFocused(newState.isFocused);
+      setCanUndo(newState.canUndo);
+      setCanRedo(newState.canRedo);
+      setSelectedFormats(newState.selectedFormats || /* @__PURE__ */ new Set());
+    });
+    return () => {
+      contentSub.unsubscribe();
+      stateSub.unsubscribe();
+    };
+  }, [service]);
+  useEffect(() => {
+    if (options.adapter) {
+      service.attachAdapter(options.adapter);
+      return () => service.detachAdapter();
+    }
+  }, [options.adapter, service]);
+  const defaultAdapterRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    if (((_a = options.editorRef) == null ? void 0 : _a.current) && !options.adapter && !defaultAdapterRef.current) {
+      const { DefaultContentEditableAdapter } = require("@codella/core/rich-content");
+      const adapter = new DefaultContentEditableAdapter();
+      adapter.mount(options.editorRef.current);
+      service.attachAdapter(adapter);
+      defaultAdapterRef.current = adapter;
+      return () => {
+        adapter.unmount();
+        service.detachAdapter();
+        defaultAdapterRef.current = null;
+      };
+    }
+  }, [options.editorRef, options.adapter, service]);
+  const insertText = useCallback((text) => service.insertText(text), [service]);
+  const insertParagraph = useCallback(() => service.insertParagraph(), [service]);
+  const insertHeading = useCallback((level) => service.insertHeading(level), [service]);
+  const insertImage = useCallback((url) => service.insertImage(url), [service]);
+  const uploadImage = useCallback((file) => service.uploadImage(file), [service]);
+  const insertMention = useCallback((id, label) => service.insertMention(id, label), [service]);
+  const insertList = useCallback((type) => service.insertList(type), [service]);
+  const toggleMark = useCallback((mark) => service.toggleMark(mark), [service]);
+  const deleteContent = useCallback(() => service.deleteContent(), [service]);
+  const undo = useCallback(() => service.undo(), [service]);
+  const redo = useCallback(() => service.redo(), [service]);
+  const clearHistory = useCallback(() => service.clearHistory(), [service]);
+  const focus = useCallback(() => {
+    var _a;
+    return (_a = service.getAdapter()) == null ? void 0 : _a.focus();
+  }, [service]);
+  const setFocus = useCallback((focused) => service.setFocus(focused), [service]);
+  const getPlainText = useCallback(() => service.getPlainText(), [service]);
+  const setSelection = useCallback((sel) => service.setSelection(sel), [service]);
+  return {
+    service,
+    content,
+    state,
+    isFocused,
+    canUndo,
+    canRedo,
+    selectedFormats,
+    selection: state.selection || null,
+    isDirty: state.isDirty,
+    insertText,
+    insertParagraph,
+    insertHeading,
+    insertImage,
+    uploadImage,
+    insertMention,
+    insertList,
+    toggleMark,
+    deleteContent,
+    undo,
+    redo,
+    clearHistory,
+    focus,
+    setFocus,
+    getPlainText,
+    setSelection
+  };
+}
 function useTableService(options) {
   const { config: config2, data } = options;
   const builder = useMemo(() => {
@@ -1992,6 +2768,7 @@ export {
   useLiveUpdateContext,
   useLiveUpdateListener,
   useLiveUpdates,
+  useRichContent,
   useSetActiveTab,
   useTabChange,
   useTableService,