@connectedxm/entity-editor 0.0.1 → 0.0.2

package/README.md

@@ -1,6 +1,6 @@
-# Activity Editor
+# Entity Editor
 
-A **zero-dependency**, lightweight React text editor that intelligently recognizes and styles mentions, hashtags, links, and text formatting in real-time using an innovative bitmap-based architecture.
+A **zero-dependency**, lightweight React text editor with intelligent entity recognition and real-time formatting using an innovative bitmap-based architecture.
 
 ## ✨ Features
 
@@ -9,12 +9,13 @@ A **zero-dependency**, lightweight React text editor that intelligently recogniz
   - **@mentions** (`@username`)
   - **#interests** (`#hashtag`)
   - **🔗 Links** (`https://example.com`)
-  - **Text Formatting**: Bold, italic, underline, strikethrough
-- **⚡ Real-time Processing**: Instant styling as you type with debounced updates
+- **📝 Rich Text Formatting**: Bold, italic, underline, strikethrough with keyboard shortcuts
+- **⚡ Real-time Processing**: Instant styling as you type with optimized performance
 - **🗜️ Bitmap Architecture**: Ultra-efficient character-level state tracking using bit operations
+- **🎨 Customizable Styling**: Configurable colors and styles for all entity types
+- **🔍 Search & Autocomplete**: Built-in search functionality for mentions and interests
+- **⌨️ Keyboard Shortcuts**: Cmd/Ctrl+B/I/U/Shift+S for formatting
 - **📱 Accessible**: Built on standard `contentEditable` with proper cursor management
-- **🎨 Customizable**: CSS classes for easy theming
-- **⌨️ Keyboard Shortcuts**: Cmd/Ctrl+B/I/U/S for formatting selected text
 
 ## 🏗️ Bitmap Architecture
 
@@ -58,53 +59,142 @@ npm install @connectedxm/entity-editor
 ### Basic Usage
 
 ```tsx
-import React, { useState } from "react";
-import Editor from "@connectedxm/entity-editor";
+import React, { useState, useRef } from "react";
+import {
+  Editor,
+  EditorRef,
+  Entity,
+  MarkState,
+  SearchEntity,
+} from "@connectedxm/entity-editor";
 
 function App() {
+  const editorRef = useRef<EditorRef>(null);
   const [plainText, setPlainText] = useState("");
-  const [entities, setEntities] = useState([]);
-  const [search, setSearch] = useState(null);
+  const [entities, setEntities] = useState<Entity[]>([]);
+  const [markState, setMarkState] = useState<MarkState>({
+    bold: false,
+    italic: false,
+    underline: false,
+    strike: false,
+  });
+  const [search, setSearch] = useState<SearchEntity | null>(null);
 
   return (
     <Editor
+      ref={editorRef}
       plainText={plainText}
       setPlainText={setPlainText}
       entities={entities}
       setEntities={setEntities}
+      markState={markState}
+      setMarkState={setMarkState}
       search={search}
       setSearch={setSearch}
-      options={{ mentions: true, interests: true, links: true }}
-      style={{ minHeight: "100px", border: "1px solid #ccc", padding: "10px" }}
+      options={{
+        mentions: true,
+        interests: true,
+        links: true,
+      }}
+      style={{
+        border: "1px solid #ccc",
+        minHeight: "100px",
+        padding: "10px",
+      }}
     />
   );
 }
 ```
 
-### Advanced Features
-
-The editor supports entity recognition options and debounced updates for performance:
+### Advanced Usage with Custom Styling
 
 ```tsx
 <Editor
+  ref={editorRef}
   plainText={plainText}
   setPlainText={setPlainText}
   entities={entities}
   setEntities={setEntities}
+  markState={markState}
+  setMarkState={setMarkState}
   search={search}
   setSearch={setSearch}
   options={{
-    mentions: true, // Enable @mention detection
-    interests: true, // Enable #hashtag detection
-    links: true, // Enable URL detection
+    mentions: true,
+    interests: true,
+    links: true,
+  }}
+  entityStyles={{
+    mentionColor: "#1da1f2",
+    interestColor: "#ff6b35",
+    linkColor: "#9c27b0",
   }}
-  debounceDelay={250} // Delay before processing changes
-  debounceMaxWait={500} // Maximum wait time for updates
   className="custom-editor"
+  debug={false}
 />
 ```
 
-### Styling Entities
+### Using the Editor Ref API
+
+The editor exposes imperative methods through a ref:
+
+```tsx
+const editorRef = useRef<EditorRef>(null);
+
+// Programmatically select/replace entities
+const handleMentionSelect = (username: string) => {
+  if (search?.type === "mention") {
+    editorRef.current?.selectEntity(
+      "mention",
+      search.startIndex,
+      search.endIndex,
+      username
+    );
+  }
+};
+
+// Toggle formatting programmatically
+const makeBold = () => {
+  editorRef.current?.toggleMark("bold");
+};
+```
+
+### Handling Search and Autocomplete
+
+```tsx
+// Handle search results for mentions
+{
+  search?.type === "mention" && (
+    <div className="autocomplete-dropdown">
+      <h4>Select a user to mention:</h4>
+      {searchResults.map((user) => (
+        <div key={user.id} onClick={() => handleMentionSelect(user.username)}>
+          {user.name} (@{user.username})
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Handle search results for interests
+{
+  search?.type === "interest" && (
+    <div className="autocomplete-dropdown">
+      <h4>Select an interest to tag:</h4>
+      {interestResults.map((interest) => (
+        <div
+          key={interest.id}
+          onClick={() => handleInterestSelect(interest.name)}
+        >
+          #{interest.name}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Styling Entities with CSS
 
 Add CSS to style the recognized entities:
 
@@ -117,34 +207,35 @@ Add CSS to style the recognized entities:
 }
 
 .activity-interest {
-  color: #1da1f2;
+  color: #ff6b35;
   font-weight: 500;
 }
 
 .activity-link {
-  color: #1da1f2;
+  color: #9c27b0;
   text-decoration: underline;
 }
 
 .activity-bold {
   font-weight: bold;
 }
+
 .activity-italic {
   font-style: italic;
 }
+
 .activity-underline {
   text-decoration: underline;
 }
+
 .activity-strike {
   text-decoration: line-through;
 }
 ```
 
-## 📊 Bitmap to Entity Conversion
-
-The bitmap system automatically converts character-level bit data into structured entities for easy consumption:
+## 📊 Entity Structure
 
-### Entity Structure
+The editor converts bitmap data into structured entities for easy consumption:
 
 ```typescript
 interface Entity {
@@ -152,49 +243,38 @@ interface Entity {
   startIndex: number;
   endIndex: number;
   marks: ("bold" | "italic" | "underline" | "strike")[];
-  link?: string; // For detected URLs
-  mention?: string; // For completed @mentions
-  interest?: string; // For completed #hashtags
+  href?: string; // For links
+  username?: string; // For mentions
+  interest?: string; // For interests
+}
+
+interface SearchEntity {
+  type: "mention" | "interest" | "link";
+  search: string;
+  startIndex: number;
+  endIndex: number;
 }
 ```
 
-### Conversion Process
+### Bitmap to Entity Conversion
 
 1. **Bitmap Scanning**: The system scans through the bitmap array
 2. **Grouping**: Consecutive characters with identical bit values are grouped together
 3. **Entity Creation**: Each group becomes an entity with its type determined by the bitmap value
 4. **Mark Extraction**: Formatting bits are converted to a `marks` array
 
-**Example Conversion**:
-
-```typescript
-// Input bitmap for "Hello @john"
-bitmap: [0, 0, 0, 0, 0, 0, 32, 32, 32, 32, 32];
-
-// Output entities
-entities: [
-  {
-    type: "mention",
-    startIndex: 6,
-    endIndex: 11,
-    marks: [],
-    mention: undefined, // Will be filled when mention is resolved
-  },
-];
-```
-
 ## 🎯 Recognition Patterns
 
 - **Mentions**: `@username` (alphanumeric, underscores, hyphens, apostrophes)
 - **Interests**: `#hashtag` (alphanumeric, underscores, hyphens)
 - **Links**: `https://` or `http://` URLs
-- **Formatting**: Detected from applied HTML styles
+- **Formatting**: Applied via keyboard shortcuts or toolbar
 
 ## ⚡ Performance Benefits
 
 ### Why Bitmap Architecture?
 
-The bitmap approach provides significant performance advantages over traditional entity-based systems:
+The bitmap approach provides significant performance advantages:
 
 **Memory Efficiency**:
 
@@ -206,48 +286,81 @@ The bitmap approach provides significant performance advantages over traditional
 
 - Bit operations are CPU-native and extremely fast
 - O(1) property checks vs O(n) object property lookups
-- Efficient grouping algorithm for entity generation
 - **5-10x faster** entity processing
 
 **Update Performance**:
 
 - Only modified bitmap regions trigger re-rendering
-- Debounced updates prevent excessive DOM manipulation
-- Minimal React re-renders through optimized state management
+- Optimized React re-renders through efficient state management
 
-### Benchmark Comparison
+## 📝 API Reference
 
-```
-Traditional Approach    vs    Bitmap Approach
-─────────────────────         ──────────────────
-Memory: 500KB+                Memory: 40KB
-Update: 15-30ms               Update: 2-5ms
-Bundle: +50KB deps            Bundle: 0KB deps
-```
+### Props
 
-## 🏆 Why Zero Dependencies?
+| Prop           | Type                                     | Required | Description                           |
+| -------------- | ---------------------------------------- | -------- | ------------------------------------- |
+| `ref`          | `React.RefObject<EditorRef>`             | Yes      | Ref to access editor methods          |
+| `plainText`    | `string`                                 | Yes      | The current plain text content        |
+| `setPlainText` | `(text: string) => void`                 | Yes      | Callback to update plain text         |
+| `entities`     | `Entity[]`                               | Yes      | Array of recognized entities          |
+| `setEntities`  | `(entities: Entity[]) => void`           | Yes      | Callback to update entities           |
+| `markState`    | `MarkState`                              | Yes      | Current formatting state              |
+| `setMarkState` | `(state: MarkState) => void`             | Yes      | Callback to update formatting state   |
+| `search`       | `SearchEntity \| null`                   | Yes      | Current search state for autocomplete |
+| `setSearch`    | `(search: SearchEntity \| null) => void` | Yes      | Callback to update search state       |
+| `options`      | `EntityOptions`                          | No       | Configure which entities to detect    |
+| `entityStyles` | `StyleOptions`                           | No       | Custom colors for entity types        |
+| `style`        | `React.CSSProperties`                    | No       | Inline styles for the editor          |
+| `className`    | `string`                                 | No       | CSS class name for the editor         |
+| `debug`        | `boolean`                                | No       | Enable debug mode (default: false)    |
+
+### Interfaces
 
-This editor proves that powerful text editing doesn't require heavy libraries:
+```typescript
+interface EntityOptions {
+  mentions?: boolean; // Enable @mention detection
+  interests?: boolean; // Enable #hashtag detection
+  links?: boolean; // Enable URL detection
+}
 
-- **Performance**: No bundle bloat, faster load times
-- **Security**: No third-party vulnerabilities
-- **Control**: Full understanding and control over every feature
-- **Maintenance**: Easier updates and customization
-- **Reliability**: No breaking changes from external dependencies
+interface StyleOptions {
+  mentionColor?: string; // Custom color for mentions
+  interestColor?: string; // Custom color for interests
+  linkColor?: string; // Custom color for links
+}
 
-## 🧪 Testing
+interface MarkState {
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  strike: boolean;
+}
+
+interface EditorRef {
+  selectEntity: (
+    entityType: EntityType,
+    startIndex: number,
+    endIndex: number,
+    newText: string
+  ) => void;
+  toggleMark: (markType: MarkType) => void;
+}
+```
+
+### Keyboard Shortcuts
+
+- **Ctrl/Cmd + B**: Toggle bold
+- **Ctrl/Cmd + I**: Toggle italic
+- **Ctrl/Cmd + U**: Toggle underline
+- **Ctrl/Cmd + Shift + S**: Toggle strikethrough
 
-The editor includes comprehensive tests covering:
+## 🧪 Testing
 
-- **Bitmap Operations**: Bit manipulation, mask operations, value encoding/decoding
-- **Entity Conversion**: Bitmap-to-entity transformation accuracy
-- **Keyboard Shortcuts**: Formatting toggle functionality via Cmd/Ctrl+B/I/U/S
-- **Edge Cases**: Boundary conditions, overlapping entities, empty states
-- **Performance**: Large document handling and update efficiency
+Run the test suite:
 
 ```bash
-npm test      # Run all tests
-npm run test:run  # Run tests once without watch mode
+npm test      # Run tests in watch mode
+npm run test:run  # Run tests once
 ```
 
 ## 🏗️ Development
@@ -262,37 +375,19 @@ npm run dev
 # Build for production
 npm run build
 
-# Run tests
-npm test
+# Create local package
+npm run local
 ```
 
-## 📝 API Reference
-
-### Props
+## 🏆 Why Zero Dependencies?
 
-| Prop              | Type                                     | Default | Description                           |
-| ----------------- | ---------------------------------------- | ------- | ------------------------------------- |
-| `plainText`       | `string`                                 | -       | The current plain text content        |
-| `setPlainText`    | `(text: string) => void`                 | -       | Callback to update plain text         |
-| `entities`        | `Entity[]`                               | -       | Array of recognized entities          |
-| `setEntities`     | `(entities: Entity[]) => void`           | -       | Callback to update entities           |
-| `search`          | `ActiveEntity \| null`                   | -       | Current search state for autocomplete |
-| `setSearch`       | `(search: ActiveEntity \| null) => void` | -       | Callback to update search state       |
-| `options`         | `EntityOptions`                          | `{}`    | Configure which entities to detect    |
-| `debounceDelay`   | `number`                                 | `250`   | Delay before processing changes (ms)  |
-| `debounceMaxWait` | `number`                                 | `500`   | Maximum wait time for updates (ms)    |
-| `style`           | `React.CSSProperties`                    | -       | Optional inline styles                |
-| `className`       | `string`                                 | -       | Optional CSS class name               |
-
-### EntityOptions
+This editor proves that powerful text editing doesn't require heavy libraries:
 
-```typescript
-interface EntityOptions {
-  mentions?: boolean; // Enable @mention detection
-  interests?: boolean; // Enable #hashtag detection
-  links?: boolean; // Enable URL detection
-}
-```
+- **Performance**: No bundle bloat, faster load times
+- **Security**: No third-party vulnerabilities
+- **Control**: Full understanding and control over every feature
+- **Maintenance**: Easier updates and customization
+- **Reliability**: No breaking changes from external dependencies
 
 ## 🤝 Contributing
 
@@ -302,16 +397,20 @@ This project maintains its zero-dependency philosophy and bitmap-based architect
 2. **Bitmap First**: All new features should leverage the bitmap system
 3. **Performance Focused**: Optimize for memory usage and processing speed
 4. **TypeScript**: Maintain strict typing throughout
-5. **Test Coverage**: Add comprehensive tests for bitmap operations
+5. **Test Coverage**: Add comprehensive tests for new features
 6. **API Stability**: Keep the component interface simple and focused
 
 ### Understanding the Codebase
 
+- `src/Editor.tsx` - Main editor component
+- `src/interfaces.ts` - TypeScript interfaces and types
 - `src/helpers/bitmap.ts` - Core bitmap manipulation functions
 - `src/helpers/entities.ts` - Bitmap-to-entity conversion logic
 - `src/helpers/marks/` - Individual formatting bit operations
 - `src/helpers/entities/` - Entity type detection and processing
 - `src/helpers/dom.ts` - DOM manipulation and cursor management
+- `src/helpers/keyboard.ts` - Keyboard shortcut handling
+- `src/hooks/useDebounce.ts` - Debounce hook for performance
 
 ## 📄 License
 

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import C, { useState as Le, useRef as he, useEffect as xe } from "react";
-var J = { exports: {} }, x = {};
+import C, { useState as xe, useRef as he, useEffect as $e } from "react";
+var J = { exports: {} }, B = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -10,8 +10,8 @@ var J = { exports: {} }, x = {};
  * LICENSE file in the root directory of this source tree.
  */
 var Ne;
-function Be() {
-  if (Ne) return x;
+function Ye() {
+  if (Ne) return B;
   Ne = 1;
   var e = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
   function r(s, n, i) {
@@ -29,9 +29,9 @@ function Be() {
       props: i
     };
   }
-  return x.Fragment = t, x.jsx = r, x.jsxs = r, x;
+  return B.Fragment = t, B.jsx = r, B.jsxs = r, B;
 }
-var B = {};
+var x = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -42,7 +42,7 @@ var B = {};
  * LICENSE file in the root directory of this source tree.
  */
 var Ae;
-function $e() {
+function We() {
   return Ae || (Ae = 1, process.env.NODE_ENV !== "production" && (function() {
     function e(o) {
       if (o == null) return null;
@@ -67,7 +67,7 @@ function $e() {
         switch (typeof o.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), o.$$typeof) {
-          case j:
+          case T:
             return "Portal";
           case ue:
             return (o.displayName || "Context") + ".Provider";
@@ -99,8 +99,8 @@ function $e() {
       }
       if (a) {
         a = console;
-        var h = a.error, k = typeof Symbol == "function" && Symbol.toStringTag && o[Symbol.toStringTag] || o.constructor.name || "Object";
-        return h.call(
+        var m = a.error, k = typeof Symbol == "function" && Symbol.toStringTag && o[Symbol.toStringTag] || o.constructor.name || "Object";
+        return m.call(
           a,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           k
@@ -119,7 +119,7 @@ function $e() {
       }
     }
     function n() {
-      var o = m.A;
+      var o = g.A;
       return o === null ? null : o.getOwner();
     }
     function i() {
@@ -133,14 +133,14 @@ function $e() {
       return o.key !== void 0;
     }
     function l(o, a) {
-      function h() {
+      function m() {
         A || (A = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           a
         ));
       }
-      h.isReactWarning = !0, Object.defineProperty(o, "key", {
-        get: h,
+      m.isReactWarning = !0, Object.defineProperty(o, "key", {
+        get: m,
         configurable: !0
       });
     }
@@ -150,14 +150,14 @@ function $e() {
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), o = this.props.ref, o !== void 0 ? o : null;
     }
-    function E(o, a, h, k, P, I, fe, de) {
-      return h = I.ref, o = {
+    function h(o, a, m, k, P, I, fe, de) {
+      return m = I.ref, o = {
         $$typeof: S,
         type: o,
         key: a,
         props: I,
         _owner: P
-      }, (h !== void 0 ? h : null) !== null ? Object.defineProperty(o, "ref", {
+      }, (m !== void 0 ? m : null) !== null ? Object.defineProperty(o, "ref", {
         enumerable: !1,
         get: f
       }) : Object.defineProperty(o, "ref", { enumerable: !1, value: null }), o._store = {}, Object.defineProperty(o._store, "validated", {
@@ -182,11 +182,11 @@ function $e() {
         value: de
       }), Object.freeze && (Object.freeze(o.props), Object.freeze(o)), o;
     }
-    function N(o, a, h, k, P, I, fe, de) {
+    function N(o, a, m, k, P, I, fe, de) {
       var b = a.children;
       if (b !== void 0)
         if (k)
-          if (g(b)) {
+          if (E(b)) {
             for (k = 0; k < b.length; k++)
               le(b[k]);
             Object.freeze && Object.freeze(b);
@@ -197,8 +197,8 @@ function $e() {
         else le(b);
       if (d.call(a, "key")) {
         b = e(o);
-        var D = Object.keys(a).filter(function(De) {
-          return De !== "key";
+        var D = Object.keys(a).filter(function(Be) {
+          return Be !== "key";
         });
         k = 0 < D.length ? "{key: someKey, " + D.join(": ..., ") + ": ...}" : "{key: someKey}", p[b + k] || (D = 0 < D.length ? "{" + D.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
@@ -213,21 +213,21 @@ React keys must be passed directly to JSX without using spread:
           b
         ), p[b + k] = !0);
       }
-      if (b = null, h !== void 0 && (r(h), b = "" + h), c(a) && (r(a.key), b = "" + a.key), "key" in a) {
-        h = {};
+      if (b = null, m !== void 0 && (r(m), b = "" + m), c(a) && (r(a.key), b = "" + a.key), "key" in a) {
+        m = {};
         for (var Ee in a)
-          Ee !== "key" && (h[Ee] = a[Ee]);
-      } else h = a;
+          Ee !== "key" && (m[Ee] = a[Ee]);
+      } else m = a;
       return b && l(
-        h,
+        m,
         typeof o == "function" ? o.displayName || o.name || "Unknown" : o
-      ), E(
+      ), h(
         o,
         b,
         I,
         P,
         n(),
-        h,
+        m,
         fe,
         de
       );
@@ -235,36 +235,36 @@ React keys must be passed directly to JSX without using spread:
     function le(o) {
       typeof o == "object" && o !== null && o.$$typeof === S && o._store && (o._store.validated = 1);
     }
-    var T = C, S = Symbol.for("react.transitional.element"), j = Symbol.for("react.portal"), L = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), F = Symbol.for("react.profiler"), V = Symbol.for("react.consumer"), ue = Symbol.for("react.context"), v = Symbol.for("react.forward_ref"), M = Symbol.for("react.suspense"), z = Symbol.for("react.suspense_list"), G = Symbol.for("react.memo"), X = Symbol.for("react.lazy"), ae = Symbol.for("react.activity"), u = Symbol.for("react.client.reference"), m = T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, d = Object.prototype.hasOwnProperty, g = Array.isArray, R = console.createTask ? console.createTask : function() {
+    var j = C, S = Symbol.for("react.transitional.element"), T = Symbol.for("react.portal"), L = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), F = Symbol.for("react.profiler"), V = Symbol.for("react.consumer"), ue = Symbol.for("react.context"), v = Symbol.for("react.forward_ref"), M = Symbol.for("react.suspense"), z = Symbol.for("react.suspense_list"), G = Symbol.for("react.memo"), X = Symbol.for("react.lazy"), ae = Symbol.for("react.activity"), u = Symbol.for("react.client.reference"), g = j.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, d = Object.prototype.hasOwnProperty, E = Array.isArray, R = console.createTask ? console.createTask : function() {
       return null;
     };
-    T = {
+    j = {
       react_stack_bottom_frame: function(o) {
         return o();
       }
     };
-    var A, O = {}, y = T.react_stack_bottom_frame.bind(
-      T,
+    var A, O = {}, y = j.react_stack_bottom_frame.bind(
+      j,
       i
     )(), _ = R(s(i)), p = {};
-    B.Fragment = L, B.jsx = function(o, a, h, k, P) {
-      var I = 1e4 > m.recentlyCreatedOwnerStacks++;
+    x.Fragment = L, x.jsx = function(o, a, m, k, P) {
+      var I = 1e4 > g.recentlyCreatedOwnerStacks++;
       return N(
         o,
         a,
-        h,
+        m,
         !1,
         k,
         P,
         I ? Error("react-stack-top-frame") : y,
         I ? R(s(o)) : _
       );
-    }, B.jsxs = function(o, a, h, k, P) {
-      var I = 1e4 > m.recentlyCreatedOwnerStacks++;
+    }, x.jsxs = function(o, a, m, k, P) {
+      var I = 1e4 > g.recentlyCreatedOwnerStacks++;
       return N(
         o,
         a,
-        h,
+        m,
         !0,
         k,
         P,
@@ -272,13 +272,13 @@ React keys must be passed directly to JSX without using spread:
         I ? R(s(o)) : _
       );
     };
-  })()), B;
+  })()), x;
 }
 var Oe;
-function Ye() {
-  return Oe || (Oe = 1, process.env.NODE_ENV === "production" ? J.exports = Be() : J.exports = $e()), J.exports;
+function Ke() {
+  return Oe || (Oe = 1, process.env.NODE_ENV === "production" ? J.exports = Ye() : J.exports = We()), J.exports;
 }
-var We = Ye();
+var Ue = Ke();
 const Ie = () => {
   const e = window.getSelection(), t = document.getElementById("entity-editor");
   if (!e || !t) return { start: 0, end: 0 };
@@ -291,30 +291,30 @@ const Ie = () => {
     return { start: n, end: c };
   } else
     return null;
-}, Ke = (e, t) => {
+}, Fe = (e, t) => {
   const r = document.createTreeWalker(e, NodeFilter.SHOW_TEXT);
   let s = 0, n = r.nextNode(), i = null, c = null, l = 0, f = 0;
   for (; n; ) {
-    const E = s + (n.textContent?.length || 0);
-    if (!i && E >= t.start && (i = n, l = t.start - s), !c && E >= t.end) {
+    const h = s + (n.textContent?.length || 0);
+    if (!i && h >= t.start && (i = n, l = t.start - s), !c && h >= t.end) {
       c = n, f = t.end - s;
       break;
     }
-    s = E, n = r.nextNode();
+    s = h, n = r.nextNode();
   }
   if (i && c) {
-    const E = document.createRange();
-    E.setStart(
+    const h = document.createRange();
+    h.setStart(
       i,
       Math.min(l, i.textContent?.length || 0)
-    ), E.setEnd(
+    ), h.setEnd(
       c,
       Math.min(f, c.textContent?.length || 0)
     );
     const N = window.getSelection();
-    N?.removeAllRanges(), N?.addRange(E);
+    N?.removeAllRanges(), N?.addRange(h);
   }
-}, Ue = (e, t, r) => {
+}, Ve = (e, t, r) => {
   let s = "", n = "", i = "", c = "";
   t.includes("bold") && (n = "bold"), t.includes("italic") && (i = "italic"), (t.includes("underline") || e === "link") && (c += "underline"), t.includes("strike") && (c += " line-through"), e !== "segment" && (s = "#1da1f2", e === "mention" && r.mentionColor ? s = r.mentionColor : e === "interest" && r.interestColor ? s = r.interestColor : e === "link" && r.linkColor && (s = r.linkColor));
   let l = "";
@@ -325,31 +325,31 @@ const Ie = () => {
   let s = "", n = 0;
   return t.forEach((i) => {
     n < i.startIndex && (s += e.slice(n, i.startIndex));
-    const c = e.slice(i.startIndex, i.endIndex), l = Ue(i.type, i.marks, r);
+    const c = e.slice(i.startIndex, i.endIndex), l = Ve(i.type, i.marks, r);
     s += `<span style="${l}">${c}</span>`, n = i.endIndex;
   }), s += e.slice(n), s;
-}, Fe = (e, t) => {
+}, ze = (e, t) => {
   let r = !1;
   e.key === "Enter" && !e.shiftKey ? (e.preventDefault(), document.execCommand("insertLineBreak"), r = !0) : (e.metaKey || e.ctrlKey) && (e.key === "b" ? (t("bold"), r = !0) : e.key === "i" ? (t("italic"), r = !0) : e.key === "u" ? (t("underline"), r = !0) : e.key === "s" && (t("strike"), r = !0)), r && e.preventDefault();
-}, ee = 128, Ve = /^(?<protocol>[a-z\-]+)?:?(?<host>\/\/.*\.[^\/]+)$/, ze = "()[]{}", Ge = "", je = (e, t) => {
+}, ee = 128, Ge = /^(?<protocol>[a-z\-]+)?:?(?<host>\/\/.*\.[^\/]+)$/, Xe = "()[]{}", pe = "", Me = (e, t) => {
   const r = Se(
     e,
     t,
-    ze,
-    Ge
+    Xe,
+    pe
   );
-  return r?.search.match(Ve) ? {
+  return r?.search.match(Ge) ? {
     type: "link",
     ...r
   } : null;
-}, te = (e) => (e & ee) !== 0, ge = (e, t) => t ? e | ee : e & ~ee, re = 32, Xe = /^@[a-zA-Z0-9_'-]+$/, Je = `.,!?;()[]{}"'<>#`, ne = "@", pe = (e, t) => {
+}, te = (e) => (e & ee) !== 0, ge = (e, t) => t ? e | ee : e & ~ee, re = 32, Je = /^@[a-zA-Z0-9_'-]+$/, qe = `.,!?;()[]{}"'<>#`, ne = "@", De = (e, t) => {
   const r = Se(
     e,
     t,
-    Je,
+    qe,
     ne
   );
-  return r?.search.match(Xe) ? {
+  return r?.search.match(Je) ? {
     type: "mention",
     ...r
   } : null;
@@ -392,17 +392,17 @@ const Ie = () => {
   let l = [...e];
   const f = w(l, s);
   if (oe(f) ? l = me(l, s, oe, Re) : ce(f) ? l = me(l, s, ce, ve) : te(f) && (l = me(l, s, te, ge)), n > 0 && l.splice(s, n), c > 0) {
-    let E = 0;
-    r.bold && (E = _e(E, !0)), r.italic && (E = ke(E, !0)), r.underline && (E = we(E, !0)), r.strike && (E = be(E, !0));
-    const N = new Array(c).fill(E);
+    let h = 0;
+    r.bold && (h = _e(h, !0)), r.italic && (h = ke(h, !0)), r.underline && (h = we(h, !0)), r.strike && (h = be(h, !0));
+    const N = new Array(c).fill(h);
     l.splice(s, 0, ...N);
   }
   return l;
-}, qe = (e) => /\s/.test(e) || /[\u2000-\u200B\u2028\u2029\u3000]/.test(e), Se = (e, t, r, s) => {
+}, He = (e) => /\s/.test(e) || /[\u2000-\u200B\u2028\u2029\u3000]/.test(e), Se = (e, t, r, s) => {
   if (t <= 0 || t > e.length)
     return null;
   let n = "", i = t - 1, c = t;
-  const l = (f) => qe(f) || r.includes(f);
+  const l = (f) => He(f) || r.includes(f);
   for (let f = i; f >= 0; f--) {
     if (l(e[f])) {
       i = f + 1;
@@ -426,20 +426,20 @@ const Ie = () => {
     startIndex: i,
     endIndex: c
   };
-}, se = 64, He = `.,!?;()[]{}"'<>@`, Ze = /^#[\w-]+$/, ie = "#", Me = (e, t) => {
+}, se = 64, Ze = `.,!?;()[]{}"'<>@`, Qe = /^#[\w-]+$/, ie = "#", Le = (e, t) => {
   const r = Se(
     e,
     t,
-    He,
+    Ze,
     ie
   );
-  return r?.search.match(Ze) ? {
+  return r?.search.match(Qe) ? {
     type: "interest",
     ...r
   } : null;
-}, ce = (e) => (e & se) !== 0, ve = (e, t) => t ? e | se : e & ~se, Qe = (e, t) => e.find(
+}, ce = (e) => (e & se) !== 0, ve = (e, t) => t ? e | se : e & ~se, et = (e, t) => e.find(
   (r) => r.startIndex <= t && r.endIndex > t
-), et = (e, t, r) => {
+), tt = (e, t, r) => {
   const s = [];
   let n = 0;
   for (; n < t.length; ) {
@@ -452,28 +452,28 @@ const Ie = () => {
     let l = n;
     for (; l + 1 < t.length && w(t, l + 1) === i; )
       l++;
-    const f = tt(i, r), E = rt(i), N = {
+    const f = rt(i, r), h = nt(i), N = {
       type: f,
       startIndex: c,
       endIndex: l + 1,
-      marks: E,
-      username: f === "mention" ? pe(e, l)?.search.replace(ne, "") : void 0,
-      interest: f === "interest" ? Me(e, l)?.search.replace(
+      marks: h,
+      username: f === "mention" ? De(e, l)?.search.replace(ne, "") : void 0,
+      interest: f === "interest" ? Le(e, l)?.search.replace(
         ie,
         ""
       ) : void 0,
-      href: f === "link" ? je(e, c)?.search : void 0
+      href: f === "link" ? Me(e, c)?.search : void 0
     };
     s.push(N), n = l + 1;
   }
   return s;
-}, tt = (e, t) => e & re && t.mentions ? "mention" : e & se && t.interests ? "interest" : e & ee && t.links ? "link" : (e & ($ | Y | K | W), "segment"), rt = (e) => {
+}, rt = (e, t) => e & re && t.mentions ? "mention" : e & se && t.interests ? "interest" : e & ee && t.links ? "link" : (e & ($ | Y | K | W), "segment"), nt = (e) => {
   const t = [];
   return e & $ && t.push("bold"), e & Y && t.push("italic"), e & K && t.push("underline"), e & W && t.push("strike"), t;
 }, w = (e, t) => {
   const r = e[t];
   return typeof r != "number" ? 0 : r;
-}, nt = (e, t, r) => {
+}, ot = (e, t, r) => {
   const s = w(e, t);
   switch (r) {
     case "mention":
@@ -484,7 +484,7 @@ const Ie = () => {
       return ge(s, !0);
   }
   return s;
-}, ot = (e, t, r, s) => {
+}, st = (e, t, r, s) => {
   let n = w(e, t);
   switch (r) {
     case "bold":
@@ -503,7 +503,7 @@ const Ie = () => {
       return e;
   }
   return e[t] = n, e;
-}, st = (e, t, r) => {
+}, it = (e, t, r) => {
   const s = w(e, t);
   switch (r) {
     case "bold":
@@ -517,26 +517,26 @@ const Ie = () => {
     default:
       throw Error(`Invalid mark type: ${r}`);
   }
-}, it = (e, t, r, s) => {
+}, ct = (e, t, r, s) => {
   for (let n = e; n < t; n++)
-    if (!st(s, n, r)) return !1;
+    if (!it(s, n, r)) return !1;
   return !0;
-}, Te = (e) => oe(e) || ce(e) || te(e), ct = (e, t, r, s) => {
+}, je = (e) => oe(e) || ce(e) || te(e), lt = (e, t, r, s) => {
   let n = [...e];
-  for (; Te(w(e, t - 1)) && t > 0; )
+  for (; je(w(e, t - 1)) && t > 0; )
     t--;
-  for (; Te(w(e, r)) && r < e.length; )
+  for (; je(w(e, r)) && r < e.length; )
     r++;
   let i = !0;
-  it(t, r, s, n) && (i = !1);
+  ct(t, r, s, n) && (i = !1);
   for (let c = t; c < r; c++)
-    n = ot(n, c, s, i);
+    n = st(n, c, s, i);
   return n;
-}, lt = (e, t) => {
+}, Te = (e, t) => {
   const r = new Array(e.length).fill(0);
   for (let s = 0; s < e.length; s++) {
     let n = 0;
-    const i = Qe(t, s);
+    const i = et(t, s);
     if (i) {
       i.type === "mention" ? n = Re(n, !0) : i.type === "interest" ? n = ve(n, !0) : i.type === "link" && (n = ge(n, !0));
       for (const c of i.marks)
@@ -546,8 +546,8 @@ const Ie = () => {
   }
   return r;
 }, ut = (e, t, r) => {
-  const [s, n] = Le(e), i = he(Date.now()), c = he(null), l = he(null);
-  return xe(() => (c.current && clearTimeout(c.current), l.current && clearTimeout(l.current), Date.now() - i.current, c.current = setTimeout(() => {
+  const [s, n] = xe(e), i = he(Date.now()), c = he(null), l = he(null);
+  return $e(() => (c.current && clearTimeout(c.current), l.current && clearTimeout(l.current), Date.now() - i.current, c.current = setTimeout(() => {
     n(e), i.current = Date.now();
   }, t), () => {
     c.current && clearTimeout(c.current), l.current && clearTimeout(l.current);
@@ -562,23 +562,23 @@ const Ie = () => {
   setMarkState: c,
   search: l,
   setSearch: f,
-  options: E = {},
+  options: h = {},
   entityStyles: N = {},
   debug: le = !1,
-  ...T
+  ...j
 }) => {
-  const S = C.useRef(null), [j, L] = C.useState({ start: 0, end: 0 }), [U, F] = C.useState(!1), [V, ue] = C.useState(!1), [v, M] = C.useState(
-    lt(t, s)
+  const S = C.useRef(null), [T, L] = C.useState({ start: 0, end: 0 }), [U, F] = C.useState(!1), [V, ue] = C.useState(!1), [v, M] = C.useState(
+    Te(t, s)
   );
   e.current = {
-    selectEntity: (u, m, d, g) => {
+    selectEntity: (u, g, d, E) => {
       if (!S.current) return;
       let R = [...v];
-      u === "mention" ? g = ne + g : u === "interest" && (g = ie + g);
-      const A = t.slice(0, m) + g + t.slice(d), O = ye(t, A);
-      O && (R = Pe(v, O, i));
-      for (let y = m; y < m + g.length; y++)
-        R[y] = nt(R, y, u);
+      u === "mention" ? E = ne + E : u === "interest" ? E = ie + E : u === "link" && (E = pe + E);
+      const A = t.slice(0, g) + E + t.slice(d), O = ye(t, A);
+      O ? R = Pe(v, O, i) : R = Te(A, s);
+      for (let y = g; y < g + E.length; y++)
+        R[y] = ot(R, y, u);
       r(A), M(R), f(null);
     },
     toggleMark: (u) => {
@@ -592,29 +592,29 @@ const Ie = () => {
     }
   }, []), C.useEffect(() => {
     if (!S.current) return;
-    const u = et(t, v, E), m = Ie() ?? j, d = Ce(t, u, N);
-    S.current.innerHTML = d, n(u), V && Ke(S.current, m);
+    const u = tt(t, v, h), g = Ie() ?? T, d = Ce(t, u, N);
+    S.current.innerHTML = d, n(u), V && Fe(S.current, g);
   }, [v]);
-  const z = ut(j, 500);
+  const z = ut(T, 500);
   C.useEffect(() => {
-    let { start: u, end: m } = z, d = null;
-    if (!d && !oe(w(v, u - 1)) && (d = pe(t, u), d && (d.search = d.search.replace(ne, ""))), !d && !ce(w(v, u - 1)) && (d = Me(t, u), d && (d.search = d.search.replace(ie, ""))), !d && !te(w(v, u - 1)) && (d = je(t, u)), d ? f(d) : l && f(null), U) return;
-    let g = !0, R = !0, A = !0, O = !0;
-    if (u === m)
+    let { start: u, end: g } = z, d = null;
+    if (!d && !oe(w(v, u - 1)) && (d = De(t, u), d && (d.search = d.search.replace(ne, ""))), !d && !ce(w(v, u - 1)) && (d = Le(t, u), d && (d.search = d.search.replace(ie, ""))), !d && !te(w(v, u - 1)) && (d = Me(t, u)), d ? f(d) : l && f(null), U) return;
+    let E = !0, R = !0, A = !0, O = !0;
+    if (u === g)
       if (u > 0) {
         const _ = w(v, u - 1);
-        g = q(_), R = H(_), A = Q(_), O = Z(_);
+        E = q(_), R = H(_), A = Q(_), O = Z(_);
       } else {
         const _ = w(v, u);
-        g = q(_), R = H(_), A = Q(_), O = Z(_);
+        E = q(_), R = H(_), A = Q(_), O = Z(_);
       }
     else
-      for (let _ = u; _ < m; _++) {
+      for (let _ = u; _ < g; _++) {
         const p = w(v, _);
-        g = q(p) ? g : !1, R = H(p) ? R : !1, A = Q(p) ? A : !1, O = Z(p) ? O : !1;
+        E = q(p) ? E : !1, R = H(p) ? R : !1, A = Q(p) ? A : !1, O = Z(p) ? O : !1;
       }
     c({
-      bold: g,
+      bold: E,
       italic: R,
       underline: A,
       strike: O
@@ -623,47 +623,47 @@ const Ie = () => {
   const G = (u) => {
     if (F(!0), !S.current)
       return;
-    const { start: m, end: d } = j;
-    if (m !== d) {
-      const R = ct(v, m, d, u);
+    const { start: g, end: d } = T;
+    if (g !== d) {
+      const R = lt(v, g, d, u);
       M(R);
     }
-    const g = { ...i };
-    u === "bold" ? g.bold = !i.bold : u === "italic" ? g.italic = !i.italic : u === "underline" ? g.underline = !i.underline : u === "strike" && (g.strike = !i.strike), c(g);
+    const E = { ...i };
+    u === "bold" ? E.bold = !i.bold : u === "italic" ? E.italic = !i.italic : u === "underline" ? E.underline = !i.underline : u === "strike" && (E.strike = !i.strike), c(E);
   }, X = (u) => {
     if (!S.current) return;
     if (U && F(!1), u.target.textContent.length === 0) {
       r(""), M([]), n([]);
       return;
     }
-    const m = u.target.innerText || "", d = ye(t, m);
+    const g = u.target.innerText || "", d = ye(t, g);
     if (d) {
-      const g = Pe(
+      const E = Pe(
         v,
         d,
         i
       );
-      M(g);
+      M(E);
     }
-    r(m);
+    r(g);
   }, ae = (u) => {
-    S.current && Fe(u, G);
+    S.current && ze(u, G);
   };
   return C.useEffect(() => {
     const u = () => {
-      const m = Ie() ?? { start: 0, end: 0 };
-      (m.start !== j.start || m.end !== j.end) && L(m);
+      const g = Ie() ?? { start: 0, end: 0 };
+      (g.start !== T.start || g.end !== T.end) && L(g);
     };
     return document.addEventListener("selectionchange", u), () => {
       document.removeEventListener("selectionchange", u);
     };
-  }, []), /* @__PURE__ */ We.jsx(
+  }, []), /* @__PURE__ */ Ue.jsx(
     "div",
     {
       id: "entity-editor",
       ref: S,
-      style: T.style,
-      className: T.className,
+      style: j.style,
+      className: j.className,
       contentEditable: !0,
       onKeyDown: ae,
       onInput: X

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectedxm/entity-editor",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "type": "module",
   "main": "dist/index.umd.js",