@fieldia/code 0.13.0 → 0.14.0

package/src/lib/text-code.mjs

@@ -0,0 +1,119 @@
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { bracketMatching, indentOnInput, syntaxHighlighting } from '@codemirror/language';
+import { Compartment, EditorState } from '@codemirror/state';
+import { EditorView, keymap, lineNumbers, placeholder } from '@codemirror/view';
+import { loadCodeLanguage } from './languages.mjs';
+import { codeHighlightStyle } from './palette.mjs';
+import { installCodeStyles } from './styles.mjs';
+/**
+ * A text or char field as code, coloured in the language the page names:
+ * `{ "widget": "code", "options": { "language": "python" } }`. The grammar
+ * loads when the field is drawn, and only that one; a language the editor
+ * does not know is plain text. What is typed reaches the form as text, an
+ * empty editor as nothing. Tab is left to move between fields; Ctrl+] and
+ * Ctrl+[ indent. Code reads left to right, on an Arabic page too.
+ */
+const textOf = (value) => (value === null || value === undefined ? '' : String(value));
+/** A char field is one line: Enter adds nothing, and pasted lines join, as a text box joins them. */
+const oneLine = EditorState.transactionFilter.of((tr) => {
+    if (!tr.docChanged || tr.newDoc.lines === 1)
+        return tr;
+    let words = false;
+    const changes = [];
+    tr.changes.iterChanges((from, to, _fromB, _toB, inserted) => {
+        const text = inserted.toString();
+        if (text.trim() !== '')
+            words = true;
+        changes.push({ from, to, insert: text.replace(/\s*[\r\n]+\s*/g, ' ') });
+    });
+    if (!words)
+        return [];
+    const joined = tr.startState.changes(changes);
+    return { changes: joined, selection: { anchor: joined.mapPos(tr.startState.selection.main.head, 1) }, scrollIntoView: true };
+});
+/** No longer than the field's size: a change that would make it longer is refused, as a text box's maxlength does. */
+const atMost = (size) => EditorState.transactionFilter.of((tr) => (tr.docChanged && tr.newDoc.length > size && tr.newDoc.length > tr.startState.doc.length ? [] : tr));
+export const textCodeWidget = ({ form, name, field, node, id, document }) => {
+    installCodeStyles(document);
+    const line = field.type === 'char';
+    const element = document.createElement('div');
+    element.className = line ? 'fd-code fd-code-text fd-code-line' : 'fd-code fd-code-text';
+    element.dir = 'ltr';
+    const size = (field.type === 'char' || field.type === 'text') && field.size !== undefined ? field.size : undefined;
+    const grammar = new Compartment();
+    const editable = new Compartment();
+    const described = new Compartment();
+    /** What the form holds as text, as last written or shown: its echo of what was typed changes nothing. */
+    let known = textOf(form.getState().values[name]);
+    let writing = false;
+    let readonly = null;
+    let attributes = '';
+    const view = new EditorView({
+        parent: element,
+        state: EditorState.create({
+            doc: known,
+            extensions: [
+                line ? oneLine : lineNumbers(),
+                size !== undefined ? atMost(size) : [],
+                history(),
+                bracketMatching(),
+                indentOnInput(),
+                syntaxHighlighting(codeHighlightStyle),
+                grammar.of([]),
+                keymap.of([...defaultKeymap, ...historyKeymap]),
+                node.placeholder ? placeholder(node.placeholder) : [],
+                editable.of([]),
+                // Named by the field's label, like every other field; its state said as the form says it.
+                EditorView.contentAttributes.of({ id, 'aria-labelledby': `${id}-label` }),
+                described.of([]),
+                EditorView.updateListener.of((update) => {
+                    if (!update.docChanged || writing)
+                        return;
+                    known = update.state.doc.toString();
+                    form.setValue(name, known === '' ? null : known);
+                }),
+            ],
+        }),
+    });
+    // The language's grammar, once loaded; nothing if the page names none the editor knows. (An editor
+    // destroyed meanwhile takes the change quietly.)
+    void loadCodeLanguage(node.options?.['language']).then((support) => {
+        if (support)
+            view.dispatch({ effects: grammar.reconfigure(support) });
+    });
+    return {
+        element,
+        focus: () => view.focus(),
+        destroy: () => view.destroy(),
+        update(state) {
+            const effects = [];
+            if (state.readonly !== readonly) {
+                readonly = state.readonly;
+                element.toggleAttribute('data-readonly', readonly);
+                effects.push(editable.reconfigure([EditorView.editable.of(!readonly), EditorState.readOnly.of(readonly)]));
+            }
+            const said = { 'aria-invalid': String(state.invalid), 'aria-required': String(state.required), 'aria-readonly': String(state.readonly) };
+            // Read-only code is still reached by Tab, as a read-only text box is: to read it, and copy from it.
+            if (state.readonly)
+                said['tabindex'] = '0';
+            if (state.describedBy)
+                said['aria-describedby'] = state.describedBy;
+            if (JSON.stringify(said) !== attributes) {
+                attributes = JSON.stringify(said);
+                effects.push(described.reconfigure(EditorView.contentAttributes.of(said)));
+            }
+            if (effects.length)
+                view.dispatch({ effects });
+            // A value from elsewhere (loaded, discarded, set by a step) replaces the text; the echo of what was typed does not.
+            const incoming = textOf(state.value);
+            if (incoming === known)
+                return;
+            known = incoming;
+            writing = true;
+            // Shown whole, whatever its length or lines: the filters are for what is typed.
+            view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: incoming }, filter: false });
+            writing = false;
+        },
+    };
+};
+//# sourceMappingURL=text-code.mjs.map

package/src/lib/text-code.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-code.mjs","sourceRoot":"","sources":["../../../../../libs/code/src/lib/text-code.ts"],"names":[],"mappings":"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"}