scrible 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Scrible
+
+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

@@ -0,0 +1,304 @@
+# Scrible ✍️
+
+**A powerful, customizable rich text editor for React** - Built with Slate.js, outputs clean HTML, and offers Notion-like editing experience.
+
+[![npm version](https://img.shields.io/npm/v/scrible.svg)](https://www.npmjs.com/package/scrible)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+## ✨ Features
+
+- 🎨 **Fully Customizable** - Choose which features to include
+- 📝 **Rich Text Formatting** - Bold, italic, underline, strikethrough
+- 🎨 **Color Customization** - Text and background color pickers with 24 preset colors
+- 📑 **Multiple Heading Levels** - H1, H2, H3 with semantic markup
+- 📋 **Lists** - Bulleted and numbered lists
+- 📊 **Tables** - Full table support with easy insertion
+- 🖼️ **Images** - Upload and resize images with drag handles
+- 🔗 **Links** - Automatic link detection and manual insertion
+- ↔️ **Text Alignment** - Left, center, right, justify
+- 📏 **Font Sizes** - Multiple size options
+- 💾 **Clean HTML Output** - Semantic HTML like Quill.js
+- ⌨️ **Keyboard Shortcuts** - Standard shortcuts (Ctrl+B, Ctrl+I, etc.)
+- 📱 **Responsive** - Works great on desktop and mobile
+- 🎯 **TypeScript Ready** - Full type support
+
+## 📦 Installation
+
+```bash
+npm install scrible slate slate-react slate-history
+```
+
+or
+
+```bash
+yarn add scrible slate slate-react slate-history
+```
+
+## 🚀 Quick Start
+
+```jsx
+import React, { useState } from 'react';
+import ScribleEditor from 'scrible';
+import 'scrible/dist/scrible.css';
+
+function App() {
+  const [content, setContent] = useState('');
+
+  const handleChange = (htmlContent, slateValue) => {
+    setContent(htmlContent);
+  };
+
+  return (
+    <ScribleEditor
+      onChange={handleChange}
+      placeholder="Start writing..."
+    />
+  );
+}
+```
+
+**Important:** Don't forget to import the CSS file!
+
+## 🎛️ Customizable Toolbar
+
+Choose which features to include in your editor:
+
+```jsx
+import ScribleEditor from 'scrible';
+import 'scrible/dist/scrible.css';
+
+function CustomEditor() {
+  const [content, setContent] = useState('');
+
+  // Only include the features you need
+  const features = [
+    'bold',
+    'italic',
+    'underline',
+    'headings',
+    'lists',
+    'link',
+    'image'
+  ];
+
+  return (
+    <ScribleEditor
+      features={features}
+      onChange={(html) => setContent(html)}
+      placeholder="Minimal editor..."
+    />
+  );
+}
+```
+
+### Available Features
+
+| Feature | Description |
+|---------|-------------|
+| `bold` | Bold text formatting |
+| `italic` | Italic text formatting |
+| `underline` | Underline text formatting |
+| `strikethrough` | Strikethrough text formatting |
+| `headings` | H1, H2, H3, blockquote |
+| `lists` | Bulleted and numbered lists |
+| `alignment` | Text alignment (left, center, right, justify) |
+| `fontSize` | Font size options |
+| `textColor` | Text color picker with presets and custom colors |
+| `backgroundColor` | Background/highlight color picker |
+| `link` | Insert and edit links |
+| `image` | Upload and resize images |
+| `table` | Insert and manage tables |
+| `clear` | Clear all content button |
+
+## 📖 Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `Node[]` | `null` | Controlled Slate.js value |
+| `onChange` | `(html: string, value: Node[]) => void` | `undefined` | Called when content changes |
+| `placeholder` | `string` | `"Enter some text..."` | Placeholder text |
+| `readOnly` | `boolean` | `false` | Make editor read-only |
+| `className` | `string` | `""` | Additional CSS class |
+| `initialValue` | `string \| Node[]` | `null` | Initial content (HTML string or Slate value) |
+| `features` | `string[]` | All features | Array of features to include |
+
+## 💡 Examples
+
+### Basic Editor
+
+```jsx
+<ScribleEditor
+  onChange={(html) => console.log(html)}
+  placeholder="Start typing..."
+/>
+```
+
+### Minimal Editor (Only Basic Formatting)
+
+```jsx
+<ScribleEditor
+  features={['bold', 'italic', 'underline', 'clear']}
+  onChange={(html) => console.log(html)}
+  placeholder="Simple editor..."
+/>
+```
+
+### Blog Editor (No Tables)
+
+```jsx
+<ScribleEditor
+  features={[
+    'bold', 'italic', 'underline', 'strikethrough',
+    'headings', 'lists', 'alignment',
+    'textColor', 'backgroundColor',
+    'link', 'image', 'clear'
+  ]}
+  onChange={(html) => console.log(html)}
+  placeholder="Write your blog post..."
+/>
+```
+
+### Editor with Color Highlighting
+
+```jsx
+<ScribleEditor
+  features={[
+    'bold', 'italic', 'underline',
+    'textColor', 'backgroundColor',
+    'clear'
+  ]}
+  onChange={(html) => console.log(html)}
+  placeholder="Highlight important text..."
+/>
+```
+
+### With Initial Content
+
+```jsx
+const initialContent = `
+  <h1>Welcome to Scrible</h1>
+  <p>This is a <strong>powerful</strong> editor!</p>
+`;
+
+<ScribleEditor
+  initialValue={initialContent}
+  onChange={(html) => console.log(html)}
+/>
+```
+
+### Read-Only Mode
+
+```jsx
+<ScribleEditor
+  initialValue={articleContent}
+  readOnly={true}
+/>
+```
+
+### Check if Empty
+
+```jsx
+function MyEditor() {
+  const [editorValue, setEditorValue] = useState([]);
+
+  const handleChange = (html, slateValue) => {
+    setEditorValue(slateValue);
+  };
+
+  const isEmpty = editorValue.length === 0;
+
+  return (
+    <div>
+      <ScribleEditor onChange={handleChange} />
+      {isEmpty && <p>Editor is empty!</p>}
+    </div>
+  );
+}
+```
+
+## 🎨 Custom Styling
+
+Scrible comes with default styles, but you can customize the appearance:
+
+```css
+/* Customize the editor container */
+.scrible-editor {
+  border: 2px solid #3b82f6;
+  border-radius: 12px;
+}
+
+/* Customize the toolbar */
+.toolbar {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+/* Customize the editing area */
+.editor-content {
+  min-height: 300px;
+  font-family: 'Georgia', serif;
+  font-size: 16px;
+}
+```
+
+## ⌨️ Keyboard Shortcuts
+
+- `Ctrl+B` - Bold
+- `Ctrl+I` - Italic
+- `Ctrl+U` - Underline
+- `Ctrl+Z` - Undo
+- `Ctrl+Shift+Z` - Redo
+
+## 🔧 HTML Output
+
+Scrible outputs clean, semantic HTML:
+
+```html
+<h1>Heading</h1>
+<p>This is a <strong>bold</strong> paragraph with <em>italic</em> text.</p>
+<ul>
+  <li>List item 1</li>
+  <li>List item 2</li>
+</ul>
+<table border="1">
+  <tr>
+    <th>Header 1</th>
+    <th>Header 2</th>
+  </tr>
+  <tr>
+    <td>Cell 1</td>
+    <td>Cell 2</td>
+  </tr>
+</table>
+```
+
+## 🛠️ Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Build library for npm
+npm run build:lib
+```
+
+## 📄 License
+
+MIT © [Your Name]
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 🌟 Show Your Support
+
+Give a ⭐️ if this project helped you!
+
+---
+
+**Made with ❤️ by developers, for developers**

package/dist/scrible.cjs.js

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),l=require("slate"),N=require("slate-react"),He=require("slate-history"),I=require("escape-html");var P={exports:{}},A={};var oe;function Ie(){if(oe)return A;oe=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(n,a,c){var i=null;if(c!==void 0&&(i=""+c),a.key!==void 0&&(i=""+a.key),"key"in a){c={};for(var u in a)u!=="key"&&(c[u]=a[u])}else c=a;return a=c.ref,{$$typeof:e,type:n,key:i,ref:a!==void 0?a:null,props:c}}return A.Fragment=t,A.jsx=r,A.jsxs=r,A}var _={};var le;function Pe(){return le||(le=1,process.env.NODE_ENV!=="production"&&(function(){function e(o){if(o==null)return null;if(typeof o=="function")return o.$$typeof===_e?null:o.displayName||o.name||null;if(typeof o=="string")return o;switch(o){case C:return"Fragment";case z:return"Profiler";case y:return"StrictMode";case Re:return"Suspense";case Me:return"SuspenseList";case Ae:return"Activity"}if(typeof o=="object")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 T:return"Portal";case Te:return o.displayName||"Context";case q:return(o._context.displayName||"Context")+".Consumer";case ze:var m=o.render;return o=o.displayName,o||(o=m.displayName||m.name||"",o=o!==""?"ForwardRef("+o+")":"ForwardRef"),o;case Se:return m=o.displayName||null,m!==null?m:e(o.type)||"Memo";case W:m=o._payload,o=o._init;try{return e(o(m))}catch{}}return null}function t(o){return""+o}function r(o){try{t(o);var m=!1}catch{m=!0}if(m){m=console;var x=m.error,k=typeof Symbol=="function"&&Symbol.toStringTag&&o[Symbol.toStringTag]||o.constructor.name||"Object";return x.call(m,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",k),t(o)}}function n(o){if(o===C)return"<>";if(typeof o=="object"&&o!==null&&o.$$typeof===W)return"<...>";try{var m=e(o);return m?"<"+m+">":"<...>"}catch{return"<...>"}}function a(){var o=Y.A;return o===null?null:o.getOwner()}function c(){return Error("react-stack-top-frame")}function i(o){if(ee.call(o,"key")){var m=Object.getOwnPropertyDescriptor(o,"key").get;if(m&&m.isReactWarning)return!1}return o.key!==void 0}function u(o,m){function x(){te||(te=!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)",m))}x.isReactWarning=!0,Object.defineProperty(o,"key",{get:x,configurable:!0})}function h(){var o=e(this.type);return re[o]||(re[o]=!0,console.error("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 g(o,m,x,k,H,J){var w=x.ref;return o={$$typeof:E,type:o,key:m,props:x,_owner:k},(w!==void 0?w:null)!==null?Object.defineProperty(o,"ref",{enumerable:!1,get:h}):Object.defineProperty(o,"ref",{enumerable:!1,value:null}),o._store={},Object.defineProperty(o._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(o,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(o,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:H}),Object.defineProperty(o,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.freeze&&(Object.freeze(o.props),Object.freeze(o)),o}function v(o,m,x,k,H,J){var w=m.children;if(w!==void 0)if(k)if($e(w)){for(k=0;k<w.length;k++)f(w[k]);Object.freeze&&Object.freeze(w)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else f(w);if(ee.call(m,"key")){w=e(o);var R=Object.keys(m).filter(function(Le){return Le!=="key"});k=0<R.length?"{key: someKey, "+R.join(": ..., ")+": ...}":"{key: someKey}",ae[w+k]||(R=0<R.length?"{"+R.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,k,w,R,w),ae[w+k]=!0)}if(w=null,x!==void 0&&(r(x),w=""+x),i(m)&&(r(m.key),w=""+m.key),"key"in m){x={};for(var G in m)G!=="key"&&(x[G]=m[G])}else x=m;return w&&u(x,typeof o=="function"?o.displayName||o.name||"Unknown":o),g(o,w,x,a(),H,J)}function f(o){d(o)?o._store&&(o._store.validated=1):typeof o=="object"&&o!==null&&o.$$typeof===W&&(o._payload.status==="fulfilled"?d(o._payload.value)&&o._payload.value._store&&(o._payload.value._store.validated=1):o._store&&(o._store.validated=1))}function d(o){return typeof o=="object"&&o!==null&&o.$$typeof===E}var p=b,E=Symbol.for("react.transitional.element"),T=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),y=Symbol.for("react.strict_mode"),z=Symbol.for("react.profiler"),q=Symbol.for("react.consumer"),Te=Symbol.for("react.context"),ze=Symbol.for("react.forward_ref"),Re=Symbol.for("react.suspense"),Me=Symbol.for("react.suspense_list"),Se=Symbol.for("react.memo"),W=Symbol.for("react.lazy"),Ae=Symbol.for("react.activity"),_e=Symbol.for("react.client.reference"),Y=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ee=Object.prototype.hasOwnProperty,$e=Array.isArray,X=console.createTask?console.createTask:function(){return null};p={react_stack_bottom_frame:function(o){return o()}};var te,re={},se=p.react_stack_bottom_frame.bind(p,c)(),ne=X(n(c)),ae={};_.Fragment=C,_.jsx=function(o,m,x){var k=1e4>Y.recentlyCreatedOwnerStacks++;return v(o,m,x,!1,k?Error("react-stack-top-frame"):se,k?X(n(o)):ne)},_.jsxs=function(o,m,x){var k=1e4>Y.recentlyCreatedOwnerStacks++;return v(o,m,x,!0,k?Error("react-stack-top-frame"):se,k?X(n(o)):ne)}})()),_}var ie;function De(){return ie||(ie=1,process.env.NODE_ENV==="production"?P.exports=Ie():P.exports=Pe()),P.exports}var s=De();const M=(e,t)=>{const r=S(e,t);if(t.startsWith("font-size-")){l.Editor.removeMark(e,"font-size-small"),l.Editor.removeMark(e,"font-size-normal"),l.Editor.removeMark(e,"font-size-large"),l.Editor.removeMark(e,"font-size-extra-large"),r||l.Editor.addMark(e,t,!0);return}r?l.Editor.removeMark(e,t):l.Editor.addMark(e,t,!0)},S=(e,t)=>{const r=l.Editor.marks(e);return r?r[t]===!0:!1},B=(e,t)=>{t?l.Editor.addMark(e,"color",t):l.Editor.removeMark(e,"color")},pe=e=>l.Editor.marks(e)?.color||null,V=(e,t)=>{t?l.Editor.addMark(e,"backgroundColor",t):l.Editor.removeMark(e,"backgroundColor")},ge=e=>l.Editor.marks(e)?.backgroundColor||null,F=(e,t)=>{const r=U(e,t),n=ce.includes(t);l.Transforms.unwrapNodes(e,{match:c=>!l.Editor.isEditor(c)&&l.Element.isElement(c)&&ce.includes(c.type),split:!0});let a;if(r?a={type:"paragraph"}:n?a={type:"list-item"}:a={type:t},l.Transforms.setNodes(e,a),!r&&n){const c={type:t,children:[]};l.Transforms.wrapNodes(e,c)}},L=(e,t)=>{l.Transforms.setNodes(e,{align:t},{match:r=>l.Element.isElement(r)&&l.Editor.isBlock(e,r),split:!0})},U=(e,t,r="type")=>{const{selection:n}=e;if(!n)return!1;const[a]=Array.from(l.Editor.nodes(e,{at:l.Editor.unhangRange(e,n),match:c=>!l.Editor.isEditor(c)&&l.Element.isElement(c)&&c[r]===t}));return!!a},ce=["numbered-list","bulleted-list"],Q=(e,t,r="")=>{const a={type:"image",url:t,alt:r,width:"auto",height:"auto",children:[{text:""}]};l.Transforms.insertNodes(e,a),l.Transforms.insertNodes(e,{type:"paragraph",children:[{text:""}]})},be=e=>{if(!e||!Oe(e))return!1;const t=new URL(e).pathname.split(".").pop();return["jpg","jpeg","png","gif","webp","svg"].includes(t.toLowerCase())},Oe=e=>{try{return new URL(e),!0}catch{return!1}},xe=(e,t)=>{e.selection&&ve(e,t)},ve=(e,t)=>{we(e)&&ke(e);const{selection:r}=e,n=r&&l.Range.isCollapsed(r),a={type:"link",url:t,children:n?[{text:t}]:[]};n?l.Transforms.insertNodes(e,a):(l.Transforms.wrapNodes(e,a,{split:!0}),l.Transforms.collapse(e,{edge:"end"}))},ke=e=>{l.Transforms.unwrapNodes(e,{match:t=>!l.Editor.isEditor(t)&&l.Element.isElement(t)&&t.type==="link"})},we=e=>{const[t]=l.Editor.nodes(e,{match:r=>!l.Editor.isEditor(r)&&l.Element.isElement(r)&&r.type==="link"});return!!t},Z=(e,t=3,r=3)=>{const n=Be(t,r);l.Transforms.insertNodes(e,n);const c=[...l.Editor.path(e,e.selection.anchor),0,0,0];l.Transforms.select(e,c)},Be=(e,t)=>{const r=(a=!1)=>({type:"table-cell",header:a,children:[{type:"paragraph",children:[{text:""}]}]}),n=(a=!1)=>({type:"table-row",children:Array.from({length:t},()=>r(a))});return{type:"table",children:[n(!0),...Array.from({length:e-1},()=>n(!1))]}},Ve=e=>{const[t]=l.Editor.nodes(e,{match:r=>r.type==="table"});if(t){const[,r]=t,[n]=l.Editor.nodes(e,{match:a=>a.type==="table-row"});if(n){const[a]=n,c={type:"table-row",children:a.children.map(()=>({type:"table-cell",children:[{type:"paragraph",children:[{text:""}]}]}))},i=[...r,t[0].children.length];l.Transforms.insertNodes(e,c,{at:i})}}},Fe=e=>{const[t]=l.Editor.nodes(e,{match:r=>r.type==="table"});if(t){const[r,n]=t;r.children.forEach((a,c)=>{const i={type:"table-cell",children:[{type:"paragraph",children:[{text:""}]}]},u=[...n,c,a.children.length];l.Transforms.insertNodes(e,i,{at:u})})}},Ue=e=>{const[t]=l.Editor.nodes(e,{match:r=>r.type==="table-row"});t&&l.Transforms.removeNodes(e,{match:r=>r.type==="table-row"})},qe=e=>{const[t]=l.Editor.nodes(e,{match:r=>r.type==="table-cell"});if(t){const[,r]=t,n=r[r.length-1],[a]=l.Editor.nodes(e,{match:c=>c.type==="table"});if(a){const[c,i]=a;for(let u=c.children.length-1;u>=0;u--){const h=[...i,u,n];l.Transforms.removeNodes(e,{at:h})}}}},We=e=>{const[t]=l.Editor.nodes(e,{match:r=>l.Element.isElement(r)&&l.Editor.isBlock(e,r)});return t?t[0].type:"paragraph"},Ye=e=>{const t=l.Editor.marks(e);return t?.["font-size-small"]?"small":t?.["font-size-large"]?"large":t?.["font-size-extra-large"]?"extra-large":"normal"},D=e=>{const[t]=l.Editor.nodes(e,{match:r=>l.Element.isElement(r)&&l.Editor.isBlock(e,r)});return t&&t[0].align?t[0].align:"left"},Xe=e=>{l.Transforms.delete(e,{at:{anchor:l.Editor.start(e,[]),focus:l.Editor.end(e,[])}}),l.Transforms.select(e,l.Editor.start(e,[]))},j=({active:e,children:t,onMouseDown:r,title:n,className:a="",...c})=>s.jsx("button",{className:`toolbar-button ${e?"active":""} ${a}`,onMouseDown:i=>{i.preventDefault(),r&&r()},title:n,...c,children:t}),ue=({value:e,onChange:t,children:r,title:n,...a})=>s.jsx("select",{className:"toolbar-select",value:e,onChange:c=>t(c.target.value),title:n,...a,children:r}),Je=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"})}),Ge=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"})}),Ke=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"})}),Qe=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z"})}),Ze=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"})}),et=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"})}),tt=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z"})}),rt=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z"})}),st=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z"})}),nt=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z"})}),at=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"})}),ot=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"})}),lt=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M10 10.02h5V21h-5zM17 21h3c1.1 0 2-.9 2-2v-9h-5v11zm3-18H5c-1.1 0-2 .9-2 2v3h19V5c0-1.1-.9-2-2-2zM3 19c0 1.1.9 2 2 2h3V10H3v9z"})}),it=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"})}),ct=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M2.5 4v3h5v12h3V7h5V4h-13zm19 5h-9v3h3v7h3v-7h3V9z"})}),ut=()=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:s.jsx("path",{d:"M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z"})}),de=({editor:e,type:t="text"})=>{const[r,n]=b.useState(!1),[a,c]=b.useState(""),i=t==="text",u=i?pe(e):ge(e),h=["#000000","#374151","#6b7280","#9ca3af","#d1d5db","#ffffff","#ef4444","#f97316","#f59e0b","#eab308","#84cc16","#22c55e","#10b981","#14b8a6","#06b6d4","#0ea5e9","#3b82f6","#6366f1","#8b5cf6","#a855f7","#d946ef","#ec4899","#f43f5e","#fb7185"],g=b.useCallback(d=>{i?B(e,d):V(e,d),n(!1)},[e,i]),v=b.useCallback(d=>{const p=d.target.value;c(p),i?B(e,p):V(e,p)},[e,i]),f=b.useCallback(()=>{i?B(e,null):V(e,null),n(!1)},[e,i]);return b.useEffect(()=>{if(!r)return;const d=p=>{p.target.closest(".color-picker-dropdown")||n(!1)};return document.addEventListener("mousedown",d),()=>document.removeEventListener("mousedown",d)},[r]),s.jsxs("div",{className:"color-picker-dropdown",children:[s.jsxs("button",{className:"toolbar-button color-picker-button",onMouseDown:d=>{d.preventDefault(),n(!r)},title:i?"Text Color":"Background Color",style:{position:"relative"},children:[i?s.jsx(ct,{}):s.jsx(ut,{}),u&&s.jsx("div",{className:"color-indicator",style:{backgroundColor:u,position:"absolute",bottom:"4px",left:"50%",transform:"translateX(-50%)",width:"20px",height:"3px",borderRadius:"2px"}})]}),r&&s.jsxs("div",{className:"color-picker-panel",children:[s.jsx("div",{className:"color-picker-presets",children:h.map(d=>s.jsx("button",{className:`color-swatch ${u===d?"active":""}`,style:{backgroundColor:d},onClick:p=>{p.stopPropagation(),g(d)},title:d},d))}),s.jsx("div",{className:"color-picker-custom",children:s.jsxs("label",{className:"color-picker-label",children:["Custom Color:",s.jsx("input",{type:"color",value:a||u||"#000000",onChange:v,className:"color-picker-input"})]})}),u&&s.jsx("button",{className:"color-picker-remove",onClick:d=>{d.stopPropagation(),f()},children:"Remove Color"})]})]})},dt=({editor:e})=>{const[t,r]=b.useState(!1),[n,a]=b.useState({row:0,col:0}),c=b.useCallback((i,u)=>{Z(e,i+1,u+1),r(!1),a({row:0,col:0})},[e]);return b.useEffect(()=>{if(!t)return;const i=u=>{u.target.closest(".table-dropdown")||r(!1)};return document.addEventListener("mousedown",i),()=>document.removeEventListener("mousedown",i)},[t]),s.jsxs("div",{className:"table-dropdown",children:[s.jsx("button",{className:"toolbar-button",onMouseDown:i=>{i.preventDefault(),r(!t)},title:"Insert Table",children:s.jsx(lt,{})}),t&&s.jsxs("div",{className:"table-size-selector",children:[s.jsx("div",{className:"table-grid",children:Array.from({length:6},(i,u)=>Array.from({length:6},(h,g)=>s.jsx("div",{className:`table-cell-selector ${u<=n.row&&g<=n.col?"active":""}`,onMouseEnter:()=>a({row:u,col:g}),onClick:v=>{v.stopPropagation(),c(u,g)}},`${u}-${g}`)))}),s.jsxs("div",{className:"table-size-label",children:[n.row+1," × ",n.col+1]})]})]})},ht=({features:e=["bold","italic","underline","strikethrough","headings","lists","alignment","fontSize","textColor","backgroundColor","link","image","table","clear"]})=>{const t=N.useSlate(),r=b.useRef(),n=i=>e.includes(i),a=i=>{const u=i.target.files[0];if(u&&u.type.startsWith("image/")){const h=new FileReader;h.onload=g=>{Q(t,g.target.result)},h.readAsDataURL(u)}i.target.value=""},c=()=>{const i=window.prompt("Enter the URL:");i&&xe(t,i)};return s.jsxs("div",{className:"toolbar",children:[(n("bold")||n("italic")||n("underline")||n("strikethrough"))&&s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:"toolbar-group",children:[n("bold")&&s.jsx(j,{active:S(t,"bold"),onMouseDown:()=>M(t,"bold"),title:"Bold (Ctrl+B)",children:s.jsx(Je,{})}),n("italic")&&s.jsx(j,{active:S(t,"italic"),onMouseDown:()=>M(t,"italic"),title:"Italic (Ctrl+I)",children:s.jsx(Ge,{})}),n("underline")&&s.jsx(j,{active:S(t,"underline"),onMouseDown:()=>M(t,"underline"),title:"Underline (Ctrl+U)",children:s.jsx(Ke,{})}),n("strikethrough")&&s.jsx(j,{active:S(t,"strikethrough"),onMouseDown:()=>M(t,"strikethrough"),title:"Strikethrough",children:s.jsx(Qe,{})})]}),s.jsx("div",{className:"toolbar-separator"})]}),n("headings")&&s.jsxs(s.Fragment,{children:[s.jsx("div",{className:"toolbar-group",children:s.jsxs(ue,{value:We(t),onChange:i=>F(t,i),children:[s.jsx("option",{value:"paragraph",children:"Paragraph"}),s.jsx("option",{value:"heading-one",children:"Heading 1"}),s.jsx("option",{value:"heading-two",children:"Heading 2"}),s.jsx("option",{value:"heading-three",children:"Heading 3"}),s.jsx("option",{value:"blockquote",children:"Quote"})]})}),s.jsx("div",{className:"toolbar-separator"})]}),n("lists")&&s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:"toolbar-group",children:[s.jsx(j,{active:U(t,"bulleted-list"),onMouseDown:()=>F(t,"bulleted-list"),title:"Bulleted List",children:s.jsx(Ze,{})}),s.jsx(j,{active:U(t,"numbered-list"),onMouseDown:()=>F(t,"numbered-list"),title:"Numbered List",children:s.jsx(et,{})})]}),s.jsx("div",{className:"toolbar-separator"})]}),n("alignment")&&s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:"toolbar-group",children:[s.jsx(j,{active:D(t)==="left",onMouseDown:()=>L(t,"left"),title:"Align Left",children:s.jsx(tt,{})}),s.jsx(j,{active:D(t)==="center",onMouseDown:()=>L(t,"center"),title:"Align Center",children:s.jsx(rt,{})}),s.jsx(j,{active:D(t)==="right",onMouseDown:()=>L(t,"right"),title:"Align Right",children:s.jsx(st,{})}),s.jsx(j,{active:D(t)==="justify",onMouseDown:()=>L(t,"justify"),title:"Justify",children:s.jsx(nt,{})})]}),s.jsx("div",{className:"toolbar-separator"})]}),n("fontSize")&&s.jsxs(s.Fragment,{children:[s.jsx("div",{className:"toolbar-group",children:s.jsxs(ue,{value:Ye(t),onChange:i=>M(t,`font-size-${i}`),title:"Font Size",children:[s.jsx("option",{value:"small",children:"Small"}),s.jsx("option",{value:"normal",children:"Normal"}),s.jsx("option",{value:"large",children:"Large"}),s.jsx("option",{value:"extra-large",children:"Extra Large"})]})}),s.jsx("div",{className:"toolbar-separator"})]}),(n("textColor")||n("backgroundColor"))&&s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:"toolbar-group",children:[n("textColor")&&s.jsx(de,{editor:t,type:"text"}),n("backgroundColor")&&s.jsx(de,{editor:t,type:"background"})]}),s.jsx("div",{className:"toolbar-separator"})]}),(n("link")||n("image")||n("table"))&&s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:"toolbar-group",children:[n("link")&&s.jsx(j,{onMouseDown:c,title:"Insert Link",children:s.jsx(at,{})}),n("image")&&s.jsx(j,{onMouseDown:()=>r.current?.click(),title:"Insert Image",children:s.jsx(ot,{})}),n("table")&&s.jsx(dt,{editor:t})]}),s.jsx("div",{className:"toolbar-separator"})]}),n("clear")&&s.jsx("div",{className:"toolbar-group",children:s.jsx(j,{onMouseDown:()=>Xe(t),title:"Clear All Content",className:"clear-button",children:s.jsx(it,{})})}),s.jsx("input",{ref:r,type:"file",accept:"image/*",onChange:a,style:{display:"none"}})]})},mt=({attributes:e,children:t,element:r,editor:n})=>{const a=N.useSelected(),c=N.useFocused(),[i,u]=b.useState(!1),h=b.useRef(),g=b.useCallback(d=>{d.preventDefault(),d.stopPropagation(),u(!0);const p=d.clientX,E=h.current.offsetWidth;h.current.naturalHeight/h.current.naturalWidth;const T=y=>{const z=y.clientX-p,q=Math.max(100,Math.min(1200,E+z));h.current.style.width=`${q}px`,h.current.style.height="auto"},C=()=>{u(!1);const y=h.current.offsetWidth;try{const z=N.ReactEditor.findPath(n,r);l.Transforms.setNodes(n,{width:y,height:"auto"},{at:z})}catch(z){console.warn("Could not update image dimensions:",z)}document.removeEventListener("mousemove",T),document.removeEventListener("mouseup",C)};document.addEventListener("mousemove",T),document.addEventListener("mouseup",C)},[n,r]),v=b.useCallback(d=>{d.preventDefault(),d.stopPropagation();try{const p=N.ReactEditor.findPath(n,r);l.Transforms.removeNodes(n,{at:p})}catch(p){console.warn("Could not delete image:",p)}},[n,r]),f=r.width||300;return s.jsxs("div",{...e,children:[t,s.jsx("div",{contentEditable:!1,className:`image-container ${a&&c?"selected":""}`,style:{display:"block",position:"relative",margin:"16px 0",textAlign:"center"},children:s.jsxs("div",{style:{display:"inline-block",position:"relative"},children:[s.jsx("img",{ref:h,src:r.url,alt:r.alt||"",className:"resizable-image",style:{width:`${f}px`,height:"auto",maxWidth:"100%",display:"block",borderRadius:"4px",boxShadow:a&&c?"0 0 0 3px #3b82f6":"0 1px 3px rgba(0, 0, 0, 0.1)",transition:i?"none":"box-shadow 0.15s ease",userSelect:"none"},draggable:!1}),a&&c&&s.jsxs(s.Fragment,{children:[s.jsx("div",{className:"resize-handle",onMouseDown:g,style:{position:"absolute",bottom:"-6px",right:"-6px",width:"16px",height:"16px",background:"#3b82f6",border:"2px solid white",cursor:"nwse-resize",borderRadius:"50%",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.3)",zIndex:10}}),s.jsx("button",{className:"delete-button",onMouseDown:v,title:"Delete image",type:"button",style:{position:"absolute",top:"-10px",right:"-10px",width:"24px",height:"24px",background:"#ef4444",color:"white",border:"none",borderRadius:"50%",cursor:"pointer",fontSize:"18px",fontWeight:"bold",lineHeight:"1",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.3)",zIndex:11,padding:0},children:"×"})]})]})})]})},ft=({attributes:e,children:t,element:r})=>{const n={textAlign:r.align};switch(r.type){case"heading-one":return s.jsx("h1",{...e,style:n,className:"heading-one",children:t});case"heading-two":return s.jsx("h2",{...e,style:n,className:"heading-two",children:t});case"heading-three":return s.jsx("h3",{...e,style:n,className:"heading-three",children:t});case"blockquote":return s.jsx("blockquote",{...e,style:n,className:"blockquote",children:t});case"bulleted-list":return s.jsx("ul",{...e,style:n,className:"bulleted-list",children:t});case"numbered-list":return s.jsx("ol",{...e,style:n,className:"numbered-list",children:t});case"list-item":return s.jsx("li",{...e,className:"list-item",children:t});case"link":return s.jsx("a",{...e,href:r.url,className:"link",children:t});case"image":return s.jsx(mt,{attributes:e,children:t,element:r,editor:N.useSlate()});case"table":return s.jsx("div",{...e,className:"table-container",children:s.jsx("table",{className:"simple-table",children:s.jsx("tbody",{children:t})})});case"table-row":return s.jsx("tr",{...e,className:"table-row",children:t});case"table-cell":return s.jsx("td",{...e,className:`table-cell ${r.header?"table-header-cell":""}`,children:t});default:return s.jsx("p",{...e,style:n,className:"paragraph",children:t})}},pt=({attributes:e,children:t,leaf:r})=>{let n="",a={};return r.bold&&(n+=" bold"),r.italic&&(n+=" italic"),r.underline&&(n+=" underline"),r.strikethrough&&(n+=" strikethrough"),r["font-size-small"]&&(n+=" font-size-small"),r["font-size-large"]&&(n+=" font-size-large"),r["font-size-extra-large"]&&(n+=" font-size-extra-large"),r.color&&(a.color=r.color),r.backgroundColor&&(a.backgroundColor=r.backgroundColor),s.jsx("span",{...e,className:n.trim(),style:a,children:t})},gt=({target:e,search:t,onClose:r})=>{const n=N.useSlate(),a=b.useRef(),[c,i]=b.useState(0),h=[{title:"Heading 1",description:"Big section heading",icon:"H1",command:()=>g(n,"heading-one")},{title:"Heading 2",description:"Medium section heading",icon:"H2",command:()=>g(n,"heading-two")},{title:"Heading 3",description:"Small section heading",icon:"H3",command:()=>g(n,"heading-three")},{title:"Bulleted List",description:"Create a simple bulleted list",icon:"•",command:()=>g(n,"bulleted-list")},{title:"Numbered List",description:"Create a list with numbering",icon:"1.",command:()=>g(n,"numbered-list")},{title:"Quote",description:"Capture a quote",icon:'"',command:()=>g(n,"blockquote")},{title:"Table",description:"Insert a table",icon:"⊞",command:()=>{v(n,e),Z(n,3,3),r()}},{title:"Image",description:"Upload or embed an image",icon:"🖼",command:()=>{v(n,e);const f=document.createElement("input");f.type="file",f.accept="image/*",f.onchange=d=>{const p=d.target.files[0];if(p){const E=new FileReader;E.onload=T=>{Q(n,T.target.result)},E.readAsDataURL(p)}},f.click(),r()}}].filter(f=>f.title.toLowerCase().includes(t.toLowerCase())||f.description.toLowerCase().includes(t.toLowerCase())),g=(f,d)=>{v(f,e);const p={type:d};d==="bulleted-list"||d==="numbered-list"?(l.Transforms.setNodes(f,{type:"list-item"}),l.Transforms.wrapNodes(f,{type:d,children:[]})):l.Transforms.setNodes(f,p),r()},v=(f,d)=>{l.Transforms.select(f,d),l.Transforms.delete(f)};return b.useEffect(()=>{i(0)},[t]),b.useEffect(()=>{const f=d=>{d.key==="ArrowDown"?(d.preventDefault(),i(p=>p<h.length-1?p+1:0)):d.key==="ArrowUp"?(d.preventDefault(),i(p=>p>0?p-1:h.length-1)):d.key==="Enter"?(d.preventDefault(),h[c]&&h[c].command()):d.key==="Escape"&&(d.preventDefault(),r())};return document.addEventListener("keydown",f),()=>document.removeEventListener("keydown",f)},[c,h,r]),h.length===0?null:s.jsx("div",{ref:a,className:"slash-menu",children:h.map((f,d)=>s.jsxs("div",{className:`slash-menu-item ${d===c?"selected":""}`,onClick:f.command,children:[s.jsx("div",{className:"slash-menu-icon",children:f.icon}),s.jsxs("div",{className:"slash-menu-content",children:[s.jsx("div",{className:"slash-menu-title",children:f.title}),s.jsx("div",{className:"slash-menu-description",children:f.description})]})]},f.title))})},bt=e=>{const{insertData:t,isVoid:r}=e;return e.isVoid=n=>n.type==="image"?!0:r(n),e.insertData=n=>{const a=n.getData("text/plain"),{files:c}=n;if(c&&c.length>0)for(const i of c){const u=new FileReader,[h]=i.type.split("/");h==="image"&&(u.addEventListener("load",()=>{const g=u.result;he(e,g)}),u.readAsDataURL(i))}else be(a)?he(e,a):t(n)},e},he=(e,t)=>{const n={type:"image",url:t,children:[{text:""}]};l.Transforms.insertNodes(e,n)},xt=e=>{const{deleteBackward:t,deleteForward:r,insertBreak:n}=e;return e.deleteBackward=(...a)=>{const{selection:c}=e;if(c&&l.Range.isCollapsed(c)){const[i]=l.Editor.nodes(e,{match:u=>u.type==="table-cell"});if(i){const[,u]=i,h=l.Editor.start(e,u);if(l.Point.equals(c.anchor,h))return}}t(...a)},e.deleteForward=(...a)=>{const{selection:c}=e;if(c&&l.Range.isCollapsed(c)){const[i]=l.Editor.nodes(e,{match:u=>u.type==="table-cell"});if(i){const[,u]=i,h=l.Editor.end(e,u);if(l.Point.equals(c.anchor,h))return}}r(...a)},e.insertBreak=(...a)=>{const{selection:c}=e;if(c){const[i]=l.Editor.nodes(e,{match:u=>u.type==="table"});if(i)return}n(...a)},e},vt=e=>{const{insertData:t,insertText:r,isInline:n}=e;return e.isInline=a=>a.type==="link"?!0:n(a),e.insertText=a=>{a&&me(a)?fe(e,a):r(a)},e.insertData=a=>{const c=a.getData("text/plain");c&&me(c)?fe(e,c):t(a)},e},me=e=>{try{return new URL(e),!0}catch{return!1}},fe=(e,t)=>{wt(e)&&kt(e);const{selection:r}=e,n=r&&l.Range.isCollapsed(r),a={type:"link",url:t,children:n?[{text:t}]:[]};n?l.Transforms.insertNodes(e,a):(l.Transforms.wrapNodes(e,a,{split:!0}),l.Transforms.collapse(e,{edge:"end"}))},kt=e=>{l.Transforms.unwrapNodes(e,{match:t=>t.type==="link"})},wt=e=>{const[t]=l.Editor.nodes(e,{match:r=>r.type==="link"});return!!t},je=e=>e.map(t=>Ee(t)).join(""),Ee=e=>{if(l.Text.isText(e)){let r=I(e.text);return e.bold&&(r=`<strong>${r}</strong>`),e.italic&&(r=`<em>${r}</em>`),e.underline&&(r=`<u>${r}</u>`),e.strikethrough&&(r=`<s>${r}</s>`),e["font-size-small"]?r=`<span style="font-size: 12px;">${r}</span>`:e["font-size-large"]?r=`<span style="font-size: 16px;">${r}</span>`:e["font-size-extra-large"]&&(r=`<span style="font-size: 18px;">${r}</span>`),e.color&&(r=`<span style="color: ${e.color};">${r}</span>`),e.backgroundColor&&(r=`<span style="background-color: ${e.backgroundColor};">${r}</span>`),r}const t=e.children.map(r=>Ee(r)).join("");switch(e.type){case"paragraph":return`<p${$(e)}>${t}</p>`;case"heading-one":return`<h1${$(e)}>${t}</h1>`;case"heading-two":return`<h2${$(e)}>${t}</h2>`;case"heading-three":return`<h3${$(e)}>${t}</h3>`;case"blockquote":return`<blockquote${$(e)}>${t}</blockquote>`;case"bulleted-list":return`<ul>${t}</ul>`;case"numbered-list":return`<ol>${t}</ol>`;case"list-item":return`<li>${t}</li>`;case"link":return`<a href="${I(e.url)}">${t}</a>`;case"image":const r=e.width?`width: ${e.width}px; `:"";return`<img src="${I(e.url)}" alt="${I(e.alt||"")}" style="${r}max-width: 100%; height: auto;" />`;case"table":return`<table border="1" style="border-collapse: collapse; width: 100%;">${t}</table>`;case"table-row":return`<tr>${t}</tr>`;case"table-cell":const n=e.header?"th":"td";return`<${n} style="border: 1px solid #ccc; padding: 8px;">${t}</${n}>`;default:return t}},$=e=>e.align?` style="text-align: ${e.align};"`:"",ye=e=>{const t=new DOMParser().parseFromString(e,"text/html");return Ce(t.body.childNodes)},Ce=e=>{const t=[];for(const r of e){const n=jt(r);n&&(Array.isArray(n)?t.push(...n):t.push(n))}return t.length>0?t:[{type:"paragraph",children:[{text:""}]}]},jt=e=>{if(e.nodeType===Node.TEXT_NODE)return{text:e.textContent};if(e.nodeType!==Node.ELEMENT_NODE)return null;const t=Ce(e.childNodes),r={children:t},n=e.getAttribute("style");if(n&&n.includes("text-align:")){const a=n.match(/text-align:\s*([^;]+)/);a&&(r.align=a[1].trim())}switch(e.nodeName.toLowerCase()){case"p":return{...r,type:"paragraph"};case"h1":return{...r,type:"heading-one"};case"h2":return{...r,type:"heading-two"};case"h3":return{...r,type:"heading-three"};case"blockquote":return{...r,type:"blockquote"};case"ul":return{...r,type:"bulleted-list"};case"ol":return{...r,type:"numbered-list"};case"li":return{...r,type:"list-item"};case"a":return{...r,type:"link",url:e.getAttribute("href")};case"img":const a=e.getAttribute("style");let c=300;if(a&&a.includes("width:")){const i=a.match(/width:\s*(\d+)px/);i&&(c=parseInt(i[1]))}return{type:"image",url:e.getAttribute("src"),alt:e.getAttribute("alt")||"",width:c,children:[{text:""}]};case"table":return{...r,type:"table"};case"tr":return{...r,type:"table-row"};case"td":return{...r,type:"table-cell"};case"th":return{...r,type:"table-cell",header:!0};case"strong":case"b":return O(t,"bold");case"em":case"i":return O(t,"italic");case"u":return O(t,"underline");case"s":case"strike":return O(t,"strikethrough");case"span":return Et(e,t);case"br":return{text:`
+`};case"div":return t.length>0?{...r,type:"paragraph"}:null;default:return t}},O=(e,t)=>e.map(r=>r.text!==void 0?{...r,[t]:!0}:r),Et=(e,t)=>{const r=e.getAttribute("style");let n={};if(r){r.includes("font-size: 12px")?n["font-size-small"]=!0:r.includes("font-size: 16px")?n["font-size-large"]=!0:r.includes("font-size: 18px")&&(n["font-size-extra-large"]=!0);const a=r.match(/color:\s*([^;]+)/);a&&(n.color=a[1].trim());const c=r.match(/background-color:\s*([^;]+)/);c&&(n.backgroundColor=c[1].trim())}return Object.keys(n).length>0?t.map(a=>a.text!==void 0?{...a,...n}:a):t},yt=(e,t,r)=>{const[n,a]=b.useState(()=>t?typeof t=="string"?ye(t):t:e||[{type:"paragraph",children:[{text:""}]}]);return{editorValue:n,handleChange:(i,u)=>{if(a(i),u&&u(i),r){const h=i.length===1&&i[0].type==="paragraph"&&i[0].children.length===1&&i[0].children[0].text==="",g=h?"":je(i);r(g,h?[]:i)}}}},Ct=e=>{const[t,r]=b.useState(null),n=b.useCallback(c=>{const{selection:i}=e;if(i&&l.Range.isCollapsed(i)){const[u]=l.Range.edges(i),h=l.Editor.before(e,u,{unit:"word"}),g=h&&l.Editor.before(e,h),v=g&&l.Editor.range(e,g,u),f=v&&l.Editor.string(e,v),d=f&&f.match(/\/(\w*)$/),p=l.Editor.after(e,u),E=l.Editor.range(e,u,p),C=l.Editor.string(e,E).match(/^(\s|$)/);r(d&&C?{target:v,search:d[1]}:null)}else r(null)},[e]),a=b.useCallback(()=>{r(null)},[]);return{slashMenu:t,handleSlashMenu:n,closeSlashMenu:a}},K=(e,t)=>{const r=l.Editor.marks(e);(r?r[t]===!0:!1)?l.Editor.removeMark(e,t):l.Editor.addMark(e,t,!0)},Nt=e=>b.useCallback(t=>{if(t.ctrlKey)switch(t.key){case"b":{t.preventDefault(),K(e,"bold");break}case"i":{t.preventDefault(),K(e,"italic");break}case"u":{t.preventDefault(),K(e,"underline");break}case"z":{t.shiftKey?(t.preventDefault(),e.redo()):(t.preventDefault(),e.undo());break}}},[e]),Ne=({value:e,onChange:t,placeholder:r="Enter some text...",readOnly:n=!1,className:a="",initialValue:c=null,features:i=["bold","italic","underline","fontSize"]})=>{const u=b.useMemo(()=>vt(xt(bt(He.withHistory(N.withReact(l.createEditor()))))),[]),{editorValue:h,handleChange:g}=yt(e,c,t),{slashMenu:v,handleSlashMenu:f,closeSlashMenu:d}=Ct(u),p=Nt(u),E=b.useCallback(y=>s.jsx(ft,{...y}),[]),T=b.useCallback(y=>s.jsx(pt,{...y}),[]),C=b.useCallback(y=>{g(y,f)},[g,f]);return s.jsx("div",{className:`scrible-editor ${a}`,children:s.jsxs(N.Slate,{editor:u,initialValue:h,onChange:C,children:[!n&&s.jsx(ht,{features:i}),s.jsxs("div",{className:"editor-container",children:[s.jsx(N.Editable,{renderElement:E,renderLeaf:T,placeholder:r,onKeyDown:p,readOnly:n,className:"editor-content"}),v&&s.jsx(gt,{target:v.target,search:v.search,onClose:d})]})]})})};exports.ScribleEditor=Ne;exports.default=Ne;exports.deleteTableColumn=qe;exports.deleteTableRow=Ue;exports.deserialize=ye;exports.getBackgroundColor=ge;exports.getTextColor=pe;exports.insertImage=Q;exports.insertLink=xe;exports.insertTable=Z;exports.insertTableColumn=Fe;exports.insertTableRow=Ve;exports.isBlockActive=U;exports.isImageUrl=be;exports.isLinkActive=we;exports.isMarkActive=S;exports.serialize=je;exports.setBackgroundColor=V;exports.setTextColor=B;exports.toggleAlignment=L;exports.toggleBlock=F;exports.toggleMark=M;exports.unwrapLink=ke;exports.wrapLink=ve;

package/dist/scrible.css

@@ -0,0 +1 @@
+.toolbar{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid #e5e7eb;background-color:#f9fafb;border-radius:8px 8px 0 0;flex-wrap:wrap;gap:4px}.toolbar-group{display:flex;align-items:center;gap:2px}.toolbar-separator{width:1px;height:24px;background-color:#d1d5db;margin:0 8px}.toolbar-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:4px;cursor:pointer;color:#374151;transition:all .15s ease}.toolbar-button:hover{background-color:#e5e7eb;color:#111827}.toolbar-button.active{background-color:#3b82f6;color:#fff}.toolbar-button:disabled{opacity:.5;cursor:not-allowed}.toolbar-select{padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;background:#fff;font-size:13px;color:#374151;cursor:pointer;min-width:100px}.toolbar-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6}.toolbar-select:hover{border-color:#9ca3af}.table-dropdown{position:relative}.table-size-selector{position:absolute;top:100%;left:0;background:#fff;border:1px solid #d1d5db;border-radius:6px;padding:8px;box-shadow:0 4px 6px #0000001a;z-index:1000}.table-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;margin-bottom:8px}.table-cell-selector{width:16px;height:16px;border:1px solid #e5e7eb;cursor:pointer;transition:background-color .15s ease}.table-cell-selector:hover,.table-cell-selector.active{background-color:#3b82f6;border-color:#2563eb}.table-size-label{text-align:center;font-size:12px;color:#6b7280;font-weight:500}@media(max-width:768px){.toolbar{padding:6px 8px;gap:2px}.toolbar-separator{display:none}.toolbar-button{width:28px;height:28px}.toolbar-select{min-width:80px;font-size:12px;padding:4px 6px}.table-size-selector{left:-50px}}.toolbar-button.clear-button{background-color:#ef4444;color:#fff}.toolbar-button.clear-button:hover{background-color:#dc2626}.toolbar-button.clear-button.active{background-color:#b91c1c}.color-picker-dropdown,.color-picker-button{position:relative}.color-indicator{pointer-events:none}.color-picker-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid #d1d5db;border-radius:6px;padding:12px;box-shadow:0 4px 6px #0000001a;z-index:1000;min-width:200px;margin-top:4px}.color-picker-presets{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:12px}.color-swatch{width:28px;height:28px;border:2px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .15s ease;padding:0}.color-swatch:hover{transform:scale(1.1);border-color:#9ca3af}.color-swatch.active{border-color:#3b82f6;border-width:3px;box-shadow:0 0 0 2px #3b82f633}.color-picker-custom{padding:8px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;margin-bottom:8px}.color-picker-label{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#374151;gap:8px}.color-picker-input{width:50px;height:32px;border:1px solid #d1d5db;border-radius:4px;cursor:pointer}.color-picker-input::-webkit-color-swatch-wrapper{padding:2px}.color-picker-input::-webkit-color-swatch{border:none;border-radius:2px}.color-picker-remove{width:100%;padding:6px 12px;background-color:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;font-size:13px;color:#374151;cursor:pointer;transition:all .15s ease}.color-picker-remove:hover{background-color:#e5e7eb;border-color:#9ca3af}.scrible-editor{border:1px solid #e1e5e9;border-radius:8px;background:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.editor-container{min-height:200px;max-height:600px;overflow-y:auto}.editor-content{padding:16px;outline:none;line-height:1.6;font-size:14px}.editor-content [data-slate-placeholder]{color:#9ca3af;opacity:1}.bold{font-weight:700}.italic{font-style:italic}.underline{text-decoration:underline}.strikethrough{text-decoration:line-through}.heading-one{font-size:2em;font-weight:700;margin:.67em 0;line-height:1.2}.heading-two{font-size:1.5em;font-weight:700;margin:.75em 0;line-height:1.3}.heading-three{font-size:1.17em;font-weight:700;margin:.83em 0;line-height:1.4}.bulleted-list,.numbered-list{margin:16px 0;padding-left:0;list-style:none}.bulleted-list{list-style-type:disc;padding-left:20px}.numbered-list{list-style-type:decimal;padding-left:20px}.list-item{margin:4px 0;padding:0;position:relative;display:list-item}.blockquote{border-left:4px solid #e5e7eb;margin:16px 0;padding:8px 16px;background-color:#f9fafb;font-style:italic;color:#6b7280}.link{color:#3b82f6;text-decoration:underline;cursor:pointer}.link:hover{color:#1d4ed8}.image-container{display:inline-block;position:relative;max-width:100%}.image{max-width:100%;height:auto;border-radius:4px;box-shadow:0 1px 3px #0000001a}.image.selected{box-shadow:0 0 0 2px #3b82f6}.image-resize-handle{position:absolute;bottom:0;right:0;width:12px;height:12px;background:#3b82f6;cursor:se-resize;border-radius:2px}.table-container{margin:16px 0;overflow-x:auto;border-radius:8px;box-shadow:0 1px 3px #0000001a}.simple-table{width:100%;border-collapse:collapse;border:1px solid #e5e7eb;background:#fff}.table-row{border-bottom:1px solid #e5e7eb}.table-cell{border:1px solid #e5e7eb;padding:12px;min-width:120px;position:relative;vertical-align:top}.table-cell:focus-within{background:#f8fafc;outline:2px solid #3b82f6;outline-offset:-2px}.table-header-cell{background-color:#f1f5f9;font-weight:600;color:#334155}.table-cell p{margin:0;min-height:1.2em}.image-container{position:relative}.image-container.selected{outline:2px solid #3b82f6;outline-offset:4px;border-radius:8px}.resizable-image{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.align-justify{text-align:justify}.font-size-small{font-size:12px}.font-size-normal{font-size:14px}.font-size-large{font-size:16px}.font-size-extra-large{font-size:18px}.slash-menu{position:absolute;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 6px #0000001a;padding:8px;min-width:280px;max-height:300px;overflow-y:auto;z-index:1000}.slash-menu-item{display:flex;align-items:center;padding:8px 12px;border-radius:6px;cursor:pointer;transition:background-color .15s ease}.slash-menu-item:hover,.slash-menu-item.selected{background-color:#f3f4f6}.slash-menu-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#f9fafb;border-radius:6px;font-weight:600;font-size:14px;margin-right:12px;flex-shrink:0}.slash-menu-content{flex:1}.slash-menu-title{font-weight:500;color:#111827;font-size:14px;margin-bottom:2px}.slash-menu-description{font-size:12px;color:#6b7280}@media(max-width:768px){.editor-content{padding:12px}.table-container{font-size:12px}.table-cell{padding:6px 8px;min-width:80px}.slash-menu{min-width:240px}}