@collabchron/notiq 0.2.0 → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Chinonso Chikelue (fluantiX)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,71 +1,262 @@
-# Notiq
+<div align="center">
+  <img src="public/logo.png" alt="Notiq Logo" width="120" />
+  <h1>Notiq</h1>
+  <p>
+    <strong>A powerful, AI-enhanced rich text editor built with Lexical, Next.js, TypeScript, and Tailwind CSS.</strong>
+  </p>
+  <p>
+    Create beautiful documents with intelligent writing assistance and advanced content blocks.
+  </p>
+</div>
 
-A modern, extensible note-taking and document editor built with Next.js, TypeScript, Tailwind CSS, and Lexical. Features include rich text editing, image and media embeds, equations, polls, and more.
+![Notiq Banner](public/og-image.png)
 
-## Features
+## 📸 Screenshots
 
-- ⚡️ Fast, responsive editor powered by Lexical
-- 🖼️ Image, inline image, and media embeds (YouTube, Twitter, Figma, GIFs)
-- 🧮 Equation and math support (KaTeX)
-- 📊 Polls, tables, and code blocks
-- 🎨 Customizable themes with Tailwind CSS
-- 🗂️ Modular plugin architecture
-- 🌐 Next.js app with API routes
+<div align="center">
+  <h3>Desktop View</h3>
+  <img src="public/screenshots/desktop.png" alt="Desktop Screenshot" width="100%" />
+</div>
 
-## Getting Started
+<div align="center">
+  <h3>Mobile View</h3>
+  <img src="public/screenshots/mobile.png" alt="Mobile Screenshot" width="300" />
+</div>
 
-### Prerequisites
+## ✨ Features
 
-- Node.js (v18+ recommended)
-- pnpm (or npm/yarn)
+### 🤖 AI-Powered Writing Assistant
+- **Smart Writing**: GPT-4 integration for content improvement, grammar fixes, and style adjustments
+- **AI Chat**: Ask questions about your document content and get contextual responses
+- **Auto-completion**: Intelligent text suggestions and completions
+- **Content Enhancement**: Make text longer/shorter, create step-by-step guides, simplify language
+
+### ✏️ Rich Text Editor
+- **Lexical Framework**: Built on Facebook's modern Lexical editor framework
+- **WYSIWYG Editing**: What-you-see-is-what-you-get editing experience
+- **Markdown Support**: Full markdown shortcuts and live transformers
+- **Slash Commands**: Type "/" for quick content insertion and formatting
+- **Floating Toolbars**: Context-sensitive formatting tools
+
+### 🧩 Advanced Content Blocks
+- **Media**: Images, inline images, YouTube videos, Twitter embeds
+- **Interactive**: Polls, step-by-step guides, collapsible sections
+- **Technical**: Code blocks with syntax highlighting, mathematical equations (KaTeX)
+- **Design**: Excalidraw drawings, Figma embeds
+- **Layout**: Multi-column layouts, resizable panels, tables
+- **Callouts**: Hint blocks and special callout sections
+
+### 🎨 User Experience
+- **Drag & Drop**: Draggable blocks and content reordering
+- **Speech-to-Text**: Voice input capabilities
+- **Link Previews**: Rich link previews with metadata
+- **Theme Support**: Dark/light mode with seamless switching
+- **Keyboard Shortcuts**: Comprehensive shortcut system
+- **Real-time Collaboration**: Shared editing context
+
+## 🚀 Library Usage
+
+Notiq can be used as a standalone editor in your React/Next.js projects.
 
 ### Installation
 
 ```bash
+npm install @collabchron/notiq
+```
+
+### Integration
+
+#### 1. Configure Tailwind CSS
+
+Add the Notiq plugin to your `tailwind.config.js`:
+
+```javascript
+import { notiqPlugin } from '@collabchron/notiq';
+
+export default {
+  content: [
+    // ... your content paths
+    "./node_modules/@collabchron/notiq/dist/**/*.{js,mjs}",
+  ],
+  plugins: [
+    notiqPlugin,
+    require('@tailwindcss/typography'),
+  ],
+}
+```
+
+#### 2. Usage in your component
+
+```tsx
+"use client";
+
+import { Editor } from "@collabchron/notiq";
+
+export default function MyEditorPage() {
+  return (
+    <Editor 
+      isEditable={true}
+      aiConfig={{
+        apiEndpoint: "/api/ai", // Your AI completion endpoint
+      }}
+      uploadConfig={{
+        uploadHandler: async (file) => {
+          // Your custom upload logic (e.g., S3, Cloudinary)
+          return { url: "https://your-storage.com/file.png" };
+        }
+      }}
+    />
+  );
+}
+```
+
+## 🛠️ Local Development
+
+If you want to contribute or run the development environment:
+
+### Installation
+
+```bash
+npm install
+
+# or
+
+yarn install
+
+# or
+
 pnpm install
 ```
 
+### Environment Setup
+
+Create a `.env.local` file with your API keys:
+
+```env
+OPENAI_API_KEY=your_openai_api_key_here
+
+NEXT_PUBLIC_EDGESTORE_ACCESS_KEY=your_edgestore_key
+
+NEXT_PUBLIC_EDGESTORE_SECRET_KEY=your_edgestore_secret
+```
+
 ### Development
 
 ```bash
+npm run dev
+
+# or
+
+yarn dev
+
+# or
+
 pnpm dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) in your browser.
+Open [http://localhost:3000](http://localhost:3000) to start writing!
 
-### Build
+## 🏗️ Architecture
 
-```bash
-pnpm build
+### Core Components
+
+- **Editor Core** (`/src/components/editor/Core.tsx`) - Main editor container with Lexical integration
+- **Plugins** (`/src/components/editor/plugins/`) - 40+ feature plugins for rich functionality
+- **Nodes** (`/src/components/editor/nodes/`) - 20+ custom content block types
+- **AI Integration** (`/src/components/ui/ai/`) - AI-powered writing assistance
+- **Toolbar System** - Rich formatting toolbar with contextual actions
+
+### Plugin System
+
+Notiq uses an extensible plugin architecture:
+
+```tsx
+import { Editor } from '@/components/editor'
+
+function MyApp() {
+  return (
+    <Editor
+      plugins={[
+        // Built-in plugins
+        'toolbar',
+        'slash-commands',
+        'ai-assistant',
+        'drag-drop',
+        // Custom plugins
+        MyCustomPlugin
+      ]}
+    />
+  )
+}
 ```
 
-## Project Structure
+## 🎯 Use Cases
+
+- **Documentation**: Technical docs, API references, user guides
+- **Content Creation**: Blog posts, articles, marketing content
+- **Note-taking**: Personal notes, meeting minutes, research
+- **Collaborative Writing**: Team documents, shared knowledge bases
+- **Educational Content**: Tutorials, courses, interactive lessons
+
+## 🛠️ Development
+
+### Adding Custom Nodes
+
+```tsx
+import { DecoratorNode } from 'lexical'
+
+export class MyCustomNode extends DecoratorNode<JSX.Element> {
+  static getType(): string {
+    return 'my-custom-node'
+  }
+  
+  createDOM(): HTMLElement {
+    return document.createElement('div')
+  }
+  
+  decorate(): JSX.Element {
+    return <MyCustomComponent />
+  }
+}
+```
+
+### Creating Plugins
+
+```tsx
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+
+export function MyPlugin() {
+  const [editor] = useLexicalComposerContext()
+  
+  // Plugin logic here
+  
+  return null
+}
+```
+
+## 📦 Building for Production
+
+```bash
+npm run build
+npm run start
+```
 
-- `src/app/` — Next.js app routes and layout
-- `src/components/editor/` — Editor core, plugins, nodes, and UI
-- `src/components/ui/` — Reusable UI components
-- `src/lib/` — Utility libraries (EdgeStore, Pinecone, etc.)
-- `public/` — Static assets
+## 🤝 Contributing
 
-## Editor Plugins & Nodes
+We welcome contributions! Please see our [Contributing Guidelines](CONTRIBUTING.md) for details on how to get started, submitting bug reports, and suggesting enhancements.
 
-- **Plugins:** Toolbar, Floating Toolbar, AutoEmbed, Equations, Excalidraw, Inline Images, Polls, Tables, Code Actions, Slash Commands, etc.
-- **Nodes:** ImageNode, InlineImageNode, EquationNode, ExcalidrawNode, PollNode, etc.
+Please note that this project is released with a [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
 
-## Customization
+## 📄 License
 
-- Tailwind CSS config: `tailwind.config.ts`
-- ESLint config: `eslint.config.mjs`
-- Editor themes: `src/components/editor/themes/`
+MIT License - see the [LICENSE](LICENSE) file for details.
 
-## Contributing
+## 🆘 Support
 
-1. Fork the repo
-2. Create your feature branch (`git checkout -b feature/foo`)
-3. Commit your changes (`git commit -am 'Add feature'`)
-4. Push to the branch (`git push origin feature/foo`)
-5. Create a Pull Request
+- 📖 [Documentation](https://github.com/chinonsochikelue/notiq)
+- 🐛 [Report Issues](https://github.com/chinonsochikelue/notiq/issues)
+- 💬 [Discussions](https://github.com/chinonsochikelue/notiq/discussions)
 
-## License
+---
 
-MIT
+Built with ❤️ using [Lexical](https://lexical.dev/), [Next.js](https://nextjs.org/), and [OpenAI](https://openai.com/)

package/dist/CodeActionMenuPlugin-EINOY4U4.mjs

@@ -0,0 +1,15 @@
+import {
+  CodeActionMenuPlugin
+} from "./chunk-PBD6LMLC.mjs";
+import "./chunk-TTHQCW5F.mjs";
+import "./chunk-GK35L7UY.mjs";
+import "./chunk-EGMI62PP.mjs";
+import "./chunk-KJ6AJ44Q.mjs";
+import "./chunk-64Z3FI7T.mjs";
+import "./chunk-WDG7J2DY.mjs";
+import "./chunk-BIU7WTLX.mjs";
+import "./chunk-YHPNOWFH.mjs";
+import "./chunk-77KXU36M.mjs";
+export {
+  CodeActionMenuPlugin as default
+};

package/dist/DynamicBlockComponent-NRQJ4WW4.mjs

@@ -0,0 +1,161 @@
+"use client";
+import {
+  DynamicBlockNode
+} from "./chunk-5BAKY5KN.mjs";
+import {
+  Badge
+} from "./chunk-FSM26655.mjs";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "./chunk-3G37YKTV.mjs";
+import {
+  Button
+} from "./chunk-BIU7WTLX.mjs";
+import {
+  cn
+} from "./chunk-YHPNOWFH.mjs";
+import {
+  React,
+  __spreadValues,
+  init_react_shim
+} from "./chunk-77KXU36M.mjs";
+
+// src/components/editor/nodes/DynamicBlockNode/DynamicBlockComponent.tsx
+init_react_shim();
+import { useState, useEffect, useRef } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getNodeByKey } from "lexical";
+import { Play, Pause, Settings, Eye, EyeOff, Zap } from "lucide-react";
+function DynamicBlockComponent({ nodeKey, payload }) {
+  var _a;
+  const [editor] = useLexicalComposerContext();
+  const [currentBlockId, setCurrentBlockId] = useState(payload.currentBlockId || ((_a = payload.blocks[0]) == null ? void 0 : _a.id));
+  const [isPreviewMode, setIsPreviewMode] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
+  const containerRef = useRef(null);
+  const timeoutRef = useRef(void 0);
+  const currentBlock = payload.blocks.find((block) => block.id === currentBlockId);
+  const activeTriggers = payload.triggers.filter(
+    (trigger) => trigger.targetBlockId === currentBlockId || payload.blocks.some((block) => block.id === trigger.targetBlockId)
+  );
+  const executeTrigger = (trigger) => {
+    const targetBlock = payload.blocks.find((block) => block.id === trigger.targetBlockId);
+    if (!targetBlock) return;
+    switch (trigger.action) {
+      case "show":
+      case "replace":
+        setCurrentBlockId(trigger.targetBlockId);
+        break;
+      case "hide":
+        setCurrentBlockId("");
+        break;
+      case "animate":
+        setCurrentBlockId("");
+        setTimeout(() => setCurrentBlockId(trigger.targetBlockId), 100);
+        break;
+    }
+  };
+  useEffect(() => {
+    if (!isPreviewMode || !containerRef.current) return;
+    const container = containerRef.current;
+    const timeTriggers = activeTriggers.filter((t) => t.type === "time");
+    const clickTriggers = activeTriggers.filter((t) => t.type === "click");
+    const hoverTriggers = activeTriggers.filter((t) => t.type === "hover");
+    if (isPlaying && timeTriggers.length > 0) {
+      timeTriggers.forEach((trigger) => {
+        const delay = typeof trigger.condition === "number" ? trigger.condition * 1e3 : 3e3;
+        timeoutRef.current = setTimeout(() => executeTrigger(trigger), delay);
+      });
+    }
+    const handleClick = () => {
+      clickTriggers.forEach(executeTrigger);
+    };
+    const handleMouseEnter = () => {
+      hoverTriggers.forEach(executeTrigger);
+    };
+    container.addEventListener("click", handleClick);
+    container.addEventListener("mouseenter", handleMouseEnter);
+    return () => {
+      container.removeEventListener("click", handleClick);
+      container.removeEventListener("mouseenter", handleMouseEnter);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [isPreviewMode, isPlaying, activeTriggers, currentBlockId]);
+  const updatePayload = (newPayload) => {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isDynamicBlockNode(node)) {
+        node.updatePayload(__spreadValues(__spreadValues({}, payload), newPayload));
+      }
+    });
+  };
+  const renderContentBlock = (block) => {
+    const animationClass = block.animation && block.animation !== "none" ? `animate-${block.animation === "fade" ? "fade-in" : block.animation === "slide" ? "slide-in-right" : "bounce-in"}` : "";
+    switch (block.type) {
+      case "text":
+        return /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: cn("prose prose-sm max-w-none", animationClass),
+            style: block.styles,
+            dangerouslySetInnerHTML: { __html: block.content }
+          }
+        );
+      case "image":
+        return /* @__PURE__ */ React.createElement(
+          "img",
+          {
+            src: block.content || "/placeholder.svg",
+            alt: "Dynamic content",
+            className: cn("max-w-full h-auto rounded-lg", animationClass),
+            style: block.styles
+          }
+        );
+      case "video":
+        return /* @__PURE__ */ React.createElement(
+          "video",
+          {
+            src: block.content,
+            controls: true,
+            className: cn("max-w-full h-auto rounded-lg", animationClass),
+            style: block.styles
+          }
+        );
+      case "html":
+        return /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: cn("w-full", animationClass),
+            style: block.styles,
+            dangerouslySetInnerHTML: { __html: block.content }
+          }
+        );
+      default:
+        return /* @__PURE__ */ React.createElement("div", { className: "text-muted-foreground" }, "Unknown content type");
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Card, { className: "w-full my-4 border-2 border-dashed border-accent/30 bg-gradient-to-br from-background to-accent/5" }, /* @__PURE__ */ React.createElement(CardHeader, { className: "pb-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(Zap, { className: "w-5 h-5 text-accent" }), /* @__PURE__ */ React.createElement(CardTitle, { className: "text-lg font-semibold" }, payload.title), /* @__PURE__ */ React.createElement(Badge, { variant: "secondary", className: "text-xs" }, "Dynamic Block")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(Button, { variant: "ghost", size: "sm", onClick: () => setIsPreviewMode(!isPreviewMode), className: "h-8 px-2" }, isPreviewMode ? /* @__PURE__ */ React.createElement(EyeOff, { className: "w-4 h-4" }) : /* @__PURE__ */ React.createElement(Eye, { className: "w-4 h-4" }), isPreviewMode ? "Edit" : "Preview"), isPreviewMode && /* @__PURE__ */ React.createElement(Button, { variant: "ghost", size: "sm", onClick: () => setIsPlaying(!isPlaying), className: "h-8 px-2" }, isPlaying ? /* @__PURE__ */ React.createElement(Pause, { className: "w-4 h-4" }) : /* @__PURE__ */ React.createElement(Play, { className: "w-4 h-4" })), /* @__PURE__ */ React.createElement(Button, { variant: "ghost", size: "sm", onClick: () => setShowSettings(!showSettings), className: "h-8 px-2" }, /* @__PURE__ */ React.createElement(Settings, { className: "w-4 h-4" }))))), /* @__PURE__ */ React.createElement(CardContent, { ref: containerRef, className: "space-y-4" }, /* @__PURE__ */ React.createElement("div", { className: "min-h-[200px] p-4 rounded-lg border bg-card/50 relative overflow-hidden" }, currentBlock ? /* @__PURE__ */ React.createElement("div", { className: "transition-all duration-300 ease-in-out" }, renderContentBlock(currentBlock)) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center h-full text-muted-foreground" }, /* @__PURE__ */ React.createElement("div", { className: "text-center" }, /* @__PURE__ */ React.createElement(Zap, { className: "w-12 h-12 mx-auto mb-2 opacity-50" }), /* @__PURE__ */ React.createElement("p", null, "No content block selected"), /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, "Configure blocks and triggers below")))), !isPreviewMode && /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("h4", { className: "font-medium text-sm" }, "Content Blocks (", payload.blocks.length, ")"), /* @__PURE__ */ React.createElement(Button, { size: "sm", variant: "outline", className: "h-7 text-xs bg-transparent" }, "Add Block")), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-2" }, payload.blocks.map((block) => /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      key: block.id,
+      variant: currentBlockId === block.id ? "default" : "outline",
+      size: "sm",
+      onClick: () => setCurrentBlockId(block.id),
+      className: "h-auto p-2 flex flex-col items-start text-left"
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "font-medium text-xs capitalize" }, block.type),
+    /* @__PURE__ */ React.createElement("div", { className: "text-xs text-muted-foreground truncate w-full" }, block.content.substring(0, 30), "...")
+  )))), !isPreviewMode && activeTriggers.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement("h4", { className: "font-medium text-sm" }, "Active Triggers (", activeTriggers.length, ")"), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-2" }, activeTriggers.map((trigger) => /* @__PURE__ */ React.createElement(Badge, { key: trigger.id, variant: "outline", className: "text-xs" }, trigger.type, ": ", trigger.action, trigger.type === "time" && ` (${trigger.condition}s)`)))), isPreviewMode && /* @__PURE__ */ React.createElement("div", { className: "text-center p-3 bg-accent/10 rounded-lg border border-accent/20" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm text-accent font-medium" }, "Preview Mode Active"), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground mt-1" }, activeTriggers.some((t) => t.type === "click") && "Click to trigger interactions \u2022 ", activeTriggers.some((t) => t.type === "hover") && "Hover to trigger interactions \u2022 ", activeTriggers.some((t) => t.type === "time") && "Press play for time-based triggers"))));
+}
+function $isDynamicBlockNode(node) {
+  return node instanceof DynamicBlockNode;
+}
+export {
+  DynamicBlockComponent as default
+};

package/dist/EquationComponent-CB6DFIHV.mjs

@@ -0,0 +1,154 @@
+import {
+  $isEquationNode,
+  KatexRenderer
+} from "./chunk-3JVFG7ER.mjs";
+import {
+  React,
+  init_react_shim
+} from "./chunk-77KXU36M.mjs";
+
+// src/components/editor/nodes/EquationNode/EquationComponent.tsx
+init_react_shim();
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
+import { mergeRegister } from "@lexical/utils";
+import {
+  $getNodeByKey,
+  $getSelection,
+  $isNodeSelection,
+  COMMAND_PRIORITY_HIGH,
+  KEY_ESCAPE_COMMAND,
+  SELECTION_CHANGE_COMMAND
+} from "lexical";
+import * as React2 from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+// src/components/ui/equation/EquationEditor.tsx
+init_react_shim();
+import { isHTMLElement } from "lexical";
+import { forwardRef } from "react";
+function EquationEditor({ equation, setEquation, inline }, forwardedRef) {
+  const onChange = (event) => {
+    setEquation(event.target.value);
+  };
+  return inline && isHTMLElement(forwardedRef) ? /* @__PURE__ */ React.createElement("span", { className: "EquationEditor_inputBackground" }, /* @__PURE__ */ React.createElement("span", { className: "EquationEditor_dollarSign" }, "$"), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      className: "EquationEditor_inlineEditor",
+      value: equation,
+      onChange,
+      autoFocus: true,
+      ref: forwardedRef
+    }
+  ), /* @__PURE__ */ React.createElement("span", { className: "EquationEditor_dollarSign" }, "$")) : /* @__PURE__ */ React.createElement("div", { className: "EquationEditor_inputBackground" }, /* @__PURE__ */ React.createElement("span", { className: "EquationEditor_dollarSign" }, "$$\n"), /* @__PURE__ */ React.createElement(
+    "textarea",
+    {
+      className: "EquationEditor_blockEditor",
+      value: equation,
+      onChange,
+      ref: forwardedRef
+    }
+  ), /* @__PURE__ */ React.createElement("span", { className: "EquationEditor_dollarSign" }, "\n$$"));
+}
+var EquationEditor_default = forwardRef(EquationEditor);
+
+// src/components/editor/nodes/EquationNode/EquationComponent.tsx
+function EquationComponent({
+  equation,
+  inline,
+  nodeKey
+}) {
+  const [editor] = useLexicalComposerContext();
+  const isEditable = useLexicalEditable();
+  const [equationValue, setEquationValue] = useState(equation);
+  const [showEquationEditor, setShowEquationEditor] = useState(false);
+  const inputRef = useRef(null);
+  const onHide = useCallback(
+    (restoreSelection) => {
+      setShowEquationEditor(false);
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if ($isEquationNode(node)) {
+          node.setEquation(equationValue);
+          if (restoreSelection) {
+            node.selectNext(0, 0);
+          }
+        }
+      });
+    },
+    [editor, equationValue, nodeKey]
+  );
+  useEffect(() => {
+    if (!showEquationEditor && equationValue !== equation) {
+      setEquationValue(equation);
+    }
+  }, [showEquationEditor, equation, equationValue]);
+  useEffect(() => {
+    if (!isEditable) {
+      return;
+    }
+    if (showEquationEditor) {
+      return mergeRegister(
+        editor.registerCommand(
+          SELECTION_CHANGE_COMMAND,
+          (payload) => {
+            const activeElement = document.activeElement;
+            const inputElem = inputRef.current;
+            if (inputElem !== activeElement) {
+              onHide();
+            }
+            return false;
+          },
+          COMMAND_PRIORITY_HIGH
+        ),
+        editor.registerCommand(
+          KEY_ESCAPE_COMMAND,
+          (payload) => {
+            const activeElement = document.activeElement;
+            const inputElem = inputRef.current;
+            if (inputElem === activeElement) {
+              onHide(true);
+              return true;
+            }
+            return false;
+          },
+          COMMAND_PRIORITY_HIGH
+        )
+      );
+    } else {
+      return editor.registerUpdateListener(({ editorState }) => {
+        const isSelected = editorState.read(() => {
+          const selection = $getSelection();
+          return $isNodeSelection(selection) && selection.has(nodeKey) && selection.getNodes().length === 1;
+        });
+        if (isSelected) {
+          setShowEquationEditor(true);
+        }
+      });
+    }
+  }, [editor, nodeKey, onHide, showEquationEditor, isEditable]);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, showEquationEditor && isEditable ? /* @__PURE__ */ React2.createElement(
+    EquationEditor_default,
+    {
+      equation: equationValue,
+      setEquation: setEquationValue,
+      inline,
+      ref: inputRef
+    }
+  ) : /* @__PURE__ */ React2.createElement(ErrorBoundary, { onError: (e) => editor._onError(e), fallback: null }, /* @__PURE__ */ React2.createElement(
+    KatexRenderer,
+    {
+      equation: equationValue,
+      inline,
+      onDoubleClick: () => {
+        if (isEditable) {
+          setShowEquationEditor(true);
+        }
+      }
+    }
+  )));
+}
+export {
+  EquationComponent as default
+};