@nuforge/editor 0.1.0

package/dist/index.mjs

@@ -0,0 +1,657 @@
+import * as t from '@nuforge/types';
+import { Parser } from '@nuforge/parser';
+
+function lit(value) {
+    return t.literal({ value });
+}
+function text(value) {
+    return t.tagTemplate({
+        tag: 'text',
+        props: { text: lit(value) },
+        children: [],
+    });
+}
+function el(tag, props = {}, children = []) {
+    return t.tagTemplate({ tag, props, children });
+}
+
+function defineBlock(block) {
+    return block;
+}
+class BlockRegistry {
+    blocks = new Map();
+    constructor(initial = []) {
+        for (const block of initial) {
+            this.register(block);
+        }
+    }
+    register(block) {
+        this.blocks.set(block.id, block);
+    }
+    get(id) {
+        return this.blocks.get(id);
+    }
+    all() {
+        return [...this.blocks.values()];
+    }
+    byCategory() {
+        const out = {};
+        for (const block of this.blocks.values()) {
+            const key = block.category ?? 'Elements';
+            (out[key] ??= []).push(block);
+        }
+        return out;
+    }
+}
+const DEFAULT_BLOCKS = [
+    { id: 'box', label: 'Box', icon: 'square', create: () => el('div') },
+    { id: 'text', label: 'Text', icon: 'type', create: () => text('Text') },
+    {
+        id: 'heading',
+        label: 'Heading',
+        icon: 'heading',
+        create: () => el('h2', {}, [text('Heading')]),
+    },
+    {
+        id: 'paragraph',
+        label: 'Paragraph',
+        icon: 'pilcrow',
+        create: () => el('p', {}, [text('Paragraph text')]),
+    },
+    {
+        id: 'button',
+        label: 'Button',
+        icon: 'mouse-pointer-click',
+        create: () => el('button', {}, [text('Button')]),
+    },
+    {
+        id: 'container',
+        label: 'Container',
+        icon: 'box',
+        create: () => el('section', {}, [el('h3', {}, [text('Section')])]),
+    },
+];
+
+class CommandRegistry {
+    editor;
+    commands = new Map();
+    constructor(editor) {
+        this.editor = editor;
+    }
+    register(command) {
+        this.commands.set(command.id, command);
+    }
+    get(id) {
+        return this.commands.get(id);
+    }
+    all() {
+        return [...this.commands.values()];
+    }
+    run(id) {
+        this.commands.get(id)?.run(this.editor);
+    }
+}
+
+function dropPositionFromPointer(clientY, rect, opts = {}) {
+    const ratio = rect.height > 0 ? (clientY - rect.top) / rect.height : 0;
+    if (opts.allowInside) {
+        if (ratio < 0.25)
+            return 'before';
+        if (ratio > 0.75)
+            return 'after';
+        return 'inside';
+    }
+    return ratio < 0.5 ? 'before' : 'after';
+}
+function templateLabel(node) {
+    if (node instanceof t.TagTemplate) {
+        return node.tag;
+    }
+    if (node instanceof t.ComponentTemplate) {
+        return node.component.name;
+    }
+    if (node instanceof t.SlotTemplate) {
+        return node.name ? `slot: ${node.name}` : 'slot';
+    }
+    if (t.is(node, t.FragmentTemplate)) {
+        return 'fragment';
+    }
+    return 'node';
+}
+function templateChildren(node) {
+    return (node.children ?? []).filter((child) => child instanceof t.Type);
+}
+function isTextTemplate(node) {
+    return node instanceof t.TagTemplate && node.tag === 'text';
+}
+function textPreview(node) {
+    if (!isTextTemplate(node)) {
+        return null;
+    }
+    const expr = node.props.text;
+    if (expr instanceof t.Literal) {
+        return String(expr.value);
+    }
+    return '{…}';
+}
+function canHaveChildren(node) {
+    if (!node || isTextTemplate(node)) {
+        return false;
+    }
+    return (node instanceof t.TagTemplate ||
+        node instanceof t.ComponentTemplate ||
+        t.is(node, t.FragmentTemplate));
+}
+function isAncestorOf(nu, ancestor, node) {
+    let parent = nu.getParentNode(node);
+    while (parent) {
+        if (parent === ancestor) {
+            return true;
+        }
+        parent = nu.getParentNode(parent);
+    }
+    return false;
+}
+
+class Editor {
+    nu;
+    blocks;
+    commands;
+    constructor(nu, opts = {}) {
+        this.nu = nu;
+        const base = opts.defaultBlocks === false ? [] : DEFAULT_BLOCKS;
+        this.blocks = new BlockRegistry([...base, ...(opts.blocks ?? [])]);
+        this.commands = new CommandRegistry(this);
+        this.commands.register({
+            id: 'undo',
+            label: 'Undo',
+            shortcut: 'mod+z',
+            run: (e) => e.nu.undo(),
+        });
+        this.commands.register({
+            id: 'redo',
+            label: 'Redo',
+            shortcut: 'mod+shift+z',
+            run: (e) => e.nu.redo(),
+        });
+    }
+    insertNode(parent, child, index) {
+        const kids = parent.children;
+        if (!Array.isArray(kids)) {
+            return;
+        }
+        this.nu.change(() => {
+            if (index === undefined || index >= kids.length) {
+                kids.push(child);
+            }
+            else {
+                kids.splice(Math.max(0, index), 0, child);
+            }
+        });
+    }
+    removeNode(node) {
+        let ok = false;
+        this.nu.change(() => {
+            ok = this.spliceFromParent(node);
+        });
+        return ok;
+    }
+    moveNode(dragged, target, position) {
+        if (dragged === target || isAncestorOf(this.nu, dragged, target)) {
+            return false;
+        }
+        let ok = false;
+        this.nu.change(() => {
+            ok = this.applyMove(dragged, target, position);
+        });
+        return ok;
+    }
+    clipboardNode = null;
+    copyNode(node) {
+        this.clipboardNode = node;
+    }
+    cutNode(node) {
+        this.copyNode(node);
+        return this.removeNode(node);
+    }
+    canPaste() {
+        return this.clipboardNode !== null;
+    }
+    pasteNode(target, position = 'after') {
+        if (!this.clipboardNode) {
+            return null;
+        }
+        return this.insertCloneRelativeTo(this.clipboardNode, target, position);
+    }
+    duplicateNode(node) {
+        return this.insertCloneRelativeTo(node, node, 'after');
+    }
+    insertNodeAt(node, target, position) {
+        let ok = false;
+        this.nu.change(() => {
+            ok = this.insertRelativeTo(node, target, position);
+        });
+        return ok ? (this.nu.getNodeFromId(node.id) ?? null) : null;
+    }
+    insertBlockAt(blockId, target, position) {
+        const block = this.blocks.get(blockId);
+        if (!block) {
+            return null;
+        }
+        return this.insertNodeAt(block.create(), target, position);
+    }
+    insertCloneRelativeTo(source, target, position) {
+        const clone = t.clone(source, { replaceExistingId: true });
+        let ok = false;
+        this.nu.change(() => {
+            ok = this.insertRelativeTo(clone, target, position);
+        });
+        return ok ? (this.nu.getNodeFromId(clone.id) ?? null) : null;
+    }
+    updateProps(node, props) {
+        this.nu.change(() => {
+            for (const [key, value] of Object.entries(props)) {
+                node.props[key] = value;
+            }
+        });
+    }
+    setProp(node, key, expr) {
+        this.nu.change(() => {
+            node.props[key] = expr;
+        });
+    }
+    removeProp(node, key) {
+        this.nu.change(() => {
+            delete node.props[key];
+        });
+    }
+    setExpression(node, key, source) {
+        let expr;
+        try {
+            expr = Parser.parseExpression(source);
+        }
+        catch {
+            return false;
+        }
+        this.setProp(node, key, expr);
+        return true;
+    }
+    setText(node, value) {
+        const expr = node.props?.text;
+        if (!(expr instanceof t.Literal)) {
+            return false;
+        }
+        this.nu.change(() => {
+            expr.value = value;
+        });
+        return true;
+    }
+    setTag(node, tag) {
+        const clean = tag.trim();
+        if (!clean) {
+            return;
+        }
+        this.nu.change(() => {
+            node.tag = clean;
+        });
+    }
+    addClass(node, name) {
+        const clean = name.trim();
+        if (!clean) {
+            return;
+        }
+        this.nu.change(() => {
+            const tag = node;
+            if (!tag.classList) {
+                tag.classList = t.objectExpression({ properties: {} });
+            }
+            tag.classList.properties[clean] = t.literal({ value: true });
+        });
+    }
+    setClassCondition(node, name, source) {
+        let expr;
+        try {
+            expr = Parser.parseExpression(source);
+        }
+        catch {
+            return false;
+        }
+        this.nu.change(() => {
+            const tag = node;
+            if (tag.classList) {
+                tag.classList.properties[name] = expr;
+            }
+        });
+        return true;
+    }
+    removeClass(node, name) {
+        this.nu.change(() => {
+            const tag = node;
+            if (!tag.classList) {
+                return;
+            }
+            delete tag.classList.properties[name];
+            if (Object.keys(tag.classList.properties).length === 0) {
+                tag.classList = null;
+            }
+        });
+    }
+    setCondition(node, source) {
+        let expr;
+        try {
+            expr = Parser.parseExpression(source);
+        }
+        catch {
+            return false;
+        }
+        this.nu.change(() => {
+            node.if = expr;
+        });
+        return true;
+    }
+    clearCondition(node) {
+        this.nu.change(() => {
+            node.if = null;
+        });
+    }
+    setEach(node, iterator, alias = 'item', indexName) {
+        let expr;
+        try {
+            expr = Parser.parseExpression(iterator);
+        }
+        catch {
+            return false;
+        }
+        this.nu.change(() => {
+            node.each = t.elementEach({
+                alias: t.elementEachAlias({ name: alias || 'item' }),
+                index: indexName ? t.elementEachIndex({ name: indexName }) : null,
+                iterator: expr,
+            });
+        });
+        return true;
+    }
+    clearEach(node) {
+        this.nu.change(() => {
+            node.each = null;
+        });
+    }
+    addState(component, name = 'value', init = '0') {
+        const taken = new Set(component.state.map((v) => v.name));
+        let unique = name;
+        let i = 2;
+        while (taken.has(unique)) {
+            unique = `${name}${i}`;
+            i += 1;
+        }
+        let initExpr;
+        try {
+            initExpr = Parser.parseExpression(init);
+        }
+        catch {
+            initExpr = t.literal({ value: 0 });
+        }
+        this.nu.change(() => {
+            component.state.push(t.val({ name: unique, init: initExpr }));
+        });
+        return component.state.find((v) => v.name === unique);
+    }
+    removeState(component, val) {
+        this.nu.change(() => {
+            const i = component.state.findIndex((v) => v.id === val.id);
+            if (i >= 0) {
+                component.state.splice(i, 1);
+            }
+        });
+    }
+    setStateInit(val, source) {
+        let expr;
+        try {
+            expr = Parser.parseExpression(source);
+        }
+        catch {
+            return false;
+        }
+        this.nu.change(() => {
+            val.init = expr;
+        });
+        return true;
+    }
+    addComponentProp(component, name = 'prop', init) {
+        const taken = new Set(component.props.map((p) => p.name));
+        let unique = name;
+        let i = 2;
+        while (taken.has(unique)) {
+            unique = `${name}${i}`;
+            i += 1;
+        }
+        let initExpr;
+        if (init) {
+            try {
+                initExpr = Parser.parseExpression(init);
+            }
+            catch {
+                initExpr = undefined;
+            }
+        }
+        this.nu.change(() => {
+            component.props.push(t.componentProp({ name: unique, init: initExpr }));
+        });
+        return component.props.find((p) => p.name === unique);
+    }
+    removeComponentProp(component, prop) {
+        this.nu.change(() => {
+            const i = component.props.findIndex((p) => p.id === prop.id);
+            if (i >= 0) {
+                component.props.splice(i, 1);
+            }
+        });
+    }
+    setComponentPropInit(prop, source) {
+        let expr;
+        try {
+            expr = Parser.parseExpression(source);
+        }
+        catch {
+            return false;
+        }
+        this.nu.change(() => {
+            prop.init = expr;
+        });
+        return true;
+    }
+    insertBlock(blockId, parent, index) {
+        const block = this.blocks.get(blockId);
+        if (!block || !canHaveChildren(parent)) {
+            return null;
+        }
+        const created = block.create();
+        this.insertNode(parent, created, index);
+        return created;
+    }
+    uniqueName(base) {
+        const taken = new Set(this.getComponents().map((c) => c.name));
+        if (!taken.has(base)) {
+            return base;
+        }
+        let i = 2;
+        while (taken.has(`${base}${i}`)) {
+            i += 1;
+        }
+        return `${base}${i}`;
+    }
+    addComponent(name = 'Page') {
+        const unique = this.uniqueName(name);
+        const component = t.nuComponent({
+            name: unique,
+            props: [],
+            state: [],
+            template: el('div', {}, [text(unique)]),
+        });
+        this.nu.change(() => {
+            this.nu.state.program.components.push(component);
+        });
+        return this.getComponent(unique);
+    }
+    renameComponent(component, name) {
+        const clean = name.trim();
+        if (!clean ||
+            this.getComponents().some((c) => c !== component && c.name === clean)) {
+            return false;
+        }
+        const old = component.name;
+        this.nu.change(() => {
+            component.name = clean;
+            for (const c of this.getComponents()) {
+                this.walkTemplates(c.template, (tpl) => {
+                    if (tpl instanceof t.ComponentTemplate && tpl.component.name === old) {
+                        tpl.component.name = clean;
+                    }
+                });
+            }
+        });
+        return true;
+    }
+    removeComponent(component) {
+        const comps = this.nu.state.program.components;
+        let ok = false;
+        this.nu.change(() => {
+            const i = comps.findIndex((c) => c.id === component.id);
+            if (i >= 0) {
+                comps.splice(i, 1);
+                ok = true;
+            }
+        });
+        return ok;
+    }
+    duplicateComponent(component) {
+        const copy = t.clone(component, { replaceExistingId: true });
+        const name = this.uniqueName(`${component.name}Copy`);
+        copy.name = name;
+        this.nu.change(() => {
+            this.nu.state.program.components.push(copy);
+        });
+        return this.getComponent(name);
+    }
+    walkTemplates(node, fn) {
+        if (!node) {
+            return;
+        }
+        fn(node);
+        for (const child of templateChildren(node)) {
+            this.walkTemplates(child, fn);
+        }
+    }
+    getComponents() {
+        return this.nu.state.program.components.filter((c) => c instanceof t.NuComponent);
+    }
+    getComponent(name) {
+        return this.getComponents().find((c) => c.name === name);
+    }
+    getRootTemplate(name) {
+        return this.getComponent(name)?.template ?? null;
+    }
+    getChildren(node) {
+        return templateChildren(node);
+    }
+    getSiblings(node) {
+        const parent = this.nu.getParentNode(node);
+        return parent ? templateChildren(parent) : [];
+    }
+    getNodeIndex(node) {
+        return this.getSiblings(node).indexOf(node);
+    }
+    getNodePath(node) {
+        const out = [];
+        let current = node;
+        let loc = this.nu.getNodeLocation(current);
+        while (loc && loc.parent !== current) {
+            out.unshift(...loc.path);
+            current = loc.parent;
+            loc = this.nu.getNodeLocation(current);
+        }
+        return out;
+    }
+    onChange(cb) {
+        return this.nu.listenToMutations(cb);
+    }
+    onStructureChange(cb) {
+        return this.nu.listenToMutations((entries) => {
+            if (entries.some((e) => Array.isArray(e.target))) {
+                cb();
+            }
+        });
+    }
+    spliceFromParent(node) {
+        const parent = this.nu.getParentNode(node);
+        const kids = parent?.children;
+        if (!Array.isArray(kids)) {
+            return false;
+        }
+        const index = kids.indexOf(node);
+        if (index < 0) {
+            return false;
+        }
+        kids.splice(index, 1);
+        return true;
+    }
+    applyMove(dragged, target, position) {
+        const oldParent = this.nu.getParentNode(dragged);
+        const oldKids = oldParent?.children;
+        if (!Array.isArray(oldKids)) {
+            return false;
+        }
+        if (position === 'inside') {
+            if (!canHaveChildren(target)) {
+                return false;
+            }
+            const destKids = target.children;
+            const oi = oldKids.indexOf(dragged);
+            if (oi >= 0) {
+                oldKids.splice(oi, 1);
+            }
+            destKids.push(dragged);
+            return true;
+        }
+        const newParent = this.nu.getParentNode(target);
+        const destKids = newParent?.children;
+        if (!Array.isArray(destKids)) {
+            return false;
+        }
+        const oi = oldKids.indexOf(dragged);
+        if (oi >= 0) {
+            oldKids.splice(oi, 1);
+        }
+        let ti = destKids.indexOf(target);
+        if (ti < 0) {
+            ti = destKids.length - 1;
+        }
+        destKids.splice(position === 'after' ? ti + 1 : ti, 0, dragged);
+        return true;
+    }
+    insertRelativeTo(node, target, position) {
+        if (position === 'inside') {
+            if (!canHaveChildren(target)) {
+                return false;
+            }
+            target.children.push(node);
+            return true;
+        }
+        const parent = this.nu.getParentNode(target);
+        const kids = parent?.children;
+        if (!Array.isArray(kids)) {
+            return false;
+        }
+        let ti = kids.indexOf(target);
+        if (ti < 0) {
+            ti = kids.length - 1;
+        }
+        kids.splice(position === 'after' ? ti + 1 : ti, 0, node);
+        return true;
+    }
+}
+function createEditor(nu, opts) {
+    return new Editor(nu, opts);
+}
+
+export { BlockRegistry, CommandRegistry, DEFAULT_BLOCKS, Editor, canHaveChildren, createEditor, defineBlock, dropPositionFromPointer, el, isAncestorOf, isTextTemplate, lit, templateChildren, templateLabel, text, textPreview };