@nerd-bible/wordgard 0.3.3

package/dist/history.d.ts

@@ -0,0 +1,90 @@
+import { Transaction, GardState } from 'wordgard/state';
+import { ChangeSet } from 'wordgard/doc';
+import { Command, Menu } from 'wordgard/command';
+
+interface HistoryConfig {
+    /**
+    The minimum depth (amount of events) to store. Defaults to 100.
+    */
+    minDepth?: number;
+    /**
+    The maximum time (in milliseconds) that adjacent events can be
+    apart and still be grouped together. Defaults to 500.
+    */
+    newGroupDelay?: number;
+    /**
+    By default, when close enough together in time, changes are
+    joined into an existing undo event if they touch any of the
+    changed ranges from that event. You can pass a custom predicate
+    here to influence that logic.
+    */
+    joinToEvent?: (tr: Transaction, isAdjacent: boolean) => boolean;
+}
+/**
+Create a history extension with the given configuration. Will
+include the state field that tracks history, handlers for the
+{@link undo} and {@link redo} commands that make use of it, and
+the {@link undoButton undo}/{@link redoButton redo} menu buttons.
+*/
+declare function history(config?: HistoryConfig): GardState.Extension;
+declare namespace history {
+    /**
+    The state field used to store the history data. Should probably
+    only be used when you want to {@link GardState.toJSON serialize}
+    or {@link GardState.fromJSON deserialize} state objects in a
+    way that preserves history.
+    */
+    const field: GardState.Field<unknown>;
+    /**
+    Transaction annotation that will prevent that transaction from
+    being combined with other transactions in the undo history. Given
+    `"before"`, it'll prevent merging with previous transactions. With
+    `"after"`, subsequent transactions won't be combined with this
+    one. With `true`, the transaction is isolated on both sides.
+    */
+    const isolate: Transaction.Annotation.Type<true | "after" | "before">;
+    /**
+    This facet provides a way to register functions that, given a
+    transaction, provide a set of effects that the history should
+    store when inverting the transaction. This can be used to
+    integrate specific effects in the history, so that they can be
+    undone (and redone again).
+    */
+    const invertedEffects: GardState.Facet<(tr: Transaction) => readonly Transaction.Effect<any>[], readonly ((tr: Transaction) => readonly Transaction.Effect<any>[])[]>;
+    type EventJSON = {
+        changes: ChangeSet.JSON;
+        selection: unknown;
+    };
+    type JSON = {
+        done: readonly EventJSON[];
+        undone: readonly EventJSON[];
+    };
+}
+/**
+Undo a single group of history events. Returns false if no group
+is available.
+*/
+declare const undo: Command.Pure;
+/**
+Redo a single group of undone history events. Returns false if no
+group is available.
+*/
+declare const redo: Command.Pure;
+/**
+The amount of undoable change events available in a given state.
+*/
+declare const undoDepth: (state: GardState) => number;
+/**
+The amount of redoable change events available in a given state.
+*/
+declare const redoDepth: (state: GardState) => number;
+/**
+A menu button that undoes a change.
+*/
+declare const undoButton: Menu.Button;
+/**
+A menu button that redoes an undone change.
+*/
+declare const redoButton: Menu.Button;
+
+export { history, redo, redoButton, redoDepth, undo, undoButton, undoDepth };

package/dist/history.js

@@ -0,0 +1,278 @@
+import { Transaction, GardState, GardSelection } from 'wordgard/state';
+import { ChangeSet } from 'wordgard/doc';
+import { Command, undo as undo$1, redo as redo$1, Menu } from 'wordgard/command';
+import { phrases } from 'wordgard/phrases';
+
+const fromHistory = /*@__PURE__*/Transaction.Annotation.define();
+const historyConfig = /*@__PURE__*/GardState.Facet.define({
+    combine(configs) {
+        return GardState.Facet.combineConfig(configs, {
+            minDepth: 100,
+            newGroupDelay: 500,
+            joinToEvent: (_t, isAdjacent) => isAdjacent,
+        }, {
+            minDepth: Math.max,
+            newGroupDelay: Math.min,
+            joinToEvent: (a, b) => (tr, adj) => a(tr, adj) || b(tr, adj)
+        });
+    }
+});
+const historyField_ = /*@__PURE__*/GardState.Field.define({
+    create() {
+        return new HistoryState(null, null);
+    },
+    update(state, tr) {
+        let config = tr.state.facet(historyConfig);
+        let fromHist = tr.annotation(fromHistory);
+        if (fromHist) {
+            let from = fromHist.side, event = eventFromTransaction(tr);
+            let other = from == 0 ? state.undone : state.done;
+            if (event)
+                other = new Branch(event.changes, event.effects, null, tr.startState.selection, other);
+            return new HistoryState(from == 0 ? fromHist.rest : other, from == 0 ? other : fromHist.rest);
+        }
+        let isolate = tr.annotation(history.isolate);
+        if (isolate == true || isolate == "before")
+            state = state.isolate();
+        if (tr.annotation(Transaction.addToHistory) === false)
+            return tr.changes.empty ? state : new HistoryState(state.done && state.done.addMapping(tr.changes, tr.startState.doc), state.undone && state.undone.addMapping(tr.changes, tr.startState.doc), state.prevTime, state.prevUserEvent);
+        let event = eventFromTransaction(tr);
+        let time = tr.annotation(Transaction.time), userEvent = tr.annotation(Transaction.userEvent);
+        if (event)
+            state = state.addChanges(event, time, userEvent, config, tr);
+        if (isolate == true || isolate == "after")
+            state = state.isolate();
+        return state.clip(config.minDepth);
+    },
+    toJSON(value, state) {
+        let mkJSON = (value) => {
+            let events = [];
+            for (let cur = value; cur; cur = cur.next)
+                events.push({ changes: cur.changes.toJSON(), selection: cur.startSelection.toJSON(state) });
+            return events;
+        };
+        return {
+            done: mkJSON(value.done = value.done && value.done.resolveFully(state.config)),
+            undone: mkJSON(value.undone = value.undone && value.undone.resolveFully(state.config))
+        };
+    },
+    fromJSON(json, state) {
+        if (!json || !Array.isArray(json.done) || !Array.isArray(json.undone))
+            throw new RangeError("Invalid history JSON");
+        let buildBranch = (json) => {
+            let result = null;
+            for (let i = json.length - 1; i >= 0; i--)
+                result = new Branch(ChangeSet.fromJSON(state.schema, json[i].changes), none, null, GardSelection.fromJSON(state, json[i].selection), result);
+            return result;
+        };
+        return new HistoryState(buildBranch(json.done), buildBranch(json.undone));
+    }
+});
+function history(config = {}) {
+    return [
+        historyField_,
+        historyConfig.of(config),
+        Command.handler(undo$1, undo),
+        Command.handler(redo$1, redo),
+        undoButton,
+        redoButton,
+    ];
+}
+;history = /*@__PURE__*/(function (history) {
+    history.field = historyField_;
+    history.isolate = Transaction.Annotation.define();
+    history.invertedEffects = GardState.Facet.define();
+;return history})(history);
+const undo = ({ state }) => {
+    let historyState = state.field(historyField_, false);
+    if (state.readOnly || !historyState)
+        return false;
+    return historyState.pop(0, state);
+};
+const redo = ({ state }) => {
+    let historyState = state.field(historyField_, false);
+    if (state.readOnly || !historyState)
+        return false;
+    return historyState.pop(1, state);
+};
+function depth(branch) {
+    return branch ? branch.depth : 0;
+}
+const undoDepth = (state) => depth(state.field(historyField_, false)?.done);
+const redoDepth = (state) => depth(state.field(historyField_, false)?.undone);
+class Branch {
+    changes;
+    effects;
+    mapped;
+    startSelection;
+    next;
+    depth;
+    constructor(
+    changes, 
+    effects, 
+    mapped, 
+    startSelection, next) {
+        this.changes = changes;
+        this.effects = effects;
+        this.mapped = mapped;
+        this.startSelection = startSelection;
+        this.next = next;
+        this.depth = depth(next) + 1;
+    }
+    addChanges(changes, effects) {
+        return new Branch(changes.compose(this.changes), conc(Transaction.Effect.mapEffects(effects, this.changes), this.effects), null, this.startSelection, this.next);
+    }
+    resolve(config) {
+        if (!this.mapped)
+            return this;
+        let { mapped: { change, doc }, next } = this;
+        let { a: mappedMapping, b: mappedChanges } = ChangeSet.transform(doc, change, this.changes);
+        if (next)
+            next = next.addMapping(mappedMapping, next.mapped ? null : this.changes.apply(doc));
+        if (mappedChanges.empty && !this.effects.length)
+            return next && next.resolve(config);
+        let selDoc, selCx = {
+            get doc() { return selDoc || (selDoc = mappedChanges.apply(change.apply(doc))); },
+            config
+        };
+        return new Branch(mappedChanges, Transaction.Effect.mapEffects(this.effects, change), null, this.startSelection.map(mappedMapping, selCx), next);
+    }
+    resolveFully(config) {
+        let stack = [];
+        for (let head = this; head; head = head.next) {
+            head = head.resolve(config);
+            if (!head)
+                break;
+            stack.push(head);
+        }
+        let result = null;
+        for (let i = stack.length - 1; i >= 0; i--) {
+            let next = stack[i];
+            if (next.next == result)
+                result = next;
+            else
+                result = new Branch(next.changes, next.effects, null, next.startSelection, result);
+        }
+        return result;
+    }
+    addMapping(change, startDoc) {
+        return new Branch(this.changes, this.effects, this.mapped
+            ? { change: this.mapped.change.compose(change), doc: this.mapped.doc }
+            : { change, doc: startDoc }, this.startSelection, this.next);
+    }
+    clip(depth) {
+        let stack = [];
+        for (let i = 0, cur = this; i < depth && cur; i++, cur = cur.next)
+            stack.push(cur);
+        let result = null;
+        for (let i = stack.length - 1; i >= 0; i--) {
+            let event = stack[i];
+            result = new Branch(event.changes, event.effects, event.mapped, event.startSelection, result);
+        }
+        return result;
+    }
+}
+function eventFromTransaction(tr) {
+    let effects = none;
+    for (let invert of tr.startState.facet(history.invertedEffects)) {
+        let result = invert(tr);
+        if (result.length)
+            effects = effects.concat(result);
+    }
+    if (!effects.length && tr.changes.empty)
+        return null;
+    return { changes: tr.changes.invert(tr.startState.doc), effects };
+}
+function isAdjacent(a, b) {
+    let ranges = [], isAdjacent = false;
+    a.iterChangedRanges((f, t) => ranges.push(f, t));
+    b.iterChangedRanges((_f, _t, f, t) => {
+        for (let i = 0; i < ranges.length;) {
+            let from = ranges[i++], to = ranges[i++];
+            if (t >= from && f <= to)
+                isAdjacent = true;
+        }
+    });
+    return isAdjacent;
+}
+function conc(a, b) {
+    return !a.length ? b : !b.length ? a : a.concat(b);
+}
+const none = [];
+const joinableUserEvent = /^(input\.type|delete)($|\.)/;
+class HistoryState {
+    done;
+    undone;
+    prevTime;
+    prevUserEvent;
+    constructor(
+    done, 
+    undone, 
+    prevTime = 0, 
+    prevUserEvent = undefined) {
+        this.done = done;
+        this.undone = undone;
+        this.prevTime = prevTime;
+        this.prevUserEvent = prevUserEvent;
+    }
+    isolate() {
+        return this.prevTime ? new HistoryState(this.done, this.undone) : this;
+    }
+    addChanges(event, time, userEvent, config, tr) {
+        let done = this.done && this.done.resolve(tr.startState.config);
+        if (done && !done.changes.empty &&
+            (!userEvent || joinableUserEvent.test(userEvent) || tr.annotation(Transaction.appended)) &&
+            ((time - this.prevTime < config.newGroupDelay &&
+                config.joinToEvent(tr, isAdjacent(done.changes, event.changes))) ||
+                userEvent == "input.type.compose")) {
+            done = done.addChanges(event.changes, event.effects);
+        }
+        else {
+            done = new Branch(event.changes, event.effects, null, tr.startState.selection, done);
+        }
+        return new HistoryState(done, null, time, userEvent);
+    }
+    pop(side, state) {
+        let branch = side == 0 ? this.done : this.undone;
+        if (!branch || !(branch = branch.resolve(state.config)))
+            return false;
+        return {
+            changes: branch.changes,
+            selection: branch.startSelection,
+            effects: branch.effects,
+            annotations: fromHistory.of({ side, rest: branch.next }),
+            userEvent: side == 0 ? "undo" : "redo",
+            scrollIntoView: true
+        };
+    }
+    clip(minDepth) {
+        let max = minDepth * 1.3;
+        let done = depth(this.done) > max ? this.done.clip(minDepth) : this.done;
+        let undone = depth(this.undone) > max ? this.undone.clip(minDepth) : this.undone;
+        if (done != this.done || undone != this.undone)
+            return new HistoryState(done, undone, this.prevTime, this.prevUserEvent);
+        return this;
+    }
+}
+const undoButton = /*@__PURE__*/(() => Menu.Button.define({
+    run: undo,
+    label: {
+        icon: "M69 90c9-16 10-41-24-40v20l-30-30 30-30v19c42-1 46 37 24 61z"
+    },
+    description: phrases.ref("undo"),
+    enable: s => !s.readOnly && undoDepth(s) > 0,
+    parent: Menu.Group.commands,
+    rank: 10
+}))();
+const redoButton = /*@__PURE__*/(() => Menu.Button.define({
+    run: redo,
+    label: {
+        icon: "M55 29v-19l30 30-30 30v-20c-35-1-33 24-24 40-22-24-17-62 24-61z"
+    },
+    description: phrases.ref("redo"),
+    enable: s => !s.readOnly && redoDepth(s) > 0,
+    parent: Menu.Group.commands,
+    rank: 20
+}))();
+
+export { history, redo, redoButton, redoDepth, undo, undoButton, undoDepth };

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export * as collab from "wordgard/collab"
+export * as command from "wordgard/command"
+export * as doc from "wordgard/doc"
+export * as editor from "wordgard/editor"
+export * as history from "wordgard/history"
+export * as phrases from "wordgard/phrases"
+export * as schema from "wordgard/schema"
+export * as state from "wordgard/state"
+export * as table from "wordgard/table"
+export * as types from "wordgard/types"

package/dist/index.js

@@ -0,0 +1,10 @@
+export * as collab from "wordgard/collab"
+export * as command from "wordgard/command"
+export * as doc from "wordgard/doc"
+export * as editor from "wordgard/editor"
+export * as history from "wordgard/history"
+export * as phrases from "wordgard/phrases"
+export * as schema from "wordgard/schema"
+export * as state from "wordgard/state"
+export * as table from "wordgard/table"
+export * as types from "wordgard/types"

package/dist/phrases.d.ts

@@ -0,0 +1,90 @@
+import { GardState } from 'wordgard/state';
+
+/**
+A phrase set defines a number of text phrases to display in the
+user interface, and makes translation of those phrases possible.
+It associates each phrase with a tag. The type parameter to this
+class is the set of tag names it defines.
+*/
+declare class PhraseSet<Tags extends string> {
+    readonly phrases: {
+        [tag in Tags]: string;
+    };
+    private constructor();
+    /**
+    Look up a translation for phrase with the given tag.
+    
+    If additional arguments are passed, they will be inserted in
+    place of markers like `$1` (for the first value) and `$2`, etc.
+    A single `$` is equivalent to `$1`, and `$$` will produce a
+    literal dollar sign.
+    */
+    get<Tag extends Tags>(state: GardState, tag: Tag, ...insert: any[]): string;
+    /**
+    Create a reference to a phrase. Returns a function that can be
+    called with an editor state to get the phrase text.
+    */
+    ref<Tag extends Tags>(tag: Tag): PhraseSet.Ref;
+    /**
+    Create a translation of this set. Adding the resulting extension
+    to an editor configuration will cause access to the phrases in
+    the set to return the translated text.
+    */
+    translate(phrases: {
+        [tag in Tags]: string;
+    }): GardState.Extension;
+    /**
+    Create a partial translation of this set. The only difference
+    with {@link PhraseSet.translate} is that this method won't cause
+    a type error when you omit some tags.
+    */
+    translatePartial(phrases: {
+        [tag in Tags]?: string;
+    }): GardState.Extension;
+    /**
+    Define a new phrase set. Takes an object as argument that
+    defines the default (usually English) text for all the tags in
+    the set.
+    */
+    static define<Tags extends string>(phrases: {
+        [tag in Tags]: string;
+    }): PhraseSet<Tags>;
+    /**
+    Check whether the phrase set configuration changed between the
+    two given states. Can be useful to check whether some part of
+    the interface needs to be redrawn.
+    */
+    static didChange(a: GardState, b: GardState): boolean;
+}
+declare namespace PhraseSet {
+    /**
+    A reference to a specific phrase. Call it with a state and,
+    optionally, the inserted values you'd pass to {@link
+    PhraseSet.get `PhraseSet.get`} to get a phrase.
+    */
+    type Ref = (state: GardState, ...insert: any[]) => string;
+    /**
+    Get the set of tags defined by a given phrase set, as a type.
+    */
+    type Tag<Set extends PhraseSet<any>> = Set extends PhraseSet<infer T> ? T : never;
+}
+
+/**
+The phrase set for the core package and basic menu items.
+*/
+declare const phrases: PhraseSet<"dialog_close" | "overflow_more" | "block_style" | "toggle_strong" | "toggle_em" | "toggle_code" | "toggle_underline" | "toggle_strikethrough" | "toggle_super" | "toggle_sub" | "link_target" | "create_link" | "text_color" | "background_color" | "undo" | "redo" | "paragraph" | "code_block" | "heading_1" | "heading_2" | "heading_3" | "toggle_bullet_list" | "toggle_ordered_list" | "toggle_quote" | "alignment" | "align_start" | "align_end" | "align_center" | "text_dir" | "text_dir_ltr" | "text_dir_rtl" | "text_dir_auto">;
+/**
+Phrases used by the {@link schema.image.button image dialog}.
+*/
+declare const imagePhrases: PhraseSet<"inline" | "auto" | "width" | "cancel" | "figure" | "update" | "insert" | "insert_image" | "update_image" | "figure_center" | "figure_end" | "captioned" | "image_style" | "uploading" | "upload_failed" | "upload_image" | "image_source" | "alt_text" | "describe_image">;
+/**
+Phrases (mostly color names) used by the {@link schema.ColorPicker
+color picker}.
+*/
+declare const colorNames: PhraseSet<"none" | "lighter" | "black" | "white" | "grey" | "red_berry" | "red" | "orange" | "yellow" | "green" | "cyan" | "cornflower" | "blue" | "purple" | "magenta" | "dark" | "darker" | "darkest" | "light" | "lightest">;
+/**
+Phrases used by [wordgard/table](#table).
+*/
+declare const tablePhrases: PhraseSet<"dimensions_title" | "dimensions_live" | "insert_table" | "modify_table" | "toggle_header" | "add_row_above" | "add_row_below" | "delete_row" | "add_col_before" | "add_col_after" | "delete_col" | "merge_cells" | "split_cell">;
+
+export { PhraseSet, colorNames, imagePhrases, phrases, tablePhrases };

package/dist/phrases.js

@@ -0,0 +1,141 @@
+import { GardState } from 'wordgard/state';
+
+const phraseOverride = /*@__PURE__*/GardState.Facet.define({
+    combine(records) {
+        let map = new Map();
+        for (let i = records.length - 1; i >= 0; i--) {
+            let { set, phrases } = records[i];
+            let known = map.get(set);
+            map.set(set, known ? { ...known, ...phrases } : phrases);
+        }
+        return map;
+    }
+});
+class PhraseSet {
+    phrases;
+    constructor(phrases) {
+        this.phrases = phrases;
+    }
+    get(state, tag, ...insert) {
+        let override = state.facet(phraseOverride).get(this);
+        let phrase = (override && override[tag]) ?? this.phrases[tag];
+        if (insert.length)
+            phrase = phrase.replace(/\$(\$|\d*)/g, (m, i) => {
+                if (i == "$")
+                    return "$";
+                let n = +(i || 1);
+                return !n || n > insert.length ? m : insert[n - 1];
+            });
+        return phrase;
+    }
+    ref(tag) {
+        return (state, ...insert) => this.get(state, tag, ...insert);
+    }
+    translate(phrases) {
+        return phraseOverride.of({ set: this, phrases });
+    }
+    translatePartial(phrases) {
+        return phraseOverride.of({ set: this, phrases: phrases });
+    }
+    static define(phrases) {
+        return new PhraseSet(phrases);
+    }
+    static didChange(a, b) {
+        return a.facet(phraseOverride) != b.facet(phraseOverride);
+    }
+}
+
+const phrases = /*@__PURE__*/PhraseSet.define({
+    dialog_close: "close",
+    overflow_more: "More",
+    block_style: "Block style",
+    toggle_strong: "Toggle strong emphasis",
+    toggle_em: "Toggle emphasis",
+    toggle_code: "Toggle code font",
+    toggle_underline: "Toggle underline",
+    toggle_strikethrough: "Toggle strikethrough",
+    toggle_super: "Toggle superscript",
+    toggle_sub: "Toggle subscript",
+    link_target: "Link target",
+    create_link: "Create link",
+    text_color: "Text color",
+    background_color: "Background color",
+    undo: "Undo",
+    redo: "Redo",
+    paragraph: "Paragraph",
+    code_block: "Code block",
+    heading_1: "Heading 1",
+    heading_2: "Heading 2",
+    heading_3: "Heading 3",
+    toggle_bullet_list: "Toggle bullet list",
+    toggle_ordered_list: "Toggle ordered list",
+    toggle_quote: "Toggle blockquote",
+    alignment: "Alignment",
+    align_start: "Align text to block start",
+    align_end: "Align text to block end",
+    align_center: "Center text",
+    text_dir: "Text direction",
+    text_dir_ltr: "Left-to-right text",
+    text_dir_rtl: "Right-to-left text",
+    text_dir_auto: "Automatic text direction",
+});
+const imagePhrases = /*@__PURE__*/PhraseSet.define({
+    insert_image: "Insert image",
+    update_image: "Update image",
+    update: "Update",
+    insert: "Insert",
+    cancel: "Cancel",
+    inline: "Inline",
+    figure: "Figure",
+    figure_center: "Centered figure",
+    figure_end: "Figure aligned to end",
+    captioned: "Captioned",
+    image_style: "Image style",
+    uploading: "Uploading...",
+    upload_failed: "Image upload failed",
+    width: "Width in pixels",
+    upload_image: "Upload an image",
+    image_source: "Image source",
+    alt_text: "Alternative text",
+    describe_image: "Describe the image",
+    auto: "automatic"
+});
+const colorNames = /*@__PURE__*/PhraseSet.define({
+    none: "none",
+    black: "black",
+    white: "white",
+    grey: "grey",
+    red_berry: "red berry",
+    red: "red",
+    orange: "orange",
+    yellow: "yellow",
+    green: "green",
+    cyan: "cyan",
+    cornflower: "cornflower",
+    blue: "blue",
+    purple: "purple",
+    magenta: "magenta",
+    dark: "dark",
+    darker: "darker",
+    darkest: "very dark",
+    light: "light",
+    lighter: "lighter",
+    lightest: "very light",
+});
+const tablePhrases = /*@__PURE__*/PhraseSet.define({
+    dimensions_title: "Table dimensions $1 by $2. Use arrow keys to change.",
+    dimensions_live: "$1 by $2",
+    insert_table: "Insert a table",
+    modify_table: "Modify table",
+    toggle_header: "Toggle header cells",
+    add_row_above: "Add row above",
+    add_row_below: "Add row below",
+    delete_row: "Delete row",
+    add_col_before: "Add column before",
+    add_col_after: "Add column before",
+    delete_col: "Delete column",
+    merge_cells: "Merge cells",
+    split_cell: "Split cell"
+});
+
+export { PhraseSet, colorNames, imagePhrases, phrases, tablePhrases };