@widgetic/editor 4.0.9 → 4.0.11

package/dist/utils/visibilityCondition.js

@@ -0,0 +1,535 @@
+/**
+ * Decides, from the condition a widget's schema gives a control (`autoplay === true`), whether the control is shown.
+ *
+ * The condition is text that comes with a widget, written by whoever made the widget, and the editor can run inside
+ * a customer's own page. So it is never handed to `eval` or `new Function`: that would run the widget author's code
+ * with the rights of the customer's page (its cookies, its logged-in visitor, its API calls), and it fails outright
+ * under a Content-Security-Policy that does not allow `'unsafe-eval'`. It is read here instead, by a small parser for
+ * the part of JavaScript a condition is made of:
+ *
+ *   - values: numbers, 'strings' and "strings", true, false, null, undefined, and [lists];
+ *   - the settings the condition depends on, by name (`autoplay`), with `.name` and `[key]` to look inside them;
+ *   - comparisons (`===` `!==` `==` `!=` `<` `<=` `>` `>=`), `&&`, `||`, `??`, `!`, `+ - * / %`, `a ? b : c`, brackets;
+ *   - the methods `includes`, `indexOf`, `startsWith`, `endsWith`, `toLowerCase`, `toUpperCase` and `trim`.
+ *
+ * It can read the values it is given and nothing else: no globals (`window`, `document`, `Function`), no other call,
+ * no assignment, no template string, no `constructor` or `__proto__`.
+ */
+/** A condition that cannot be read or cannot be worked out. */
+export class ConditionError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'ConditionError';
+    }
+}
+/** Longer than any real condition; a limit so that a hostile schema cannot make the editor work for long. */
+export const MAX_CONDITION_LENGTH = 1000;
+/** How deeply brackets, lists, `!`s and `?:` may be nested; a limit that keeps the parser from running out of stack. */
+export const MAX_CONDITION_DEPTH = 40;
+function hasOwn(object, key) {
+    return Object.prototype.hasOwnProperty.call(object, key);
+}
+/**
+ * The symbols, longest first so that `===` is read before `==`. `++`, `--` and `**` are not part of what a condition
+ * can say, but they are read as the one symbol JavaScript reads them as, so that `--a` is refused (JavaScript
+ * decrements `a`) instead of being taken for "minus minus a".
+ */
+const SYMBOLS = [
+    '===',
+    '!==',
+    '==',
+    '!=',
+    '<=',
+    '>=',
+    '&&',
+    '||',
+    '??',
+    '++',
+    '--',
+    '**',
+    '<',
+    '>',
+    '!',
+    '+',
+    '-',
+    '*',
+    '/',
+    '%',
+    '?',
+    ':',
+    '(',
+    ')',
+    '[',
+    ']',
+    '.',
+    ','
+];
+const NUMBER_PATTERN = /^(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/;
+const NAME_PATTERN = /^[\p{ID_Start}_$][\p{ID_Continue}$\u200c\u200d]*/u;
+/** What a backslash in a string stands for. Anything else after a backslash is refused. */
+const ESCAPES = new Map([
+    ['n', '\n'],
+    ['t', '\t'],
+    ['r', '\r'],
+    ['\\', '\\'],
+    ["'", "'"],
+    ['"', '"']
+]);
+function tokenize(text) {
+    const tokens = [];
+    let position = 0;
+    while (position < text.length) {
+        const character = text[position];
+        if (/\s/.test(character)) {
+            position += 1;
+            continue;
+        }
+        if (character === "'" || character === '"') {
+            let value = '';
+            let cursor = position + 1;
+            let closed = false;
+            while (cursor < text.length) {
+                const next = text[cursor];
+                if (next === character) {
+                    closed = true;
+                    cursor += 1;
+                    break;
+                }
+                if (next === '\\') {
+                    const escaped = ESCAPES.get(text[cursor + 1]);
+                    if (escaped === undefined) {
+                        throw new ConditionError(`Unsupported escape in a string at position ${cursor}`);
+                    }
+                    value += escaped;
+                    cursor += 2;
+                    continue;
+                }
+                value += next;
+                cursor += 1;
+            }
+            if (!closed)
+                throw new ConditionError('A string is not closed');
+            tokens.push({ kind: 'string', value });
+            position = cursor;
+            continue;
+        }
+        const rest = text.slice(position);
+        const numberMatch = NUMBER_PATTERN.exec(rest);
+        if (numberMatch) {
+            tokens.push({ kind: 'number', value: Number(numberMatch[0]) });
+            position += numberMatch[0].length;
+            continue;
+        }
+        const nameMatch = NAME_PATTERN.exec(rest);
+        if (nameMatch) {
+            tokens.push({ kind: 'name', value: nameMatch[0] });
+            position += nameMatch[0].length;
+            continue;
+        }
+        const symbol = SYMBOLS.find((candidate) => rest.startsWith(candidate));
+        if (symbol === undefined) {
+            throw new ConditionError(`Unexpected character "${character}" at position ${position}`);
+        }
+        tokens.push({ kind: 'symbol', value: symbol });
+        position += symbol.length;
+    }
+    tokens.push({ kind: 'end' });
+    return tokens;
+}
+/** Names that stand for a value of their own, whatever the settings are called. */
+const NAMED_VALUES = {
+    true: true,
+    false: false,
+    null: null,
+    undefined: undefined,
+    NaN: Number.NaN,
+    Infinity: Number.POSITIVE_INFINITY
+};
+const EQUALITY_OPERATORS = ['===', '!==', '==', '!='];
+const COMPARISON_OPERATORS = ['<', '<=', '>', '>='];
+const ADDITIVE_OPERATORS = ['+', '-'];
+const MULTIPLICATIVE_OPERATORS = ['*', '/', '%'];
+/** What a token is called in a message about it. */
+function describe(token) {
+    if (token.kind === 'end')
+        return 'the end of the condition';
+    if (token.kind === 'string')
+        return JSON.stringify(token.value);
+    return `"${token.value}"`;
+}
+class Parser {
+    tokens;
+    position = 0;
+    depth = 0;
+    constructor(tokens) {
+        this.tokens = tokens;
+    }
+    parse() {
+        const node = this.parseConditional();
+        const next = this.peek();
+        if (next.kind !== 'end')
+            throw new ConditionError(`Unexpected ${describe(next)}`);
+        return node;
+    }
+    peek() {
+        return this.tokens[this.position];
+    }
+    take() {
+        const token = this.tokens[this.position];
+        // Never read past the end token: whatever is asked for there is "the end".
+        if (token.kind !== 'end')
+            this.position += 1;
+        return token;
+    }
+    isSymbol(...symbols) {
+        const token = this.peek();
+        return token.kind === 'symbol' && symbols.includes(token.value);
+    }
+    /** Takes the next token, which `isSymbol` has just said is a symbol. */
+    takeSymbol() {
+        const token = this.take();
+        return token.kind === 'symbol' ? token.value : '';
+    }
+    expectSymbol(symbol) {
+        const token = this.take();
+        if (token.kind !== 'symbol' || token.value !== symbol) {
+            throw new ConditionError(`Expected "${symbol}" but found ${describe(token)}`);
+        }
+    }
+    /** Runs `read` one level deeper, so that nesting has a limit. */
+    nested(read) {
+        this.depth += 1;
+        if (this.depth > MAX_CONDITION_DEPTH) {
+            throw new ConditionError('The condition is nested too deeply');
+        }
+        try {
+            return read();
+        }
+        finally {
+            this.depth -= 1;
+        }
+    }
+    parseConditional() {
+        return this.nested(() => {
+            const test = this.parseLogicalOr();
+            if (!this.isSymbol('?'))
+                return test;
+            this.take();
+            const whenTrue = this.parseConditional();
+            this.expectSymbol(':');
+            const whenFalse = this.parseConditional();
+            return { type: 'conditional', test, whenTrue, whenFalse };
+        });
+    }
+    // `??` shares `||`'s level here. JavaScript refuses to mix them without brackets, so nothing a widget can
+    // legitimately contain depends on which of the two binds tighter.
+    parseLogicalOr() {
+        let left = this.parseLogicalAnd();
+        while (this.isSymbol('||', '??')) {
+            const operator = this.takeSymbol();
+            left = { type: 'logical', operator, left, right: this.parseLogicalAnd() };
+        }
+        return left;
+    }
+    parseLogicalAnd() {
+        let left = this.parseEquality();
+        while (this.isSymbol('&&')) {
+            this.take();
+            left = { type: 'logical', operator: '&&', left, right: this.parseEquality() };
+        }
+        return left;
+    }
+    /** One level of left-to-right binary operators: `operators` between operands that `readOperand` reads. */
+    parseBinaryLevel(operators, readOperand) {
+        let left = readOperand();
+        while (this.isSymbol(...operators)) {
+            const operator = this.takeSymbol();
+            left = { type: 'binary', operator, left, right: readOperand() };
+        }
+        return left;
+    }
+    parseEquality() {
+        return this.parseBinaryLevel(EQUALITY_OPERATORS, () => this.parseComparison());
+    }
+    parseComparison() {
+        return this.parseBinaryLevel(COMPARISON_OPERATORS, () => this.parseAdditive());
+    }
+    parseAdditive() {
+        return this.parseBinaryLevel(ADDITIVE_OPERATORS, () => this.parseMultiplicative());
+    }
+    parseMultiplicative() {
+        return this.parseBinaryLevel(MULTIPLICATIVE_OPERATORS, () => this.parseUnary());
+    }
+    parseUnary() {
+        return this.nested(() => {
+            if (this.isSymbol('!', '-', '+')) {
+                const operator = this.takeSymbol();
+                return { type: 'unary', operator, operand: this.parseUnary() };
+            }
+            return this.parsePostfix();
+        });
+    }
+    /** A value followed by any number of `.name`, `[key]` and `.method(...)`. */
+    parsePostfix() {
+        let node = this.parsePrimary();
+        for (;;) {
+            if (this.isSymbol('.')) {
+                this.take();
+                const name = this.take();
+                if (name.kind !== 'name') {
+                    throw new ConditionError(`Expected a name after "." but found ${describe(name)}`);
+                }
+                node = this.isSymbol('(')
+                    ? { type: 'call', object: node, method: name.value, args: this.parseArguments() }
+                    : { type: 'member', object: node, key: { type: 'literal', value: name.value } };
+            }
+            else if (this.isSymbol('[')) {
+                this.take();
+                const key = this.parseConditional();
+                this.expectSymbol(']');
+                node = { type: 'member', object: node, key };
+            }
+            else if (this.isSymbol('(')) {
+                // A call of anything that is not `something.method(...)`: `name(...)`, `a[0](...)`, `a()()`.
+                throw new ConditionError('Only the methods of a value can be called');
+            }
+            else {
+                return node;
+            }
+        }
+    }
+    /** The comma-separated items up to the closing symbol, which is taken too. */
+    parseItems(closing) {
+        const items = [];
+        if (!this.isSymbol(closing)) {
+            do {
+                items.push(this.parseConditional());
+            } while (this.isSymbol(',') && this.take());
+        }
+        this.expectSymbol(closing);
+        return items;
+    }
+    parseArguments() {
+        this.expectSymbol('(');
+        return this.parseItems(')');
+    }
+    parsePrimary() {
+        const token = this.take();
+        switch (token.kind) {
+            case 'number':
+            case 'string':
+                return { type: 'literal', value: token.value };
+            case 'name':
+                return hasOwn(NAMED_VALUES, token.value)
+                    ? { type: 'literal', value: NAMED_VALUES[token.value] }
+                    : { type: 'name', name: token.value };
+            case 'symbol':
+                if (token.value === '(') {
+                    const inner = this.parseConditional();
+                    this.expectSymbol(')');
+                    return inner;
+                }
+                if (token.value === '[')
+                    return { type: 'list', items: this.parseItems(']') };
+                throw new ConditionError(`Unexpected "${token.value}"`);
+            default:
+                throw new ConditionError('The condition ends too early');
+        }
+    }
+}
+// ---- Working it out -----------------------------------------------------------------------------------------------
+/** Never read from a value, however the condition spells it: the way out to the language's own machinery. */
+const FORBIDDEN_KEYS = new Set(['__proto__', 'prototype', 'constructor']);
+/**
+ * What `object[key]` is: only the value's own contents, never something it inherits. A text owns its characters and
+ * its `length`, a list its items and its `length`, an object its settings; a number or a boolean owns nothing, and
+ * JavaScript answers `undefined` for any name on those, so do we.
+ */
+function readMember(object, key) {
+    if (typeof key !== 'string' && typeof key !== 'number') {
+        throw new ConditionError('A value can only be looked up by a name or a number');
+    }
+    const name = String(key);
+    if (FORBIDDEN_KEYS.has(name))
+        throw new ConditionError(`"${name}" cannot be read`);
+    const contents = Object(object);
+    return hasOwn(contents, name) ? contents[name] : undefined;
+}
+/** Calls one of the harmless methods of a text or a list; any other is refused. */
+function callMethod(receiver, method, args) {
+    if (typeof receiver === 'string') {
+        switch (method) {
+            case 'includes':
+                return receiver.includes(String(args[0]));
+            case 'indexOf':
+                return receiver.indexOf(String(args[0]));
+            case 'startsWith':
+                return receiver.startsWith(String(args[0]));
+            case 'endsWith':
+                return receiver.endsWith(String(args[0]));
+            case 'toLowerCase':
+                return receiver.toLowerCase();
+            case 'toUpperCase':
+                return receiver.toUpperCase();
+            case 'trim':
+                return receiver.trim();
+        }
+    }
+    else if (Array.isArray(receiver)) {
+        if (method === 'includes')
+            return receiver.includes(args[0]);
+        if (method === 'indexOf')
+            return receiver.indexOf(args[0]);
+    }
+    throw new ConditionError(`"${method}" cannot be called here`);
+}
+function evaluateBinary(operator, left, right) {
+    // The arithmetic and the order comparisons do what JavaScript does with whatever they are given (`'a' < 'b'`
+    // compares texts); the casts only tell the type checker so.
+    const leftNumber = left;
+    const rightNumber = right;
+    switch (operator) {
+        case '===':
+            return left === right;
+        case '!==':
+            return left !== right;
+        // The loose forms are what a condition that says `==` has always meant.
+        case '==':
+            return left == right;
+        case '!=':
+            return left != right;
+        case '<':
+            return leftNumber < rightNumber;
+        case '<=':
+            return leftNumber <= rightNumber;
+        case '>':
+            return leftNumber > rightNumber;
+        case '>=':
+            return leftNumber >= rightNumber;
+        case '+':
+            return leftNumber + rightNumber;
+        case '-':
+            return leftNumber - rightNumber;
+        case '*':
+            return leftNumber * rightNumber;
+        case '/':
+            return leftNumber / rightNumber;
+        case '%':
+            return leftNumber % rightNumber;
+    }
+}
+function evaluateNode(node, values) {
+    switch (node.type) {
+        case 'literal':
+            return node.value;
+        case 'name':
+            if (!hasOwn(values, node.name)) {
+                throw new ConditionError(`"${node.name}" is not one of the settings this condition depends on`);
+            }
+            return values[node.name];
+        case 'list':
+            return node.items.map((item) => evaluateNode(item, values));
+        case 'unary': {
+            const operand = evaluateNode(node.operand, values);
+            if (node.operator === '!')
+                return !operand;
+            return node.operator === '-' ? -operand : +operand;
+        }
+        case 'logical': {
+            const left = evaluateNode(node.left, values);
+            if (node.operator === '&&')
+                return left ? evaluateNode(node.right, values) : left;
+            if (node.operator === '||')
+                return left ? left : evaluateNode(node.right, values);
+            return left ?? evaluateNode(node.right, values);
+        }
+        case 'conditional':
+            return evaluateNode(node.test, values)
+                ? evaluateNode(node.whenTrue, values)
+                : evaluateNode(node.whenFalse, values);
+        case 'member': {
+            const object = evaluateNode(node.object, values);
+            if (object === null || object === undefined) {
+                throw new ConditionError('Cannot look inside a setting that has no value');
+            }
+            return readMember(object, evaluateNode(node.key, values));
+        }
+        case 'call': {
+            const receiver = evaluateNode(node.object, values);
+            if (receiver === null || receiver === undefined) {
+                throw new ConditionError(`Cannot call "${node.method}" on a setting that has no value`);
+            }
+            return callMethod(receiver, node.method, node.args.map((argument) => evaluateNode(argument, values)));
+        }
+        case 'binary':
+            return evaluateBinary(node.operator, evaluateNode(node.left, values), evaluateNode(node.right, values));
+    }
+}
+/** Conditions already read, so a control that is checked on every change is not read again each time. */
+const parsedConditions = new Map();
+const MAX_REMEMBERED_CONDITIONS = 500;
+function parseCondition(condition) {
+    const remembered = parsedConditions.get(condition);
+    if (remembered instanceof ConditionError)
+        throw remembered;
+    if (remembered)
+        return remembered;
+    let outcome;
+    try {
+        if (condition.length > MAX_CONDITION_LENGTH) {
+            throw new ConditionError(`The condition is longer than ${MAX_CONDITION_LENGTH} characters`);
+        }
+        outcome = new Parser(tokenize(condition)).parse();
+    }
+    catch (error) {
+        outcome = error instanceof ConditionError ? error : new ConditionError(String(error));
+    }
+    if (parsedConditions.size >= MAX_REMEMBERED_CONDITIONS)
+        parsedConditions.clear();
+    parsedConditions.set(condition, outcome);
+    if (outcome instanceof ConditionError)
+        throw outcome;
+    return outcome;
+}
+/**
+ * Works out a condition from the values of the settings it names, the way JavaScript would.
+ *
+ * @throws {ConditionError} when the condition cannot be read, names something that is not in `values`, or cannot be
+ *   worked out (looking inside a setting that has no value, say).
+ */
+export function evaluateCondition(condition, values) {
+    if (typeof condition !== 'string')
+        throw new ConditionError('A condition is text');
+    const parsed = parseCondition(condition);
+    try {
+        return evaluateNode(parsed, values);
+    }
+    catch (error) {
+        if (error instanceof ConditionError)
+            throw error;
+        // What JavaScript itself refuses to do with the values (turning an object into text, say).
+        throw new ConditionError(error instanceof Error ? error.message : String(error));
+    }
+}
+/** The conditions that could not be used and have been reported, so each is reported once. */
+const reportedConditions = new Set();
+/** A schema full of broken conditions must not fill the console, or the memory. */
+const MAX_REPORTED_CONDITIONS = 50;
+const MAX_LOGGED_CONDITION_LENGTH = 200;
+/**
+ * Whether a control whose condition is `condition` is shown. A condition the editor cannot use (it is not valid, or
+ * names a setting it does not depend on) keeps the control shown: a mistake in a widget's schema must not hide one of
+ * its settings for good. The problem is reported in the console, once per condition.
+ */
+export function conditionHolds(condition, values) {
+    try {
+        return Boolean(evaluateCondition(condition, values));
+    }
+    catch (error) {
+        if (reportedConditions.size < MAX_REPORTED_CONDITIONS && !reportedConditions.has(condition)) {
+            reportedConditions.add(condition);
+            console.warn(`[visibilityCondition] Could not use the condition "${String(condition).slice(0, MAX_LOGGED_CONDITION_LENGTH)}"; the control stays visible:`, error instanceof Error ? error.message : error);
+        }
+        return true;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/editor",
-	"version": "4.0.9",
+	"version": "4.0.11",
 	"type": "module",
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -43,6 +43,7 @@
 		"deploy": "vite build && vite preview --host --port 80",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test": "node --test \"tests/**/*.test.{js,mjs}\"",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write ."
 	},
@@ -54,7 +55,6 @@
 		"svelte": "^5.27.0"
 	},
 	"devDependencies": {
-		"@internationalized/date": "^3.6.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.20.7",
@@ -79,7 +79,6 @@
 		"prettier-plugin-svelte": "^3.1.2",
 		"svelte-check": "^4.1.6",
 		"svelte-sonner": "^1.0.3",
-		"tailwind-merge": "^2.5.5",
 		"tailwind-variants": "^0.3.0",
 		"tailwindcss": "^4.1.4",
 		"tailwindcss-animate": "^1.0.7",
@@ -89,8 +88,9 @@
 		"vite-imagetools": "^7.0.4"
 	},
 	"dependencies": {
-		"@shopify/draggable": "^1.1.3",
+		"@internationalized/date": "^3.6.0",
 		"@sveltejs/adapter-node": "^5.2.9",
+		"@texel/color": "^1.1.4",
 		"@tiptap/core": "^2.9.1",
 		"@tiptap/extension-bubble-menu": "^2.9.1",
 		"@tiptap/extension-code-block-lowlight": "^2.9.1",
@@ -123,7 +123,8 @@
 		"svelte": "^5.27.0",
 		"svelte-awesome-color-picker": "^3.1.4",
 		"svelte-color-select": "^0.0.14",
-		"svelte-tiptap": "^2.0.3"
+		"svelte-tiptap": "^2.0.3",
+		"tailwind-merge": "^2.5.5"
 	},
 	"volta": {
 		"node": "22.14.0",