fountainjs-editor 0.1.0

package/src/extensions/nodes/image-super-view.ts

@@ -0,0 +1,90 @@
+import { Node } from '../../core';
+import { EditorView } from '../../view';
+
+export class ImageSuperNodeView {
+  public readonly dom: HTMLElement;
+  public readonly contentDOM: HTMLElement;
+  private readonly img: HTMLImageElement;
+  private readonly getPos: () => number | undefined; // The function to get the node's position
+
+  constructor(private node: Node, private view: EditorView, getPos: () => number | undefined) {
+    // Store the getPos function
+    this.getPos = getPos;
+
+    // --- Create DOM Structure ---
+    this.dom = document.createElement('figure');
+    this.dom.style.position = 'relative';
+    this.dom.style.margin = '1rem 0';
+    this.dom.style.display = 'inline-block'; // Important for resizing
+
+    this.img = document.createElement('img');
+    this.updateImageAttributes(node.attrs);
+    
+    this.contentDOM = document.createElement('div'); // For the figcaption
+
+    const resizeHandle = document.createElement('div');
+    resizeHandle.style.position = 'absolute';
+    resizeHandle.style.bottom = '5px';
+    resizeHandle.style.right = '5px';
+    resizeHandle.style.width = '10px';
+    resizeHandle.style.height = '10px';
+    resizeHandle.style.backgroundColor = '#007bff';
+    resizeHandle.style.cursor = 'nwse-resize';
+    resizeHandle.style.border = '1px solid white';
+
+    this.dom.appendChild(this.img);
+    this.dom.appendChild(this.contentDOM);
+    this.dom.appendChild(resizeHandle);
+
+    resizeHandle.addEventListener('mousedown', this.onResizeStart);
+  }
+
+  // Called by the main EditorView when the node changes
+  update(node: Node): boolean {
+    if (node.type !== this.node.type) return false;
+    this.updateImageAttributes(node.attrs);
+    this.node = node;
+    return true;
+  }
+
+  // Helper to sync node attributes to the DOM
+  private updateImageAttributes(attrs: { [key: string]: any }): void {
+    this.img.src = attrs.src;
+    this.img.alt = attrs.alt;
+    this.img.title = attrs.title;
+    this.dom.style.width = attrs.width;
+    this.img.style.width = '100%';
+  }
+
+  // --- Resize Logic ---
+  private onResizeStart = (event: MouseEvent): void => {
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth = this.dom.offsetWidth;
+
+    const onResizeMove = (moveEvent: MouseEvent) => {
+      const newWidth = startWidth + (moveEvent.clientX - startX);
+      this.dom.style.width = `${newWidth}px`;
+    };
+
+    const onResizeEnd = () => {
+      window.removeEventListener('mousemove', onResizeMove);
+      window.removeEventListener('mouseup', onResizeEnd);
+      
+      const pos = this.getPos();
+      if (pos === undefined) return;
+
+      const newAttrs = { ...this.node.attrs, width: this.dom.style.width };
+      
+      // THIS IS THE KEY: We find the node's position and create a transaction
+      // A real implementation needs a more robust way to find the path
+      const path = [pos]; // Simplified path for top-level nodes
+
+      const tr = this.view.editor.createTransaction().setNodeAttrs(path, newAttrs);
+      this.view.editor.dispatch(tr);
+    };
+
+    window.addEventListener('mousemove', onResizeMove);
+    window.addEventListener('mouseup', onResizeEnd);
+  };
+}

package/src/extensions/nodes/image-super.ts

@@ -0,0 +1,7 @@
+import { Node, NodeSpec } from '../../core';
+import { ImageSuperNodeView } from './image-super-view';
+export const imageSuper: NodeSpec = {
+  group: 'block', content: 'figcaption?', attrs: { src: { default: '' }, alt: { default: '' }, title: { default: '' }, width: { default: '100%' }, },
+  toDOM: (node: Node) => { const { src, alt, title, width } = node.attrs; return ['figure', { style: `width: ${width};` }, ['img', { src, alt, title }], 0]; },
+  nodeView: ImageSuperNodeView,
+};

package/src/extensions/nodes/list-item.ts

@@ -0,0 +1,9 @@
+import { NodeSpec } from '../../core';
+
+export const listItem: NodeSpec = {
+  // A list item can contain paragraphs, and even nested lists.
+  content: 'paragraph+ (bullet_list)?',
+  toDOM() {
+    return ['li', 0];
+  },
+};

package/src/extensions/nodes/paragraph.ts

@@ -0,0 +1,2 @@
+import { NodeSpec } from '../../core';
+export const paragraph: NodeSpec = { content: 'inline*', group: 'block', toDOM() { return ['p', 0]; } };

package/src/extensions/nodes/table-cell.ts

@@ -0,0 +1,5 @@
+import { NodeSpec } from '../../core';
+export const tableCell: NodeSpec = {
+  content: 'paragraph+', attrs: { colspan: { default: 1 }, rowspan: { default: 1 }, },
+  toDOM(node) { const attrs = { style: 'border: 1px solid #ddd; padding: 8px;', ...node.attrs, }; return ['td', attrs, 0]; },
+};

package/src/extensions/nodes/table-row.ts

@@ -0,0 +1,2 @@
+import { NodeSpec } from '../../core';
+export const tableRow: NodeSpec = { content: 'table_cell+', toDOM() { return ['tr', 0]; }, };

package/src/extensions/nodes/table.ts

@@ -0,0 +1,5 @@
+import { NodeSpec } from '../../core';
+export const table: NodeSpec = {
+  group: 'block', content: 'table_row+',
+  toDOM() { return ['table', { style: 'border-collapse: collapse; width: 100%;' }, ['tbody', 0]]; },
+};

package/src/extensions/nodes/text.ts

@@ -0,0 +1,2 @@
+import { NodeSpec } from '../../core';
+export const text: NodeSpec = { group: 'inline' };

package/src/extensions/plugins/history.ts

@@ -0,0 +1,12 @@
+import { Plugin, Transaction, EditorState } from '../../core';
+const MAX_HISTORY_DEPTH = 100;
+interface HistoryState { done: Transaction[]; undone: Transaction[]; }
+function initHistoryState(): HistoryState { return { done: [], undone: [] }; }
+export const historyPlugin = new Plugin({
+  state: {
+    init: initHistoryState,
+    apply: (tr, value: HistoryState): HistoryState => { if (tr.steps.length > 0) { const newDone = [...value.done, tr]; if (newDone.length > MAX_HISTORY_DEPTH) { newDone.shift(); } return { done: newDone, undone: [] }; } return value; },
+  },
+});
+export function undo(state: EditorState): boolean { console.log('Undo command called (not implemented)'); return false; }
+export function redo(state: EditorState): boolean { console.log('Redo command called (not implemented)'); return false; }

package/src/extensions/plugins/markdown-shortcuts.ts

@@ -0,0 +1,52 @@
+import { Plugin, Node, EditorState, Transaction } from '../../core';
+
+export interface InputRule {
+  pattern: RegExp;
+  handler: (props: { state: EditorState; match: RegExpMatchArray; from: number; to: number }) => Transaction | null;
+}
+
+export const markdownShortcutsPlugin = new Plugin({});
+
+// --- Define our rules with more robust handlers ---
+
+export const headingRule: InputRule = {
+  // Matches '## ' at the start of a string.
+  pattern: /^(##\s)$/,
+  handler: ({ state, from, to }) => {
+    // Find the path to the start of the current text block
+    const selectionPath = state.selection.path;
+    if (selectionPath.length < 2) return null; // Must be inside a paragraph
+    const blockPath = selectionPath.slice(0, -1);
+    
+    // Create a new heading node
+    const { heading } = state.schema.nodes;
+    if (!heading) return null;
+    const newHeading = new Node(heading, { level: 2 });
+    
+    // This is a simplified transaction that replaces the entire parent paragraph
+    const tr = state.createTransaction().replace(blockPath[0], blockPath[0] + 1, [newHeading]);
+    return tr;
+  },
+};
+
+export const bulletListRule: InputRule = {
+  // Matches '* ' at the start of a string.
+  pattern: /^(\*\s)$/,
+  handler: ({ state, from, to }) => {
+    const selectionPath = state.selection.path;
+    if (selectionPath.length < 2) return null; // Must be inside a paragraph
+    const blockPath = selectionPath.slice(0, -1);
+
+    const { list_item, bullet_list, paragraph } = state.schema.nodes;
+    if (!list_item || !bullet_list || !paragraph) return null;
+
+    // Create a new bullet list with one item containing an empty paragraph
+    const newListItem = new Node(list_item, {}, [new Node(paragraph, {})]);
+    const newList = new Node(bullet_list, {}, [newListItem]);
+
+    const tr = state.createTransaction().replace(blockPath[0], blockPath[0] + 1, [newList]);
+    return tr;
+  },
+};
+
+export const markdownRules = [headingRule, bulletListRule];

package/src/index.ts

@@ -0,0 +1,12 @@
+// All core concepts
+export * from './core';
+
+// The main view layer
+export * from './view';
+
+// All extensions, nodes, marks, and the CoreSchemaSpec
+export * from './extensions';
+
+// All React components and hooks
+export * from './react';
+

package/src/react/FountainEditor.tsx

@@ -0,0 +1,19 @@
+import React, { useEffect, useRef } from 'react';
+import { Editor } from '../core';
+import { EditorView } from '../view';
+
+interface FountainEditorProps {
+  editor: Editor | null;
+}
+
+export const FountainEditor: React.FC<FountainEditorProps> = ({ editor }) => {
+  const editorRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!editor || !editorRef.current) { return; }
+    const view = new EditorView(editorRef.current, editor);
+    return () => { view.destroy(); };
+  }, [editor]);
+
+  return <div ref={editorRef} />;
+};

package/src/react/Navigator.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Editor, Selection } from '../core';
+import { useNavigatorState } from './useNavigatorState';
+
+interface NavigatorProps {
+  editor: Editor | null;
+}
+
+export const Navigator: React.FC<NavigatorProps> = ({ editor }) => {
+  const outline = useNavigatorState(editor);
+  if (!editor) return null;
+
+  const handleClick = (path: number[]) => {
+    const selection = Selection.createCursor(path, 0);
+    const tr = editor.createTransaction().setSelection(selection);
+    editor.dispatch(tr);
+  };
+
+  return (
+    <div style={{ padding: '1rem', border: '1px solid #eee', background: '#fcfcfc' }}>
+      <h3 style={{ marginTop: 0 }}>Navigator</h3>
+      {outline.length === 0 && <p style={{ color: '#999' }}>No headings yet.</p>}
+      <ul>
+        {outline.map(item => (
+          <li
+            key={item.id}
+            onClick={() => handleClick(item.path)}
+            style={{ listStyle: 'none', paddingLeft: `${(item.level - 1) * 20}px`, cursor: 'pointer', marginBottom: '0.5rem', }}
+          >
+            {item.text}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/react/index.ts

@@ -0,0 +1,4 @@
+export { useFountain } from './useFountain';
+export { FountainEditor } from './FountainEditor';
+export { useNavigatorState } from './useNavigatorState';
+export { Navigator } from './Navigator';

package/src/react/useFountain.ts

@@ -0,0 +1,10 @@
+import { useState } from 'react';
+import { createEditor, Editor, EditorConfig } from '../core';
+
+export function useFountain(config: EditorConfig): Editor | null {
+  const [editor] = useState(() => {
+    if (!config) return null;
+    return createEditor(config);
+  });
+  return editor;
+}

package/src/react/useNavigatorState.ts

@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react';
+import { Editor, Node as FountainNode } from '../core';
+
+interface OutlineItem {
+  id: string;
+  level: number;
+  text: string;
+  path: number[];
+}
+
+function parseDocument(doc: FountainNode): OutlineItem[] {
+  const headings: OutlineItem[] = [];
+  function traverse(node: FountainNode, path: number[]) {
+    if (node.type.name === 'heading') {
+      headings.push({
+        id: `${path.join('-')}-${node.attrs.level}`,
+        level: node.attrs.level,
+        text: node.content.map(c => c.text).join('') || 'Untitled Heading',
+        path,
+      });
+    }
+    node.content.forEach((child, i) => { traverse(child, [...path, i]); });
+  }
+  traverse(doc, []);
+  return headings;
+}
+
+export function useNavigatorState(editor: Editor | null): OutlineItem[] {
+  const [outline, setOutline] = useState<OutlineItem[]>([]);
+  useEffect(() => {
+    if (!editor) return;
+    const update = () => {
+      const newOutline = parseDocument(editor.state.doc);
+      setOutline(newOutline);
+    };
+    update();
+    const unsubscribe = editor.subscribe(update);
+    return () => unsubscribe();
+  }, [editor]);
+  return outline;
+}

package/src/view/dom-renderer.ts

@@ -0,0 +1,77 @@
+import { Node } from '../core';
+import { EditorView } from './view';
+import { NodeView } from './node-view';
+
+function renderSpecToDOM(spec: string | any[]): { dom: HTMLElement; contentDOM: HTMLElement } {
+  if (typeof spec === 'string') {
+    const dom = document.createElement(spec);
+    return { dom, contentDOM: dom };
+  }
+  
+  const dom = document.createElement(spec[0]);
+  const attrs = spec[1];
+  let contentDOM = dom;
+  if (attrs && typeof attrs === 'object' && !Array.isArray(attrs)) { for (const attr in attrs) dom.setAttribute(attr, attrs[attr]); }
+  for (let i = 1; i < spec.length; i++) {
+    if (spec[i] === 0) return { dom, contentDOM };
+    if (typeof spec[i] === 'object' && Array.isArray(spec[i])) { const nested = renderSpecToDOM(spec[i]); dom.appendChild(nested.dom); }
+  }
+  return { dom, contentDOM };
+}
+
+// The render function now keeps track of the position in the document
+function renderNode(node: Node, view: EditorView, pos: number): { dom: HTMLElement | Text, pos: number } {
+  const NodeViewConstructor = node.type.spec.nodeView;
+  
+  // Track position for children
+  let currentPos = pos + 1;
+
+  if (NodeViewConstructor) {
+    const getPos = () => pos;
+    const nodeView = new NodeViewConstructor(node, view, getPos);
+    
+    if (nodeView.contentDOM) {
+      node.content.forEach(child => {
+        const result = renderNode(child, view, currentPos);
+        nodeView.contentDOM!.appendChild(result.dom);
+        currentPos = result.pos;
+      });
+    }
+    return { dom: nodeView.dom, pos: currentPos };
+  }
+  
+  if (node.isText) {
+    let dom: HTMLElement | Text = document.createTextNode(node.text || '');
+    for (const mark of node.marks) {
+      const markSpec = mark.type.spec.toDOM?.(mark);
+      if (markSpec) { 
+        const markDom = renderSpecToDOM(markSpec).dom; 
+        markDom.appendChild(dom as any); 
+        dom = markDom; 
+      }
+    }
+    // Text nodes have a size equal to their length
+    return { dom, pos: pos + (node.text?.length || 0) };
+  }
+  
+  const spec = node.type.spec.toDOM?.(node);
+  if (!spec) throw new Error(`No render spec for node type: ${node.type.name}`);
+  const { dom, contentDOM } = renderSpecToDOM(spec);
+
+  node.content.forEach(child => {
+    const result = renderNode(child, view, currentPos);
+    contentDOM.appendChild(result.dom);
+    currentPos = result.pos;
+  });
+
+  // A block node has open and close tags, so it takes up 2 positions + content size
+  return { dom, pos: currentPos + 1 };
+}
+
+export function renderDOM(view: EditorView): void {
+  const doc = view.editor.state.doc;
+  // Start rendering at position 0
+  const { dom: renderedDoc } = renderNode(doc, view, 0);
+  view.dom.innerHTML = '';
+  view.dom.appendChild(renderedDoc);
+}

package/src/view/index.ts

@@ -0,0 +1,2 @@
+export * from './node-view';
+export * from './view';

package/src/view/input.ts

@@ -0,0 +1,74 @@
+import { Editor, Selection } from '../core';
+
+export class InputManager {
+  constructor(private editor: Editor, private dom: HTMLElement) {
+    this.dom.addEventListener('beforeinput', this.onBeforeInput);
+  }
+
+  private onBeforeInput = (event: InputEvent): void => {
+    // Let the browser handle complex inputs for now
+    if (event.inputType.startsWith('format')) return;
+
+    const { state } = this.editor;
+    const { selection } = state;
+
+    // If our selection isn't set, we can't do anything.
+    if (!selection || !selection.path) {
+      // Allow browser to handle it, but log a warning.
+      console.warn("Fountain.js: No selection found, letting browser handle input.");
+      return;
+    }
+
+    event.preventDefault();
+    let tr = state.createTransaction();
+
+    switch (event.inputType) {
+      case 'insertText':
+        if (event.data) {
+          tr.replaceText(selection.path, selection.from, selection.to, event.data);
+          tr.setSelection(Selection.createCursor(selection.path, selection.from + event.data.length));
+        }
+        break;
+
+      case 'deleteContentBackward': // Backspace
+        if (selection.isCollapsed) {
+          if (selection.from > 0) {
+            tr.replaceText(selection.path, selection.from - 1, selection.from, '');
+            tr.setSelection(Selection.createCursor(selection.path, selection.from - 1));
+          }
+        } else {
+          // If there's a range selection, delete the whole range.
+          tr.replaceText(selection.path, selection.from, selection.to, '');
+          tr.setSelection(Selection.createCursor(selection.path, selection.from));
+        }
+        break;
+      
+      case 'deleteContentForward': // Delete key
+         if (selection.isCollapsed) {
+            tr.replaceText(selection.path, selection.from, selection.from + 1, '');
+            tr.setSelection(Selection.createCursor(selection.path, selection.from));
+        } else {
+            tr.replaceText(selection.path, selection.from, selection.to, '');
+            tr.setSelection(Selection.createCursor(selection.path, selection.from));
+        }
+        break;
+      
+      case 'insertParagraph': // Enter key
+        console.log("Enter key pressed - not implemented yet.");
+        break;
+
+      default:
+        // For any other input type, do nothing and let the browser be prevented.
+        console.log(`Unhandled inputType: ${event.inputType}`);
+        break;
+    }
+
+    if (tr.steps.length > 0) {
+      this.editor.dispatch(tr);
+    }
+  };
+
+  public destroy(): void {
+    this.dom.removeEventListener('beforeinput', this.onBeforeInput);
+  }
+}

package/src/view/node-view.ts

@@ -0,0 +1,9 @@
+import { Node } from '../core/schema/node';
+import { EditorView } from './view';
+
+export interface NodeView {
+  dom: HTMLElement;
+  contentDOM?: HTMLElement;
+  update?(node: Node): boolean;
+  destroy?(): void;
+}

package/src/view/selection-handler.ts

@@ -0,0 +1,76 @@
+import { Editor, Selection } from '../core';
+
+export class SelectionHandler {
+  constructor(private editor: Editor, private dom: HTMLElement) {
+    document.addEventListener('selectionchange', this.onSelectionChange);
+  }
+
+  private onSelectionChange = (): void => {
+    const domSel = document.getSelection();
+    if (!domSel || !domSel.anchorNode || !this.dom.contains(domSel.anchorNode)) {
+      return;
+    }
+
+    // --- NEW, MORE ROBUST PATH/OFFSET FINDING ---
+    const { anchorNode, anchorOffset, focusNode, focusOffset } = domSel;
+
+    const start = this.findPosition(anchorNode, anchorOffset);
+    const end = this.findPosition(focusNode, focusOffset);
+    
+    // If we can't map the DOM selection to our model, do nothing.
+    if (start === null || end === null) {
+      return;
+    }
+
+    // Create a new selection. For simplicity, we only support ranges within the same paragraph.
+    const newSelection = new Selection(start.path, start.offset, end.offset);
+
+    // Only dispatch a transaction if the selection has actually changed.
+    if (JSON.stringify(this.editor.state.selection) !== JSON.stringify(newSelection)) {
+      this.editor.dispatch(this.editor.createTransaction().setSelection(newSelection));
+    }
+  };
+
+  // This is the hard part: mapping a DOM node + offset to our model's path + offset.
+  private findPosition(domNode: globalThis.Node | null, domOffset: number): { path: number[], offset: number } | null {
+    if (!domNode) return null;
+
+    let textNode: globalThis.Node | null = null;
+    let textOffset = 0;
+
+    // If the selection is directly on a text node, use it.
+    if (domNode.nodeType === Node.TEXT_NODE) {
+      textNode = domNode;
+      textOffset = domOffset;
+    } else { // If it's on an element (like a <p>), find the text node inside.
+      textNode = domNode.firstChild;
+      textOffset = domOffset;
+    }
+
+    if (!textNode) return null;
+
+    // Find the parent paragraph to get its index.
+    let parentParagraph = textNode.parentNode;
+    while (parentParagraph && parentParagraph.nodeName !== 'P') {
+      parentParagraph = parentParagraph.parentNode;
+    }
+
+    if (!parentParagraph || !this.dom.contains(parentParagraph)) return null;
+
+    const blockIndex = Array.from(this.dom.childNodes).indexOf(parentParagraph as any);
+    if (blockIndex === -1) return null;
+    
+    // Our simplified path is [paragraphIndex, textNodeIndex (always 0 for now)]
+    return { path: [blockIndex, 0], offset: textOffset };
+  }
+
+
+  public syncSelectionToDOM(selection: Selection): void {
+    // This part is also very complex. For now, we will let the browser lead.
+    // The onSelectionChange handler will keep our state in sync with the browser.
+  }
+
+  public destroy(): void {
+    document.removeEventListener('selectionchange', this.onSelectionChange);
+  }
+}