fountainjs-editor 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 FountainJS Contributors
+
+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,460 @@
+# FountainJS Editor
+
+A modern, modular, and extensible rich text editor library built with TypeScript. Use it in React, Vue, Angular, or vanilla JavaScript projects.
+
+## Features
+
+✨ **Modular Architecture** - Built from the ground up to be composable and extensible  
+📝 **Multiple Content Types** - Headings, paragraphs, tables, lists, images, and more  
+⌨️ **Keyboard Shortcuts** - Built-in support for Ctrl+B (bold), Ctrl+I (italic), and more  
+🎨 **Flexible Styling** - Customize the editor appearance with CSS  
+🔌 **Plugin System** - Extend functionality with plugins (history, markdown shortcuts, etc.)  
+🎯 **Type-Safe** - Full TypeScript support with comprehensive type definitions  
+📱 **Responsive** - Works great on desktop and mobile devices  
+
+## Installation
+
+### Via npm
+
+```bash
+npm install @fountainjs/editor
+```
+
+### Via pnpm
+
+```bash
+pnpm add @fountainjs/editor
+```
+
+### Via yarn
+
+```bash
+yarn add @fountainjs/editor
+```
+
+## Quick Start - React
+
+### Basic Editor
+
+```tsx
+import React from 'react';
+import { useFountain, FountainEditor, CoreSchemaSpec, historyPlugin } from '@fountainjs/editor/react';
+
+function MyEditor() {
+  const editor = useFountain({
+    schema: CoreSchemaSpec,
+    plugins: [historyPlugin],
+  });
+
+  return (
+    <div style={{ padding: '2rem' }}>
+      <FountainEditor editor={editor} />
+    </div>
+  );
+}
+
+export default MyEditor;
+```
+
+### With Toolbar
+
+```tsx
+import React from 'react';
+import { Node, useFountain, FountainEditor, CoreSchemaSpec, historyPlugin } from '@fountainjs/editor/react';
+
+function Editor() {
+  const editor = useFountain({
+    schema: CoreSchemaSpec,
+    plugins: [historyPlugin],
+  });
+
+  const insertHeading = (level: 1 | 2 | 3) => {
+    if (!editor) return;
+    const { state } = editor;
+    const text = new Node(state.schema.nodes.text, {}, [], 'Heading');
+    const heading = new Node(state.schema.nodes.heading, { level }, [text]);
+    const tr = state.createTransaction().replace(
+      state.doc.content.length,
+      state.doc.content.length,
+      [heading]
+    );
+    editor.dispatch(tr);
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: '1rem' }}>
+        <button onClick={() => insertHeading(1)}>H1</button>
+        <button onClick={() => insertHeading(2)}>H2</button>
+        <button onClick={() => insertHeading(3)}>H3</button>
+      </div>
+      <FountainEditor editor={editor} />
+    </div>
+  );
+}
+
+export default Editor;
+```
+
+## Quick Start - Vanilla JavaScript
+
+```typescript
+import {
+  createEditor,
+  EditorView,
+  CoreSchemaSpec,
+  historyPlugin,
+} from '@fountainjs/editor';
+
+// Create an editor
+const editor = createEditor({
+  schema: CoreSchemaSpec,
+  plugins: [historyPlugin],
+});
+
+// Mount it to a DOM element
+const container = document.getElementById('editor');
+const view = new EditorView(container, editor);
+
+// Subscribe to changes
+editor.subscribe((newState) => {
+  console.log('Editor state changed:', newState);
+});
+```
+
+## API Documentation
+
+### Core Components
+
+#### `useFountain(config)`
+
+Hook to create and manage a FountainJS editor instance in React.
+
+**Parameters:**
+
+```typescript
+interface EditorConfig {
+  schema: SchemaSpec;
+  state?: EditorState;
+  plugins?: Plugin[];
+}
+```
+
+**Returns:** `Editor | null`
+
+**Example:**
+
+```tsx
+const editor = useFountain({
+  schema: CoreSchemaSpec,
+  plugins: [historyPlugin],
+});
+```
+
+---
+
+#### `FountainEditor`
+
+React component that renders the editor.
+
+**Props:**
+
+```typescript
+interface FountainEditorProps {
+  editor: Editor | null;
+}
+```
+
+**Example:**
+
+```tsx
+<FountainEditor editor={editor} />
+```
+
+---
+
+#### `Navigator`
+
+React component that displays the document structure.
+
+**Props:**
+
+```typescript
+interface NavigatorProps {
+  editor: Editor | null;
+}
+```
+
+**Example:**
+
+```tsx
+<Navigator editor={editor} />
+```
+
+---
+
+#### `createEditor(config)`
+
+Creates a new editor instance (vanilla JS).
+
+**Parameters:**
+
+```typescript
+interface EditorConfig {
+  schema: SchemaSpec;
+  state?: EditorState;
+  plugins?: Plugin[];
+}
+```
+
+**Returns:** `Editor`
+
+**Example:**
+
+```typescript
+const editor = createEditor({
+  schema: CoreSchemaSpec,
+  plugins: [historyPlugin],
+});
+```
+
+---
+
+#### `EditorView`
+
+Mounts an editor to a DOM element and manages rendering.
+
+**Constructor:**
+
+```typescript
+new EditorView(mount: HTMLElement, editor: Editor)
+```
+
+**Methods:**
+
+- `execCommand(command: string, value?: string): boolean` - Execute a browser command
+- `destroy(): void` - Cleanup and remove the editor
+
+**Example:**
+
+```typescript
+const view = new EditorView(document.getElementById('editor'), editor);
+
+// Later...
+view.destroy();
+```
+
+---
+
+### Built-in Schemas
+
+#### `CoreSchemaSpec`
+
+A comprehensive schema that includes:
+
+- **Nodes:** doc, paragraph, heading, bullet_list, list_item, table, table_row, table_cell, image_super, figcaption, text
+- **Marks:** strong (bold), em (italic)
+
+**Usage:**
+
+```typescript
+import { CoreSchemaSpec } from '@fountainjs/editor';
+
+const editor = useFountain({
+  schema: CoreSchemaSpec,
+});
+```
+
+---
+
+### Plugins
+
+#### `historyPlugin`
+
+Provides undo/redo functionality.
+
+**Usage:**
+
+```typescript
+import { historyPlugin } from '@fountainjs/editor';
+
+const editor = useFountain({
+  schema: CoreSchemaSpec,
+  plugins: [historyPlugin],
+});
+```
+
+---
+
+### Schema Types
+
+#### `SchemaSpec`
+
+Define custom node and mark types.
+
+```typescript
+interface SchemaSpec {
+  nodes: { [name: string]: NodeSpec };
+  marks?: { [name: string]: MarkSpec };
+}
+```
+
+**Example:**
+
+```typescript
+const mySchema: SchemaSpec = {
+  nodes: {
+    doc: {
+      content: 'block+',
+    },
+    paragraph: {
+      content: 'inline*',
+      parseDOM: [{ tag: 'p' }],
+      toDOM: () => ['p', 0],
+    },
+    text: {
+      inline: true,
+    },
+  },
+  marks: {
+    bold: {
+      parseDOM: [{ tag: 'strong' }],
+      toDOM: () => ['strong', 0],
+    },
+  },
+};
+```
+
+---
+
+#### `Node`
+
+Represents a node in the document tree.
+
+```typescript
+new Node(
+  type: NodeType,
+  attrs: Record<string, any>,
+  content: Node[],
+  text?: string
+)
+```
+
+**Properties:**
+
+- `type: NodeType` - The node type
+- `attrs: Record<string, any>` - Attributes like `{ level: 2 }` for headings
+- `content: Node[]` - Child nodes
+- `text?: string` - For text nodes, the text content
+
+**Example:**
+
+```typescript
+const heading = new Node(
+  schema.nodes.heading,
+  { level: 1 },
+  [
+    new Node(schema.nodes.text, {}, [], 'Hello World')
+  ]
+);
+```
+
+---
+
+### Keyboard Shortcuts
+
+By default, FountainJS supports:
+
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl+B` / `Cmd+B` | Toggle bold |
+| `Ctrl+I` / `Cmd+I` | Toggle italic |
+| `Ctrl+Z` / `Cmd+Z` | Undo (requires history plugin) |
+
+---
+
+## Customization
+
+### Custom Styling
+
+The editor renders semantic HTML, so you can style it with CSS:
+
+```css
+[role="textbox"] {
+  padding: 12px;
+  font-size: 16px;
+  line-height: 1.6;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+[role="textbox"] h1 {
+  font-size: 32px;
+  font-weight: bold;
+  margin: 1em 0 0.5em 0;
+}
+
+[role="textbox"] h2 {
+  font-size: 24px;
+  margin: 0.8em 0 0.4em 0;
+}
+```
+
+### Custom Schema
+
+Define your own schema for specific use cases:
+
+```typescript
+import { SchemaSpec, useFountain, CoreSchemaSpec } from '@fountainjs/editor/react';
+
+const customSchema: SchemaSpec = {
+  ...CoreSchemaSpec,
+  nodes: {
+    ...CoreSchemaSpec.nodes,
+    // Override or add custom nodes
+    customNode: {
+      content: 'inline*',
+      parseDOM: [{ tag: 'div', class: 'custom' }],
+      toDOM: () => ['div', { class: 'custom' }, 0],
+    },
+  },
+};
+
+const editor = useFountain({
+  schema: customSchema,
+});
+```
+
+---
+
+## Browser Support
+
+- Chrome/Edge 88+
+- Firefox 87+
+- Safari 14+
+- iOS Safari 14+
+- Chrome for Android 88+
+
+---
+
+## License
+
+MIT - See LICENSE file for details
+
+---
+
+## Contributing
+
+Contributions are welcome! Please read our contributing guidelines before submitting pull requests.
+
+---
+
+## Support
+
+- 📖 [Documentation](https://fountainjs.dev)
+- 🐛 [Issues](https://github.com/yourusername/fountainjs/issues)
+- 💬 [Discussions](https://github.com/yourusername/fountainjs/discussions)
+
+---
+
+**Made with ❤️ for developers who want a powerful, flexible text editor**

package/dist/fountainjs-react.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-cafd8e26.cjs");require("react");exports.FountainEditor=t.FountainEditor;exports.Navigator=t.Navigator;exports.useFountain=t.useFountain;exports.useNavigatorState=t.useNavigatorState;

package/dist/fountainjs-react.js

@@ -0,0 +1,8 @@
+import { F as i, l as r, u as s, k as u } from "./index-1c508d95.js";
+import "react";
+export {
+  i as FountainEditor,
+  r as Navigator,
+  s as useFountain,
+  u as useNavigatorState
+};

package/dist/fountainjs.cjs

@@ -0,0 +1 @@
+"use strict";var D=Object.defineProperty;var O=(n,t,e)=>t in n?D(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var l=(n,t,e)=>(O(n,typeof t!="symbol"?t+"":t,e),e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index-cafd8e26.cjs");require("react");class p{constructor(t,e){l(this,"type");l(this,"attrs");this.type=t,this.attrs=e}static fromJSON(t,e){const i=t.marks[e.type];if(!i)throw new Error(`Unknown mark type: ${e.type}`);return new p(i,{...e.attrs})}}class N extends o.Step{constructor(t,e,i){super(),this.path=t,this.offset=e,this.text=i}apply(t){let e=t,i=[];for(const r of this.path)i.push(e),e=e.content[r];if(!e||!e.isText)throw new Error("Target for InsertTextStep is not a text node.");let c=e.withText((e.text||"").slice(0,this.offset)+this.text+(e.text||"").slice(this.offset));for(let r=i.length-1;r>=0;r--){const a=i[r],d=[...a.content];d[this.path[r]]=c,c=new o.Node(a.type,a.attrs,d,a.text,a.marks)}return c}}class u{constructor(t){l(this,"spec");this.spec=t}}const h={content:"block+",toDOM(){return["div",0]}},m={content:"inline*",group:"block",toDOM(){return["p",0]}},g={group:"inline"},w={attrs:{level:{default:1}},content:"inline*",group:"block",toDOM(n){return[`h${n.attrs.level}`,0]}};class R{constructor(t,e,i){l(this,"dom");l(this,"contentDOM");l(this,"img");l(this,"getPos");l(this,"onResizeStart",t=>{t.preventDefault();const e=t.clientX,i=this.dom.offsetWidth,s=r=>{const a=i+(r.clientX-e);this.dom.style.width=`${a}px`},c=()=>{window.removeEventListener("mousemove",s),window.removeEventListener("mouseup",c);const r=this.getPos();if(r===void 0)return;const a={...this.node.attrs,width:this.dom.style.width},d=[r],T=this.view.editor.createTransaction().setNodeAttrs(d,a);this.view.editor.dispatch(T)};window.addEventListener("mousemove",s),window.addEventListener("mouseup",c)});this.node=t,this.view=e,this.getPos=i,this.dom=document.createElement("figure"),this.dom.style.position="relative",this.dom.style.margin="1rem 0",this.dom.style.display="inline-block",this.img=document.createElement("img"),this.updateImageAttributes(t.attrs),this.contentDOM=document.createElement("div");const s=document.createElement("div");s.style.position="absolute",s.style.bottom="5px",s.style.right="5px",s.style.width="10px",s.style.height="10px",s.style.backgroundColor="#007bff",s.style.cursor="nwse-resize",s.style.border="1px solid white",this.dom.appendChild(this.img),this.dom.appendChild(this.contentDOM),this.dom.appendChild(s),s.addEventListener("mousedown",this.onResizeStart)}update(t){return t.type!==this.node.type?!1:(this.updateImageAttributes(t.attrs),this.node=t,!0)}updateImageAttributes(t){this.img.src=t.src,this.img.alt=t.alt,this.img.title=t.title,this.dom.style.width=t.width,this.img.style.width="100%"}}const f={group:"block",content:"figcaption?",attrs:{src:{default:""},alt:{default:""},title:{default:""},width:{default:"100%"}},toDOM:n=>{const{src:t,alt:e,title:i,width:s}=n.attrs;return["figure",{style:`width: ${s};`},["img",{src:t,alt:e,title:i}],0]},nodeView:R},y={content:"inline*",toDOM:()=>["figcaption",{style:"text-align: center; color: #666; font-style: italic;"},0]},S={group:"block",content:"table_row+",toDOM(){return["table",{style:"border-collapse: collapse; width: 100%;"},["tbody",0]]}},b={content:"table_cell+",toDOM(){return["tr",0]}},x={content:"paragraph+",attrs:{colspan:{default:1},rowspan:{default:1}},toDOM(n){return["td",{style:"border: 1px solid #ddd; padding: 8px;",...n.attrs},0]}},v={group:"block",content:"list_item+",toDOM(){return["ul",0]}},M={content:"paragraph+ (bullet_list)?",toDOM(){return["li",0]}},E={toDOM(){return["strong",0]}},k={toDOM(){return["em",0]}},P=100;function A(){return{done:[],undone:[]}}const I=new u({state:{init:A,apply:(n,t)=>{if(n.steps.length>0){const e=[...t.done,n];return e.length>P&&e.shift(),{done:e,undone:[]}}return t}}});function _(n){return console.log("Undo command called (not implemented)"),!1}function C(n){return console.log("Redo command called (not implemented)"),!1}const L=new u({}),z={nodes:{doc:h,paragraph:m,text:g,heading:w,image_super:f,figcaption:y,table:S,table_row:b,table_cell:x,bullet_list:v,list_item:M},marks:{strong:E,em:k}};exports.AddMarkStep=o.AddMarkStep;exports.Editor=o.Editor;exports.EditorState=o.EditorState;exports.EditorView=o.EditorView;exports.FountainEditor=o.FountainEditor;exports.MarkType=o.MarkType;exports.Navigator=o.Navigator;exports.Node=o.Node;exports.NodeType=o.NodeType;exports.RemoveMarkStep=o.RemoveMarkStep;exports.ReplaceStep=o.ReplaceStep;exports.ReplaceTextStep=o.ReplaceTextStep;exports.Schema=o.Schema;exports.Selection=o.Selection;exports.SetNodeAttrsStep=o.SetNodeAttrsStep;exports.Step=o.Step;exports.Transaction=o.Transaction;exports.Transform=o.Transform;exports.createEditor=o.createEditor;exports.useFountain=o.useFountain;exports.useNavigatorState=o.useNavigatorState;exports.CoreSchemaSpec=z;exports.InsertTextStep=N;exports.Mark=p;exports.Plugin=u;exports.bulletList=v;exports.doc=h;exports.em=k;exports.figcaption=y;exports.heading=w;exports.historyPlugin=I;exports.imageSuper=f;exports.listItem=M;exports.markdownShortcutsPlugin=L;exports.paragraph=m;exports.redo=C;exports.strong=E;exports.table=S;exports.tableCell=x;exports.tableRow=b;exports.text=g;exports.undo=_;