├── src
    ├── utilities
    │   ├── tasks
    │   │   ├── Task.ts
    │   │   ├── FixedTaskRunner.ts
    │   │   ├── FixedDebouncer.ts
    │   │   ├── FixedThrottler.ts
    │   │   └── TaskRunner.ts
    │   ├── Observer.ts
    │   ├── monaco-editor
    │   │   ├── monaco-editor.css
    │   │   └── monaco-editor-with-projections.css
    │   ├── math.ts
    │   ├── types.ts
    │   ├── components
    │   │   ├── CodeRange.tsx
    │   │   └── color-pickers
    │   │   │   ├── color-picker.css
    │   │   │   ├── RgbColorPicker.tsx
    │   │   │   └── RgbaColorPicker.tsx
    │   ├── SplitRegex.ts
    │   ├── Valuable.ts
    │   ├── ValueWithUnit.ts
    │   ├── ValueCondition.ts
    │   ├── ArrayMap.ts
    │   ├── ProgrammableFunction.ts
    │   ├── languages
    │   │   └── markdown
    │   │   │   └── markdown-utilities.ts
    │   └── array.ts
    ├── core
    │   ├── renderers
    │   │   ├── RendererSettings.ts
    │   │   └── RendererProvider.ts
    │   ├── user-interfaces
    │   │   ├── UserInterfaceSettings.ts
    │   │   ├── error
    │   │   │   ├── user-interface-error.css
    │   │   │   ├── UserInterfaceError.tsx
    │   │   │   └── UserInterfaceErrorCatcherAndDisplay.tsx
    │   │   └── UserInterfaceProvider.ts
    │   ├── fragments
    │   │   ├── FragmentType.ts
    │   │   ├── Fragment.ts
    │   │   ├── FragmentProvider.ts
    │   │   ├── syntactic
    │   │   │   ├── SyntacticFragment.ts
    │   │   │   └── TreePatternFinder.ts
    │   │   └── textual
    │   │   │   ├── TextualFragment.ts
    │   │   │   └── RegexPatternFinder.ts
    │   ├── languages
    │   │   ├── Language.ts
    │   │   ├── Parser.ts
    │   │   ├── SyntaxTreeVisitor.ts
    │   │   ├── plain-text.ts
    │   │   ├── SyntaxTree.ts
    │   │   ├── SyntaxTreeNode.ts
    │   │   └── SyntaxTreePattern.ts
    │   ├── projections
    │   │   ├── ProjectionRequirements.ts
    │   │   ├── ProjectionUid.ts
    │   │   ├── ProjectionSpecification.ts
    │   │   └── ProjectionMatcher.ts
    │   ├── runtime
    │   │   ├── request-providers
    │   │   │   ├── RuntimeRequestProvider.ts
    │   │   │   ├── ProgrammableRuntimeRequestProvider.ts
    │   │   │   └── RuntimeRequestList.ts
    │   │   ├── RuntimeResponse.ts
    │   │   └── RuntimeRequest.ts
    │   ├── templates
    │   │   ├── evaluators
    │   │   │   ├── numeric
    │   │   │   │   ├── NumericEvaluatorSettings.ts
    │   │   │   │   └── NumericEvaluator.ts
    │   │   │   ├── textual
    │   │   │   │   ├── TextualEvaluatorSettings.ts
    │   │   │   │   └── TextualEvaluator.ts
    │   │   │   └── boolean
    │   │   │   │   ├── BooleanEvaluatorSettings.ts
    │   │   │   │   └── BooleanEvaluator.ts
    │   │   ├── textual
    │   │   │   └── TextualTemplateSlot.ts
    │   │   ├── syntactic
    │   │   │   ├── SyntacticTemplateSlot.ts
    │   │   │   └── TreePatternTemplate.ts
    │   │   └── TemplateSlot.ts
    │   ├── documents
    │   │   ├── TransientDocumentEditor.ts
    │   │   ├── DocumentPosition.ts
    │   │   ├── DocumentRange.ts
    │   │   └── DocumentEdit.ts
    │   ├── mappings
    │   │   ├── ForwardMapping.ts
    │   │   ├── BackwardMapping.ts
    │   │   ├── ProgrammableBackwardMapping.ts
    │   │   └── ProgrammableForwardMapping.ts
    │   ├── code-editor
    │   │   ├── DecoratedRange.ts
    │   │   └── CodeEditor.tsx
    │   └── lorgnette
    │   │   └── LorgnetteContext.tsx
    ├── presets
    │   ├── user-interfaces
    │   │   ├── table
    │   │   │   ├── table.css
    │   │   │   └── TableSettings.ts
    │   │   ├── form
    │   │   │   ├── form-elements
    │   │   │   │   ├── helpers
    │   │   │   │   │   ├── Icon.tsx
    │   │   │   │   │   ├── Label.tsx
    │   │   │   │   │   ├── Section.tsx
    │   │   │   │   │   ├── SingleRow.tsx
    │   │   │   │   │   └── ButtonGroup.tsx
    │   │   │   │   ├── Switch.tsx
    │   │   │   │   ├── StringInput.tsx
    │   │   │   │   ├── ButtonColorPicker.tsx
    │   │   │   │   ├── NumberInput.tsx
    │   │   │   │   ├── EditableText.tsx
    │   │   │   │   └── Button.tsx
    │   │   │   ├── FormSettings.tsx
    │   │   │   ├── FormContext.tsx
    │   │   │   ├── form.css
    │   │   │   └── FormEntry.ts
    │   │   ├── value-history
    │   │   │   ├── ValueHistorySettings.ts
    │   │   │   └── value-history.css
    │   │   ├── style-inspector
    │   │   │   ├── Style.ts
    │   │   │   └── inspectors
    │   │   │   │   ├── MarginInspector.tsx
    │   │   │   │   └── BackgroundInspector.tsx
    │   │   ├── object-inspector
    │   │   │   ├── ObjectInspectorComponent.tsx
    │   │   │   └── ObjectInspector.tsx
    │   │   ├── tree
    │   │   │   └── tree-component.css
    │   │   ├── user-interfaces-presets.ts
    │   │   ├── regex-editor
    │   │   │   ├── regex-editor.css
    │   │   │   ├── LargeRegexDiagramComponent.tsx
    │   │   │   ├── RegexEditorComponent.tsx
    │   │   │   ├── RegexEditor.tsx
    │   │   │   └── RegulexIframe.tsx
    │   │   └── color-picker
    │   │   │   └── ColorPicker.tsx
    │   ├── renderers
    │   │   ├── side
    │   │   │   ├── side-renderer.css
    │   │   │   └── SideRendererSettings.ts
    │   │   ├── renderer-presets.ts
    │   │   ├── popup
    │   │   │   ├── ButtonPopupRendererSettings.ts
    │   │   │   ├── popup-renderer.css
    │   │   │   └── ButtonPopupRenderer.tsx
    │   │   └── popover
    │   │   │   ├── ButtonPopoverRendererSettings.ts
    │   │   │   ├── popover-renderer.css
    │   │   │   └── ButtonPopoverRenderer.tsx
    │   ├── languages
    │   │   ├── css
    │   │   │   ├── language.ts
    │   │   │   ├── CssSyntaxTree.ts
    │   │   │   └── CssParser.ts
    │   │   ├── json
    │   │   │   ├── language.ts
    │   │   │   ├── nodes
    │   │   │   │   ├── NullNode.ts
    │   │   │   │   ├── BooleanNode.ts
    │   │   │   │   ├── NumberNode.ts
    │   │   │   │   ├── KeyNode.ts
    │   │   │   │   ├── StringNode.ts
    │   │   │   │   ├── ObjectNode.ts
    │   │   │   │   ├── ArrayNode.ts
    │   │   │   │   └── PropertyNode.ts
    │   │   │   ├── JsonSyntaxTreeNode.ts
    │   │   │   ├── JsonSyntaxTree.ts
    │   │   │   └── JsonParser.ts
    │   │   ├── python
    │   │   │   ├── language.ts
    │   │   │   ├── nodes
    │   │   │   │   ├── NoneNode.ts
    │   │   │   │   ├── BooleanNode.ts
    │   │   │   │   ├── NumberNode.ts
    │   │   │   │   ├── IdentifierNode.ts
    │   │   │   │   ├── PositionalArgumentNode.ts
    │   │   │   │   ├── ProgramNode.ts
    │   │   │   │   ├── NamedArgumentNode.ts
    │   │   │   │   ├── StringNode.ts
    │   │   │   │   ├── ArgumentListNode.ts
    │   │   │   │   ├── ExpressionNode.ts
    │   │   │   │   ├── FunctionCallNode.ts
    │   │   │   │   ├── NamedAccessNode.ts
    │   │   │   │   └── IndexedAccessNode.ts
    │   │   │   ├── PythonSyntaxTreeNode.ts
    │   │   │   ├── PythonParser.ts
    │   │   │   └── PythonSyntaxTree.ts
    │   │   ├── markdown
    │   │   │   ├── language.ts
    │   │   │   ├── MarkdownSyntaxTree.ts
    │   │   │   ├── MarkdownParser.ts
    │   │   │   └── MarkdownSyntaxTreeNode.ts
    │   │   ├── typescript
    │   │   │   ├── language.ts
    │   │   │   ├── TypescriptSyntaxTree.ts
    │   │   │   ├── TypescriptParser.ts
    │   │   │   └── TypescriptSyntaxTreeNode.ts
    │   │   └── language-presets.ts
    │   └── projections
    │   │   ├── hexadecimal-color-picker.ts
    │   │   ├── regex-literal-diagram.ts
    │   │   └── runtime-value-tracer.ts
    └── apps
    │   ├── playground
    │       ├── local-store
    │       │   ├── LocalStore.ts
    │       │   └── LocalStoreManager.ts
    │       ├── index.html
    │       ├── examples
    │       │   ├── seaborn.ts
    │       │   ├── Example.ts
    │       │   ├── css.ts
    │       │   ├── typescript.ts
    │       │   ├── vega.ts
    │       │   └── markdown.ts
    │       ├── index.tsx
    │       └── syntax-tree
    │       │   └── syntax-tree.css
    │   ├── vscode-editor
    │       ├── VscodeApi.ts
    │       ├── vscode-editor-app.css
    │       ├── index.html
    │       └── index.tsx
    │   └── global-style.css
├── misc
    ├── lorgnette-markdown-table-demo.gif
    └── lorgnette-python-barplot-demo.gif
├── .gitignore
├── vite.config.ts
├── tsconfig.json
├── .eslintrc.cjs
├── LICENSE
├── .github
    └── workflows
    │   └── build-and-publish-playground.yml
└── package.json


/src/utilities/tasks/Task.ts:
--------------------------------------------------------------------------------
1 | export type Task = () => (any | Promise<any>);
2 | 


--------------------------------------------------------------------------------
/src/core/renderers/RendererSettings.ts:
--------------------------------------------------------------------------------
1 | export interface RendererSettings {
2 | 
3 | }
4 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/table/table.css:
--------------------------------------------------------------------------------
1 | .ui.table {
2 |     background-color: red;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/utilities/Observer.ts:
--------------------------------------------------------------------------------
1 | export interface Observer<T> {
2 |     processChange(data: T): void;
3 | }


--------------------------------------------------------------------------------
/src/core/user-interfaces/UserInterfaceSettings.ts:
--------------------------------------------------------------------------------
1 | export interface UserInterfaceSettings {
2 |     
3 | }


--------------------------------------------------------------------------------
/src/core/fragments/FragmentType.ts:
--------------------------------------------------------------------------------
1 | export const enum FragmentType {
2 |     Textual = "Textual",
3 |     Syntactic = "Syntactic"
4 | }


--------------------------------------------------------------------------------
/misc/lorgnette-markdown-table-demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/exsitu-projects/lorgnette/HEAD/misc/lorgnette-markdown-table-demo.gif


--------------------------------------------------------------------------------
/misc/lorgnette-python-barplot-demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/exsitu-projects/lorgnette/HEAD/misc/lorgnette-python-barplot-demo.gif


--------------------------------------------------------------------------------
/src/apps/playground/local-store/LocalStore.ts:
--------------------------------------------------------------------------------
1 | export interface LocalStore {
2 |     documentLanguageId: string;
3 |     documentContent: string;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/apps/vscode-editor/VscodeApi.ts:
--------------------------------------------------------------------------------
1 | export const vscode = (window as any).acquireVsCodeApi() as {
2 |     postMessage(message: any): void;
3 | };
4 | 
5 | // export const vscode = {postMessage: (m: any) => {}}


--------------------------------------------------------------------------------
/src/utilities/monaco-editor/monaco-editor.css:
--------------------------------------------------------------------------------
 1 | .monaco-editor-wrapper {
 2 |     width: 100%;
 3 |     height: 100%;
 4 | }
 5 | 
 6 | .monaco-editor {
 7 |     width: 100%;
 8 |     height: 100%;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/core/languages/Language.ts:
--------------------------------------------------------------------------------
1 | import { Parser } from "./Parser";
2 | 
3 | export interface Language {
4 |   name: string;
5 |   id: string;
6 |   codeEditorLanguageId: string;
7 |   parser?: Parser;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/core/languages/Parser.ts:
--------------------------------------------------------------------------------
1 | import { Document } from "../documents/Document";
2 | import { SyntaxTree } from "./SyntaxTree";
3 | 
4 | export interface Parser {
5 |     parse(document: Document): Promise<SyntaxTree>;
6 | }


--------------------------------------------------------------------------------
/src/core/languages/SyntaxTreeVisitor.ts:
--------------------------------------------------------------------------------
1 | import { SyntaxTreeNode } from "./SyntaxTreeNode";
2 | 
3 | export interface SyntaxTeeeVisitor<T = any> {
4 |     visitNode(node: SyntaxTreeNode, extraData: T): void | boolean;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/core/languages/plain-text.ts:
--------------------------------------------------------------------------------
1 | import { Language } from "./Language";
2 | 
3 | export const PLAIN_TEXT_LANGUAGE: Language = {
4 |     name: "Plain text",
5 |     id: "plaintext",
6 |     codeEditorLanguageId: "plaintext"
7 | };


--------------------------------------------------------------------------------
/src/presets/renderers/side/side-renderer.css:
--------------------------------------------------------------------------------
1 | .projection-renderer.side {
2 |     position: absolute;
3 |     background-color: rgba(255, 255, 255, 0.8);
4 |     box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
5 |     z-index: 500;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/core/fragments/Fragment.ts:
--------------------------------------------------------------------------------
1 | import { DocumentRange } from "../documents/DocumentRange";
2 | import { FragmentType } from "./FragmentType";
3 | 
4 | export interface Fragment {
5 |     type: FragmentType;
6 |     range: DocumentRange;
7 |     text: string;
8 | }


--------------------------------------------------------------------------------
/src/apps/vscode-editor/vscode-editor-app.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     background-color: #FAFAFA;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | #lorgnette-vscode-editor-app {
 8 |     width: 100vw;
 9 |     height: 100vh;
10 |     font-family: "Roboto", sans-serif;
11 |     font-size: 16px;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/presets/languages/css/language.ts:
--------------------------------------------------------------------------------
1 | import { Language } from "../../../core/languages/Language";
2 | import { CssParser } from "./CssParser";
3 | 
4 | export const CSS_LANGUAGE: Language = {
5 |     name: "CSS",
6 |     id: "css",
7 |     codeEditorLanguageId: "css",
8 |     parser: new CssParser()
9 | };


--------------------------------------------------------------------------------
/src/core/projections/ProjectionRequirements.ts:
--------------------------------------------------------------------------------
1 | export interface ProjectionRequirements {
2 |     /**
3 |      * List of the IDs of the languages that are supported by the projection.
4 |      * Not specifying the parameter is equivalent to specifying all languages.
5 |      */
6 |      languages?: string[];
7 | }


--------------------------------------------------------------------------------
/src/presets/languages/json/language.ts:
--------------------------------------------------------------------------------
1 | import { Language } from "../../../core/languages/Language";
2 | import { JsonParser } from "./JsonParser";
3 | 
4 | export const JSON_LANGUAGE: Language = {
5 |     name: "JSON",
6 |     id: "json",
7 |     codeEditorLanguageId: "json",
8 |     parser: new JsonParser()
9 | };


--------------------------------------------------------------------------------
/src/apps/global-style.css:
--------------------------------------------------------------------------------
 1 | /* Imports required to use the Blueprint UI library. */
 2 | @import "normalize.css";
 3 | @import "@blueprintjs/core/lib/css/blueprint.css";
 4 | @import "@blueprintjs/icons/lib/css/blueprint-icons.css";
 5 | 
 6 | body {
 7 |     position: absolute;
 8 |     width: 100%;
 9 |     height: 100%;
10 | }


--------------------------------------------------------------------------------
/src/presets/languages/python/language.ts:
--------------------------------------------------------------------------------
1 | import { Language } from "../../../core/languages/Language";
2 | import { PythonParser } from "./PythonParser";
3 | 
4 | export const PYTHON_LANGUAGE: Language = {
5 |     name: "Python (subset)",
6 |     id: "python",
7 |     codeEditorLanguageId: "python",
8 |     parser: new PythonParser()
9 | };


--------------------------------------------------------------------------------
/src/presets/languages/markdown/language.ts:
--------------------------------------------------------------------------------
1 | import { Language } from "../../../core/languages/Language";
2 | import { MarkdownParser } from "./MarkdownParser";
3 | 
4 | export const MARKDOWN_LANGUAGE: Language = {
5 |     name: "Markdown",
6 |     id: "markdown",
7 |     codeEditorLanguageId: "markdown",
8 |     parser: new MarkdownParser()
9 | };


--------------------------------------------------------------------------------
/src/core/fragments/FragmentProvider.ts:
--------------------------------------------------------------------------------
1 | import { Document } from "../documents/Document";
2 | import { Fragment } from "./Fragment";
3 | import { FragmentType } from "./FragmentType";
4 | 
5 | export interface FragmentProvider<T extends Fragment = Fragment> {
6 |     type: FragmentType;
7 |     provideFragmentsForDocument(document: Document): Promise<T[]>;
8 | }


--------------------------------------------------------------------------------
/src/core/projections/ProjectionUid.ts:
--------------------------------------------------------------------------------
 1 | export type ProjectionUid = number;
 2 | 
 3 | // Provide a generator of unique projection IDs.
 4 | let nextUnusedProjectionUid = 1;
 5 | 
 6 | export function getUnusedUid(): ProjectionUid {
 7 |     const unusedUid = nextUnusedProjectionUid;
 8 |     nextUnusedProjectionUid += 1;
 9 | 
10 |     return unusedUid;
11 | }


--------------------------------------------------------------------------------
/src/presets/languages/typescript/language.ts:
--------------------------------------------------------------------------------
1 | import { Language } from "../../../core/languages/Language";
2 | import { TypescriptParser } from "./TypescriptParser";
3 | 
4 | export const TYPESCRIPT_LANGUAGE: Language = {
5 |     name: "TypeScript",
6 |     id: "typescript",
7 |     codeEditorLanguageId: "typescript",
8 |     parser: new TypescriptParser()
9 | };


--------------------------------------------------------------------------------
/src/utilities/tasks/FixedTaskRunner.ts:
--------------------------------------------------------------------------------
 1 | import { Task } from "./Task";
 2 | 
 3 | export abstract class FixedTaskRunner {
 4 |     protected task: Task;
 5 |     protected isRunningTask: boolean;
 6 | 
 7 |     constructor(task: Task) {
 8 |         this.task = task;
 9 |         this.isRunningTask = false;
10 |     }
11 | 
12 |     abstract runTask(): void;
13 | }


--------------------------------------------------------------------------------
/src/core/user-interfaces/error/user-interface-error.css:
--------------------------------------------------------------------------------
 1 | .ui-error {
 2 |     border: 2px solid #f00;
 3 |     background-color: #ffefef;
 4 |     padding: 1em;
 5 | }
 6 | 
 7 | .ui-error .title {
 8 |     display: block;
 9 |     margin: 0 0 1ex 0;
10 |     font-weight: bold;
11 |     text-align: center;
12 | }
13 | 
14 | .ui-error .body {
15 |     font-size: 0.9em;
16 | }


--------------------------------------------------------------------------------
/src/apps/playground/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Lorgnette playground</title>
 7 | </head>
 8 | <body>
 9 |     <div id="lorgnette-playground-app"></div>
10 |     <script type="module" src="./index.tsx"></script>
11 | </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/apps/vscode-editor/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Lorgnette editor for VS Code</title>
 7 | </head>
 8 | <body>
 9 |     <div id="lorgnette-vscode-editor-app"></div>
10 |     <script type="module" src="./index.tsx"></script>
11 | </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/core/renderers/RendererProvider.ts:
--------------------------------------------------------------------------------
 1 | import { ClassOf } from "../../utilities/types";
 2 | import { Renderer } from "./Renderer";
 3 | import { RendererSettings } from "./RendererSettings";
 4 | 
 5 | export interface RendererProvider {
 6 |     provide(): ClassOf<Renderer>;
 7 | }
 8 | 
 9 | export type ConfigurableRendererProvider<
10 |     S extends RendererSettings = RendererSettings
11 | > = (settings: S) => RendererProvider;
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | /pnpm-lock.yaml
22 | 
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/form/form-elements/helpers/Icon.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactElement } from "react";
 2 | import { Icon as BlueprintIcon, IconProps as BlueprintIconProps } from "@blueprintjs/core";
 3 | 
 4 | export type IconProps = {
 5 |     id: BlueprintIconProps["icon"];
 6 | };
 7 | 
 8 | export class Icon extends React.PureComponent<IconProps> {
 9 |     render(): ReactElement {
10 |         return <BlueprintIcon icon={this.props.id} />;
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/core/languages/SyntaxTree.ts:
--------------------------------------------------------------------------------
 1 | import { SyntaxTreeNode } from "./SyntaxTreeNode";
 2 | import { SyntaxTeeeVisitor } from "./SyntaxTreeVisitor";
 3 | 
 4 | export abstract class SyntaxTree<N extends SyntaxTreeNode = SyntaxTreeNode> {
 5 |     readonly root: N;
 6 | 
 7 |     constructor(root: N) {
 8 |         this.root = root;
 9 |     }
10 | 
11 |     visitWith<T>(visitor: SyntaxTeeeVisitor<T>, extraData: T) {
12 |         this.root.visitWith(visitor, extraData);
13 |     }
14 | }


--------------------------------------------------------------------------------
/src/utilities/math.ts:
--------------------------------------------------------------------------------
 1 | export function clamp(
 2 |     min: number,
 3 |     value: number,
 4 |     max: number,
 5 | ): number {
 6 |     return Math.max(Math.min(value, max), min);
 7 | }
 8 | 
 9 | // Adapted from https://stackoverflow.com/a/41716722
10 | export function round(
11 |     value: number,
12 |     nbDecimals: number
13 | ): number {
14 |     const tenPowerNbDecimals = 10**nbDecimals;
15 |     return Math.round((value + Number.EPSILON) * tenPowerNbDecimals) / tenPowerNbDecimals;
16 | }


--------------------------------------------------------------------------------
/src/presets/renderers/renderer-presets.ts:
--------------------------------------------------------------------------------
 1 | import { ButtonPopoverRenderer } from "./popover/ButtonPopoverRenderer";
 2 | import { ButtonPopupRenderer } from "./popup/ButtonPopupRenderer";
 3 | import { SideRenderer } from "./side/SideRenderer";
 4 | 
 5 | export const RENDERER_PRESETS = {
 6 |     "side": SideRenderer.makeConfigurableProvider(),
 7 |     "button-popup": ButtonPopupRenderer.makeConfigurableProvider(),
 8 |     "button-popover": ButtonPopoverRenderer.makeConfigurableProvider(),
 9 | } as const;
10 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/value-history/ValueHistorySettings.ts:
--------------------------------------------------------------------------------
 1 | export interface ValueHistorySettings {
 2 |     maximumNbValues: number;
 3 | }
 4 | 
 5 | export const DEFAULT_VALUE_HISTORY_SETTINGS: ValueHistorySettings = {
 6 |     maximumNbValues: 64
 7 | };
 8 | 
 9 | export const deriveValueHistorySettingsFrom = (partialSettings: Partial<ValueHistorySettings>): ValueHistorySettings => {
10 |     return {
11 |         ...DEFAULT_VALUE_HISTORY_SETTINGS,
12 |         ...partialSettings
13 |     };
14 | };
15 | 


--------------------------------------------------------------------------------
/src/utilities/types.ts:
--------------------------------------------------------------------------------
 1 | export type ClassOf<T> = { new(...args: any[]): T };
 2 | 
 3 | // Adapted from https://stackoverflow.com/a/43001581
 4 | export type DeepOptionalProperties<T> = {
 5 |     [P in keyof T]+?:
 6 |         T[P] extends Array<any>
 7 |             ? T[P]
 8 |             : DeepOptionalProperties<T[P]>
 9 | };
10 | 
11 | export type DeepRequiredProperties<T> = {
12 |     [P in keyof Required<T>]-?:
13 |         T[P] extends Array<any>
14 |             ? T[P]
15 |             : DeepRequiredProperties<T[P]>
16 | };


--------------------------------------------------------------------------------
/src/core/runtime/request-providers/RuntimeRequestProvider.ts:
--------------------------------------------------------------------------------
 1 | import { Document } from "../../documents/Document";
 2 | import { Fragment } from "../../fragments/Fragment";
 3 | import { RuntimeRequest } from "../RuntimeRequest";
 4 | 
 5 | export interface RuntimeRequestContext<F extends Fragment = Fragment> {
 6 |     fragment: F;
 7 |     document: Document;
 8 | }
 9 | 
10 | export interface RuntimeRequestProvider<F extends Fragment = Fragment> {
11 |     provideRuntimeRequests(context: RuntimeRequestContext<F>): RuntimeRequest[];
12 | }
13 | 


--------------------------------------------------------------------------------
/src/utilities/tasks/FixedDebouncer.ts:
--------------------------------------------------------------------------------
 1 | import { Debouncer } from "./Debouncer";
 2 | import { FixedTaskRunner } from "./FixedTaskRunner";
 3 | import { Task } from "./Task";
 4 | 
 5 | export class FixedDebouncer extends FixedTaskRunner {
 6 |     readonly debouncer: Debouncer;
 7 | 
 8 |     constructor(task: Task, minimumDelayBetweenTasks: number) {
 9 |         super(task);
10 |         this.debouncer = new Debouncer(minimumDelayBetweenTasks);
11 |     }
12 | 
13 |     runTask(): void {
14 |         this.debouncer.addTask(this.task);
15 |     }
16 | }


--------------------------------------------------------------------------------
/src/utilities/tasks/FixedThrottler.ts:
--------------------------------------------------------------------------------
 1 | import { Throttler } from "./Throttler";
 2 | import { FixedTaskRunner } from "./FixedTaskRunner";
 3 | import { Task } from "./Task";
 4 | 
 5 | export class FixedThrottler extends FixedTaskRunner {
 6 |     readonly throttler: Throttler;
 7 | 
 8 |     constructor(task: Task, minimumDelayBetweenTasks: number) {
 9 |         super(task);
10 |         this.throttler = new Throttler(minimumDelayBetweenTasks);
11 |     }
12 | 
13 |     runTask(): void {
14 |         this.throttler.addTask(this.task);
15 |     }
16 | }


--------------------------------------------------------------------------------
/src/utilities/components/CodeRange.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import { PureComponent } from "react";
 3 | import { Range } from "../../core/documents/Range";
 4 | 
 5 | type Props = {
 6 |     range: Range;
 7 | }
 8 |     
 9 | export class CodeRange extends PureComponent<Props> {
10 |     render() {
11 |         const start = this.props.range.start;
12 |         const end = this.props.range.end;
13 |     
14 |         return (
15 |             <span className="code-range">
16 |             {start.row};{start.column}–{end.row};{end.column}</span>
17 |         );
18 |     }
19 | }


--------------------------------------------------------------------------------
/src/utilities/components/color-pickers/color-picker.css:
--------------------------------------------------------------------------------
 1 | .floating-color-picker-wrapper {
 2 |     z-index: 1000;
 3 | }
 4 | 
 5 | .floating-color-picker-wrapper .color-picker {
 6 |     border-radius: 10px;
 7 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
 8 | 
 9 | }
10 | 
11 | .bp5-button.color-picker-button {
12 |     padding: 2px;
13 |     min-height: auto;
14 |     min-width: auto;
15 | }
16 | 
17 | .color-picker-button .color-preview {
18 |     height: 24px;
19 |     width: 48px;
20 |     border: 1px solid rgba(0, 0, 0, 0.25);
21 |     border-radius: 2px;
22 | }
23 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/style-inspector/Style.ts:
--------------------------------------------------------------------------------
 1 | import { BackgroundProperties } from "./inspectors/BackgroundInspector";
 2 | import { BorderProperties } from "./inspectors/BorderInspector";
 3 | import { FontProperties } from "./inspectors/FontInspector";
 4 | import { MarginProperties } from "./inspectors/MarginInspector";
 5 | 
 6 | export type Style = {
 7 |     background?: BackgroundProperties;
 8 |     border?: BorderProperties;
 9 |     font?: FontProperties;
10 |     margin?: MarginProperties;
11 | };
12 | 
13 | export type FullStyle = { [K in keyof Required<Style>]: Required<Style[K]>}


--------------------------------------------------------------------------------
/src/presets/languages/css/CssSyntaxTree.ts:
--------------------------------------------------------------------------------
 1 | import { SyntaxTree } from "../../../core/languages/SyntaxTree";
 2 | import { CssSyntaxTreeNode } from "./CssSyntaxTreeNode";
 3 | import { CssParserContext } from "./CssParser";
 4 | import { CssNode } from "css-tree";
 5 | 
 6 | export class CssSyntaxTree extends SyntaxTree<CssSyntaxTreeNode> {
 7 |     static fromCssTreeRootNode(parserNode: CssNode, parserContext: CssParserContext): CssSyntaxTree {
 8 |         const rootNode = CssSyntaxTreeNode.fromCssTreeNode(parserNode, parserContext);
 9 |         return new CssSyntaxTree(rootNode);
10 |     } 
11 | }
12 | 
13 | 


--------------------------------------------------------------------------------
/src/presets/languages/language-presets.ts:
--------------------------------------------------------------------------------
 1 | import { CSS_LANGUAGE } from "./css/language";
 2 | import { JSON_LANGUAGE } from "./json/language";
 3 | import { PYTHON_LANGUAGE } from "./python/language";
 4 | import { TYPESCRIPT_LANGUAGE } from "./typescript/language";
 5 | import { PLAIN_TEXT_LANGUAGE } from "../../core/languages/plain-text";
 6 | import { MARKDOWN_LANGUAGE } from "./markdown/language";
 7 | 
 8 | export const LANGUAGE_PRESETS = [
 9 |   TYPESCRIPT_LANGUAGE,
10 |   JSON_LANGUAGE,
11 |   CSS_LANGUAGE,
12 |   PYTHON_LANGUAGE,
13 |   PLAIN_TEXT_LANGUAGE,
14 |   MARKDOWN_LANGUAGE
15 | ] as const;
16 | 


--------------------------------------------------------------------------------
/src/presets/languages/markdown/MarkdownSyntaxTree.ts:
--------------------------------------------------------------------------------
 1 | import { SyntaxTree } from "../../../core/languages/SyntaxTree";
 2 | import { MarkdownParserContext } from "./MarkdownParser";
 3 | import { MarkdownSyntaxTreeNode } from "./MarkdownSyntaxTreeNode";
 4 | 
 5 | export class MarkdownSyntaxTree extends SyntaxTree<MarkdownSyntaxTreeNode> {
 6 |     static fromMarkdownTreeRootNode(parserNode: any, parserContext: MarkdownParserContext): MarkdownSyntaxTree {
 7 |         const rootNode = MarkdownSyntaxTreeNode.fromParserNode(parserNode, parserContext);
 8 |         return new MarkdownSyntaxTree(rootNode);
 9 |     } 
10 | }
11 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import react from "@vitejs/plugin-react";
 3 | import { viteSingleFile } from "vite-plugin-singlefile";
 4 | 
 5 | export default defineConfig(({ command }) => {
 6 |     return {
 7 |         root: "./src/apps/playground/",
 8 | 
 9 |         base: command === "build"
10 |             ? "/lorgnette/playground/"
11 |             : "./",
12 | 
13 |         plugins: [
14 |             react(),
15 |             viteSingleFile()
16 |         ],
17 | 
18 |         build: {
19 |             outDir: "./build/",
20 |             reportCompressedSize: false
21 |         }
22 |     };
23 | });


--------------------------------------------------------------------------------
/src/apps/playground/examples/seaborn.ts:
--------------------------------------------------------------------------------
 1 | import { PYTHON_LANGUAGE } from "../../../presets/languages/python/language";
 2 | 
 3 | const text = `
 4 | barplot(
 5 |     ax = ax,
 6 |     data = user_data,
 7 |     x = "year",
 8 |     y = "time",
 9 |     hue = "gender",
10 |     palette = "muted",
11 |     alpha = 0.7,
12 |     ci = None,
13 |     hatch = "///",
14 |     edgecolor = "white",
15 |     linewidth = 1
16 | )
17 | 
18 | ax.set_title("Effect of X on Y")
19 | ax.set_xlabel("Year")
20 | ax.set_xlabel("Time (seconds)")
21 | `;
22 | 
23 | export const SEABORN_EXAMPLE = {
24 |     name: "Seaborn",
25 |     language: PYTHON_LANGUAGE,
26 |     content: text.trim()
27 | };


--------------------------------------------------------------------------------
/src/presets/user-interfaces/form/FormSettings.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactElement } from "react";
 2 | import { UserInterfaceSettings } from "../../../core/user-interfaces/UserInterfaceSettings";
 3 | 
 4 | export interface FormSettings extends UserInterfaceSettings {
 5 |     content: ReactElement;
 6 | }
 7 | 
 8 | export const DEFAULT_FORM_SETTINGS: FormSettings = {
 9 |     content: <div>No form content (<code>content</code> setting) was specified.</div>
10 | };
11 | 
12 | export const deriveFormSettingsFrom = (partialSettings: Partial<FormSettings>): FormSettings => {
13 |     return {
14 |         ...DEFAULT_FORM_SETTINGS,
15 |         ...partialSettings
16 |     };
17 | };
18 | 


--------------------------------------------------------------------------------
/src/presets/languages/typescript/TypescriptSyntaxTree.ts:
--------------------------------------------------------------------------------
 1 | import { SyntaxTree } from "../../../core/languages/SyntaxTree";
 2 | import { ts } from "ts-morph";
 3 | import { TypescriptSyntaxTreeNode } from "./TypescriptSyntaxTreeNode";
 4 | import { TypescriptParserContext } from "./TypescriptParser";
 5 | 
 6 | export class TypescriptSyntaxTree extends SyntaxTree<TypescriptSyntaxTreeNode> {
 7 |     static fromTsMorphNode(parserNode: ts.Node, parserContext: TypescriptParserContext): TypescriptSyntaxTree {
 8 |         const rootNode = TypescriptSyntaxTreeNode.fromTsMorphNode(parserNode, parserContext);
 9 |         return new TypescriptSyntaxTree(rootNode);
10 |     } 
11 | }
12 | 
13 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2020",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "noFallthroughCasesInSwitch": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react-jsx"
22 |   },
23 |   "include": [
24 |     "src/**/*.ts",
25 |     "src/**/*.tsx"
26 |   ]
27 | }
28 | 


--------------------------------------------------------------------------------
/src/apps/playground/examples/Example.ts:
--------------------------------------------------------------------------------
 1 | import { Language } from "../../../core/languages/Language";
 2 | import { CSS_EXAMPLE } from "./css";
 3 | import { MARKDOWN_EXAMPLE } from "./markdown";
 4 | import { SEABORN_EXAMPLE } from "./seaborn";
 5 | import { TYPESCRIPT_EXAMPLE } from "./typescript";
 6 | import { VEGA_EXAMPLE } from "./vega";
 7 | 
 8 | export interface Example {
 9 |     name: string;
10 |     language: Language;
11 |     content: string;
12 | }
13 | 
14 | export const EXAMPLES: Example[] = [
15 |     VEGA_EXAMPLE,
16 |     TYPESCRIPT_EXAMPLE,
17 |     CSS_EXAMPLE,
18 |     SEABORN_EXAMPLE,
19 |     MARKDOWN_EXAMPLE
20 | ];
21 | 
22 | export const DEFAULT_EXAMPLE: Example = TYPESCRIPT_EXAMPLE;


--------------------------------------------------------------------------------
/src/presets/languages/json/nodes/NullNode.ts:
--------------------------------------------------------------------------------
 1 | import { JsonSyntaxTreeNode } from "../JsonSyntaxTreeNode";
 2 | import { JsonParserContext } from "../JsonParser";
 3 | 
 4 | export class NullNode extends JsonSyntaxTreeNode {
 5 |     static readonly type = "Null";
 6 |     readonly type = NullNode.type;
 7 | 
 8 |     get childNodes(): JsonSyntaxTreeNode[] {
 9 |         return [];
10 |     }
11 | 
12 |     static fromNearlyParserResultNode(node: any, parserContext: JsonParserContext): JsonSyntaxTreeNode {
13 |         return new NullNode(
14 |             node,
15 |             NullNode.computeRangeFromParserNode(node, parserContext),
16 |             parserContext.sourceDocument
17 |         );
18 |     }
19 | }


--------------------------------------------------------------------------------
/src/core/templates/evaluators/numeric/NumericEvaluatorSettings.ts:
--------------------------------------------------------------------------------
 1 | import { EvaluatorSettings, EvaluatorValueType, deriveEvaluatorSettingsFromDefaults } from "../Evaluator";
 2 | 
 3 | 
 4 | export interface NumericEvaluatorSettings extends EvaluatorSettings<EvaluatorValueType.Number> {
 5 |     isIntegerValue: boolean;
 6 |     integerBase: number;
 7 | }
 8 | 
 9 | export function deriveNumericEvaluatorSettingsFromDefaults<
10 |     S extends EvaluatorSettings<EvaluatorValueType.Number>
11 | >(settings: Partial<S>): NumericEvaluatorSettings {
12 |     return {
13 |         isIntegerValue: false,
14 |         integerBase: 10,
15 | 
16 |         ...deriveEvaluatorSettingsFromDefaults(settings)
17 |     };
18 | }
19 | 


--------------------------------------------------------------------------------
/src/apps/playground/examples/css.ts:
--------------------------------------------------------------------------------
 1 | import { CSS_LANGUAGE } from "../../../presets/languages/css/language";
 2 | 
 3 | // From https://astexplorer.net/#/gist/244e2fb4da940df52bf0f4b94277db44/e79aff44611020b22cfd9708f3a99ce09b7d67a8.
 4 | const text = `
 5 | /**
 6 |  * Paste or drop some CSS here and explore
 7 |  * the syntax tree created by chosen parser.
 8 |  * Enjoy!
 9 |  */
10 | 
11 | @media screen and (min-width: 480px) {
12 |     body {
13 |         background-color: lightgreen;
14 |     }
15 | }
16 | 
17 | #main {
18 |     border: 1px solid black;
19 | }
20 | 
21 | ul li {
22 | 	padding: 5px;
23 | }
24 | `;
25 | 
26 | export const CSS_EXAMPLE = {
27 |     name: "CSS",
28 |     language: CSS_LANGUAGE,
29 |     content: text.trim()
30 | };


--------------------------------------------------------------------------------
/src/presets/user-interfaces/form/FormContext.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from "react";
 3 | import { FormEntry, FormEntryKey, FormEntryType, FormEntryValueOfType } from "./FormEntry";
 4 | 
 5 | export interface FormContextData {
 6 |     formEntries: FormEntry[];
 7 | 
 8 |     beginTransientEdit(): void;
 9 |     endTransientEdit(): void;
10 | 
11 |     declareFormEntryValueChange<T extends FormEntryType>(
12 |         formEntryKey: FormEntryKey,
13 |         newValue: FormEntryValueOfType<T>,
14 |         newValueType: T
15 |     ): void;
16 | }
17 | 
18 | export const FormContext = React.createContext<FormContextData>({
19 |     formEntries: [],
20 |     beginTransientEdit: () => {},
21 |     endTransientEdit: () => {},
22 |     declareFormEntryValueChange: () => {}
23 | });
24 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/value-history/value-history.css:
--------------------------------------------------------------------------------
 1 | .ui.value-history {
 2 |     font-size: 10px;
 3 |     font-family: monospace;
 4 | }
 5 | 
 6 | .ui.value-history .number-chart {
 7 |     overflow: hidden;
 8 |     margin: 0;
 9 |     padding: 0;
10 | }
11 | 
12 | .ui.value-history .string-differences {
13 |     max-height: 500px;
14 |     overflow: auto;
15 |     margin: 0;
16 |     padding: 0;
17 | }
18 | 
19 | .ui.value-history .string-differences li {
20 |     display: flex;
21 |     margin: 0;
22 |     padding: 0;
23 |     list-style-type: none;
24 | }
25 | 
26 | .ui.value-history .string-differences .time {
27 |     flex-grow: 0;
28 |     margin: 0 2em 0 0;
29 | }
30 | 
31 | .ui.value-history .string-differences .difference {
32 |     flex-grow: 1;
33 | }
34 | 


--------------------------------------------------------------------------------
/src/apps/playground/index.tsx:
--------------------------------------------------------------------------------
 1 | import "../global-style.css";
 2 | import "./playground.css";
 3 | 
 4 | import React from "react";
 5 | import { createRoot } from 'react-dom/client';
 6 | import { Playground } from "./Playground";
 7 | import { PlaygroundLorgnetteEnvironment } from "./PlaygroundLorgnetteEnvironment";
 8 | 
 9 | document.addEventListener("DOMContentLoaded", () => {
10 |     const rootElement = document.getElementById("lorgnette-playground-app");
11 |     const root = createRoot(rootElement!);
12 | 
13 |     root.render(
14 |         <React.StrictMode>
15 |             <PlaygroundLorgnetteEnvironment useLocalStore={true}>
16 |                 <Playground />
17 |             </PlaygroundLorgnetteEnvironment>
18 |         </React.StrictMode>
19 |     );
20 | });
21 |     


--------------------------------------------------------------------------------
/src/core/user-interfaces/UserInterfaceProvider.ts:
--------------------------------------------------------------------------------
 1 | import { Projection } from "../projections/Projection";
 2 | import { UserInterface, UserInterfaceInput, UserInterfaceOutput } from "./UserInterface";
 3 | import { UserInterfaceSettings } from "./UserInterfaceSettings";
 4 | 
 5 | export interface UserInterfaceProvider<
 6 |     I extends UserInterfaceInput = UserInterfaceInput,
 7 |     O extends UserInterfaceOutput = UserInterfaceOutput
 8 | > {
 9 |     provide(projection: Projection): UserInterface<I, O>;
10 | }
11 | 
12 | export type ConfigurableUserInterfaceProvider<
13 | S extends UserInterfaceSettings = UserInterfaceSettings,
14 |     I extends UserInterfaceInput = UserInterfaceInput,
15 |     O extends UserInterfaceOutput = UserInterfaceOutput
16 | > = (settings: S) => UserInterfaceProvider<I, O>;
17 | 


--------------------------------------------------------------------------------
/src/core/templates/textual/TextualTemplateSlot.ts:
--------------------------------------------------------------------------------
 1 | import { Document } from "../../documents/Document";
 2 | import { Range } from "../../documents/Range";
 3 | import { TemplateSlot, TemplateSlotKey } from "../TemplateSlot";
 4 | import { Evaluator } from "../evaluators/Evaluator";
 5 | 
 6 | export class TextualTemplateSlot extends TemplateSlot {
 7 |     private text: string;
 8 |     readonly range: Range;
 9 | 
10 |     constructor(
11 |         text: string,
12 |         range: Range,
13 |         sourceDocument: Document,
14 |         key: TemplateSlotKey,
15 |         evaluator?: Evaluator
16 |     ) {
17 |         super(sourceDocument, key, evaluator);
18 | 
19 |         this.text = text;
20 |         this.range = range;
21 |     }
22 | 
23 |     getText(): string {
24 |         return this.text;
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/apps/vscode-editor/index.tsx:
--------------------------------------------------------------------------------
 1 | import "../global-style.css";
 2 | import "./vscode-editor-app.css";
 3 | 
 4 | import React from "react";
 5 | import { createRoot } from "react-dom/client";
 6 | import { MonacoEditorWithProjections } from "../../utilities/monaco-editor/MonacoEditorWithProjections";
 7 | import { VscodeLorgnetteEnvironment } from "./VscodeLorgnetteEnvironment";
 8 | 
 9 | document.addEventListener("DOMContentLoaded", () => {
10 |     const rootElement = document.getElementById("lorgnette-vscode-editor-app");
11 |     const root = createRoot(rootElement!);
12 | 
13 |     root.render(
14 |         <React.StrictMode>
15 |             <VscodeLorgnetteEnvironment>
16 |                 <MonacoEditorWithProjections />
17 |             </VscodeLorgnetteEnvironment>
18 |         </React.StrictMode>
19 |     );
20 | });
21 | 


--------------------------------------------------------------------------------
/src/core/documents/TransientDocumentEditor.ts:
--------------------------------------------------------------------------------
 1 | import { Document, DocumentChangeContext } from "./Document";
 2 | import { DocumentEditor } from "./DocumentEditor";
 3 | 
 4 | export class TransientDocumentEditor extends DocumentEditor {
 5 |     IS_TRANSIENT = true;
 6 | 
 7 |     private initialDocumentContent: string;
 8 |     
 9 |     constructor(
10 |         document: Document,
11 |         changeContext: DocumentChangeContext
12 |     ) {
13 |         super(document, changeContext);
14 |         this.initialDocumentContent = document.content;
15 |     }
16 | 
17 |     protected getContentToEdit(): string {
18 |         return this.initialDocumentContent;
19 |     }
20 | 
21 |     restoreInitialContent() {
22 |         this.replace(this.document.range, this.initialDocumentContent);
23 |         this.applyEdits();
24 |     }
25 | }


--------------------------------------------------------------------------------
/src/core/mappings/ForwardMapping.ts:
--------------------------------------------------------------------------------
 1 | import { Document } from "../documents/Document";
 2 | import { Fragment } from "../fragments/Fragment";
 3 | import { RuntimeResponse } from "../runtime/RuntimeResponse";
 4 | import { UserInterfaceInput } from "../user-interfaces/UserInterface";
 5 | 
 6 | export interface ForwardMappingContext<F extends Fragment = Fragment> {
 7 |     fragment: F;
 8 |     document: Document;
 9 |     runtimeResponses: RuntimeResponse[];
10 | }
11 | 
12 | export type ForwardMappingFunction<
13 |     F extends Fragment = Fragment,
14 |     I extends UserInterfaceInput = UserInterfaceInput
15 | > = (context: ForwardMappingContext<F>) => I;
16 | 
17 | export interface ForwardMapping<
18 |     F extends Fragment = Fragment,
19 |     I extends UserInterfaceInput = UserInterfaceInput
20 | > {
21 |     apply: ForwardMappingFunction<F, I>;
22 | }
23 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/object-inspector/ObjectInspectorComponent.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactJson from "react-json-view";
 3 | 
 4 | type Props = {
 5 |     initialInput: object;
 6 | };
 7 | 
 8 | type State = {
 9 |     input: object;
10 | };
11 | 
12 | export class ObjectInspectorComponent extends React.Component<Props, State> {
13 |     constructor(props: Props) {
14 |         super(props);
15 | 
16 |         this.state = {
17 |             input: props.initialInput
18 |         };
19 |     }
20 | 
21 |     render() {
22 |         return <ReactJson
23 |             src={this.state.input}
24 |             name={null}
25 |             quotesOnKeys={false}
26 |             enableClipboard={false}
27 |             indentWidth={2}
28 |             collapsed={3}
29 |             collapseStringsAfterLength={8}
30 |         />;
31 |     }
32 | }


--------------------------------------------------------------------------------
/src/utilities/tasks/TaskRunner.ts:
--------------------------------------------------------------------------------
 1 | import { Task } from "./Task";
 2 | 
 3 | export abstract class TaskRunner {
 4 |     protected tasks: Task[];
 5 |     protected isRunningTask: boolean;
 6 | 
 7 |     constructor() {
 8 |         this.tasks = [];
 9 |         this.isRunningTask = false;
10 |     }
11 | 
12 |     get nbTasks(): number {
13 |         return this.tasks.length;
14 |     }
15 | 
16 |     get hasTask(): boolean {
17 |         return this.nbTasks > 0;
18 |     }
19 | 
20 |     protected queue(task: Task, addInFrontOfQueue: boolean): void {
21 |         if (addInFrontOfQueue) {
22 |             this.tasks.unshift(task);
23 |         }
24 |         else {
25 |             this.tasks.push(task);
26 |         }
27 |     }
28 | 
29 |     clearTasks(): void {
30 |         this.tasks = [];
31 |     }
32 | 
33 |     abstract addTask(task: Task): void;
34 | }


--------------------------------------------------------------------------------
/src/core/templates/evaluators/textual/TextualEvaluatorSettings.ts:
--------------------------------------------------------------------------------
 1 | import { EvaluatorSettings, EvaluatorValueType, deriveEvaluatorSettingsFromDefaults } from "../Evaluator";
 2 | 
 3 | 
 4 | export interface TextualEvaluatorSettings extends EvaluatorSettings<EvaluatorValueType.Text> {
 5 |     // List of delimiters that must be trimmed from the start and the end of the value.
 6 |     // The first delimiter of the list will be used to enclose new values if it is defined.
 7 |     ignorePairsOfDelimiters: string[] | false;
 8 | }
 9 | 
10 | export function deriveTextualEvaluatorSettingsFromDefaults<
11 |     S extends EvaluatorSettings<EvaluatorValueType.Text>
12 | >(settings: Partial<S>): TextualEvaluatorSettings {
13 |     return {
14 |         ignorePairsOfDelimiters: ["\"", "'", "`"],
15 | 
16 |         ...deriveEvaluatorSettingsFromDefaults(settings)
17 |     };
18 | }
19 | 


--------------------------------------------------------------------------------
/src/presets/renderers/popup/ButtonPopupRendererSettings.ts:
--------------------------------------------------------------------------------
 1 | import { ButtonProps } from "@blueprintjs/core";
 2 | import { ReactElement } from "react";
 3 | import { RendererSettings } from "../../../core/renderers/RendererSettings";
 4 | 
 5 | export type ButtonContent = string | ReactElement;
 6 | 
 7 | export interface ButtonPopupRendererSettings extends RendererSettings {
 8 |     buttonContent: ButtonContent;
 9 |     buttonProps: ButtonProps;
10 | }
11 | 
12 | export const DEFAULT_BUTTON_POPUP_RENDERER_SETTINGS: ButtonPopupRendererSettings = {
13 |     buttonContent: "🔎",
14 |     buttonProps: {}
15 | };
16 | 
17 | export const deriveButtonPopupRendererSettingsFrom = (partialSettings: Partial<ButtonPopupRendererSettings>): ButtonPopupRendererSettings => {
18 |     return {
19 |         ...DEFAULT_BUTTON_POPUP_RENDERER_SETTINGS,
20 |         ...partialSettings
21 |     };
22 | };


--------------------------------------------------------------------------------
/src/presets/user-interfaces/form/form-elements/helpers/Label.tsx:
--------------------------------------------------------------------------------
 1 | import React, { PropsWithChildren, ReactElement } from "react";
 2 | import { Label as BlueprintLabel } from "@blueprintjs/core";
 3 | 
 4 | export type LabelProps = PropsWithChildren<{
 5 |     title: string;
 6 | }>;
 7 | 
 8 | export class Label extends React.PureComponent<LabelProps> {
 9 |     render(): ReactElement {
10 |         return <BlueprintLabel>
11 |             <span className="form-label-text">{ this.props.title }</span>
12 |             { this.props.children }
13 |         </BlueprintLabel>;
14 |     }
15 | 
16 |     static wrapNonEmptyComponentWithLabel(
17 |         component: ReactElement | null,
18 |         label: string
19 |     ): ReactElement | null {
20 |         return component
21 |             ? <Label title={label}>{ component }</Label>
22 |             : component;
23 |     }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/core/documents/DocumentPosition.ts:
--------------------------------------------------------------------------------
 1 | import { Document } from "./Document";
 2 | import { Position } from "./Position";
 3 | 
 4 | export class DocumentPosition extends Position {
 5 |     readonly document: Document;
 6 | 
 7 |     constructor(document: Document, row: number, column: number, offset: number) {
 8 |         super(row, column, offset);
 9 |         this.document = document;
10 |     }
11 | 
12 |     relativeTo(origin: Position): DocumentPosition {
13 |         return new DocumentPosition(
14 |             this.document,
15 |             origin.row + this.row,
16 |             origin.column + this.column,
17 |             origin.offset + this.offset,
18 |         );
19 |     }
20 | 
21 |     static fromPosition(position: Position, document: Document) {
22 |         return new DocumentPosition(document, position.row, position.column, position.offset);
23 |     }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/presets/renderers/popover/ButtonPopoverRendererSettings.ts:
--------------------------------------------------------------------------------
 1 | import { ButtonProps } from "@blueprintjs/core";
 2 | import { ReactElement } from "react";
 3 | import { RendererSettings } from "../../../core/renderers/RendererSettings";
 4 | 
 5 | export type ButtonContent = string | ReactElement;
 6 | 
 7 | export interface ButtonPopoverRendererSettings extends RendererSettings {
 8 |     buttonContent: ButtonContent;
 9 |     buttonProps: ButtonProps;
10 | }
11 | 
12 | export const DEFAULT_BUTTON_POPOVER_RENDERER_SETTINGS: ButtonPopoverRendererSettings = {
13 |     buttonContent: "🔎",
14 |     buttonProps: {}
15 | };
16 | 
17 | export const deriveButtonPopoverRendererSettingsFrom = (partialSettings: Partial<ButtonPopoverRendererSettings>): ButtonPopoverRendererSettings => {
18 |     return {
19 |         ...DEFAULT_BUTTON_POPOVER_RENDERER_SETTINGS,
20 |         ...partialSettings
21 |     };
22 | };


--------------------------------------------------------------------------------
/src/presets/languages/css/CssParser.ts:
--------------------------------------------------------------------------------
 1 | import * as csstree from "css-tree";
 2 | import { Document } from "../../../core/documents/Document";
 3 | import { Parser } from "../../../core/languages/Parser";
 4 | import { CssSyntaxTree } from "./CssSyntaxTree";
 5 | 
 6 | export interface CssParserContext {
 7 |     text: string;
 8 |     sourceDocument: Document;
 9 | }
10 | 
11 | export class CssParser implements Parser {
12 |     async parse(document: Document): Promise<CssSyntaxTree> {
13 |         const text = document.content;
14 |         const parsingContext = {
15 |             text: text,
16 |             sourceDocument: document
17 |         };
18 | 
19 |         const rootCssTreeNode = csstree.parse(text, {
20 |             parseValue: false,
21 |             positions: true
22 |         });
23 |         
24 |         return CssSyntaxTree.fromCssTreeRootNode(rootCssTreeNode, parsingContext);
25 |     }
26 | }


--------------------------------------------------------------------------------
/src/presets/user-interfaces/style-inspector/inspectors/MarginInspector.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactElement } from "react";
 2 | import { ValueWithUnit } from "../../../../utilities/ValueWithUnit";
 3 | import { SpecialisedStyleInspector, SpecialisedStyleInspectorProperties } from "./SpecialisedStyleInspector";
 4 | 
 5 | export type Margin = {
 6 |     top: ValueWithUnit;
 7 |     bottom: ValueWithUnit;
 8 |     left: ValueWithUnit;
 9 |     right: ValueWithUnit;
10 | };
11 | 
12 | export type MarginProperties = SpecialisedStyleInspectorProperties<{
13 |     inner?: Margin;
14 |     outer?: Margin;
15 | }>;
16 | 
17 | export class MarginInspector extends SpecialisedStyleInspector<MarginProperties> {
18 |     protected readonly title = "Margins";
19 |     protected readonly className = "margin";
20 | 
21 |     protected renderEditor(): ReactElement {
22 |         return <>
23 |         
24 |         </>;
25 |     }
26 | }


--------------------------------------------------------------------------------
/src/core/fragments/syntactic/SyntacticFragment.ts:
--------------------------------------------------------------------------------
 1 | import { SyntaxTreeNode } from "../../languages/SyntaxTreeNode";
 2 | import { Fragment } from "../Fragment";
 3 | import { DocumentRange } from "../../documents/DocumentRange";
 4 | import { Document } from "../../documents/Document";
 5 | import { FragmentType } from "../FragmentType";
 6 | 
 7 | export class SyntacticFragment implements Fragment {
 8 |     readonly type = FragmentType.Syntactic;
 9 |     
10 |     private document: Document;
11 |     readonly node: SyntaxTreeNode;
12 |     readonly range: DocumentRange;
13 | 
14 |     constructor(node: SyntaxTreeNode, document: Document) {
15 |         this.document = document;
16 |         this.node = node;
17 |         this.range = DocumentRange.fromRange(this.node.range, this.document);
18 |     }
19 | 
20 |     get text(): string {
21 |         return this.document.getContentInRange(this.range);
22 |     }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/utilities/SplitRegex.ts:
--------------------------------------------------------------------------------
 1 | export function getRegexBody(regex: RegExp): string {
 2 |     const regexAsString = regex.toString();
 3 |     return regexAsString.slice(1, regexAsString.length - 1);
 4 | }
 5 | 
 6 | export function getRegexFlags(regex: RegExp): string {
 7 |     return regex.flags;
 8 | }
 9 | 
10 | export class SplitRegex {
11 |     readonly body: string;
12 |     readonly flags: string;
13 | 
14 |     constructor(body: string, flags: string) {
15 |         this.body = body;
16 |         this.flags = flags;
17 |     }
18 | 
19 |     isEqualTo(otherSplitRegex: SplitRegex): boolean {
20 |         return this.body === otherSplitRegex.body
21 |             && this.flags === otherSplitRegex.flags;
22 |     }
23 | 
24 |     static fromRegex(regex: RegExp): SplitRegex {
25 |         return new SplitRegex(
26 |             getRegexBody(regex),
27 |             getRegexFlags(regex)
28 |         );
29 |     }
30 | }


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     root: true,
 3 |     extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
 4 |     parser: "@typescript-eslint/parser",
 5 |     plugins: ["@typescript-eslint"],
 6 |     parserOptions: {
 7 |         project: true
 8 |     },
 9 |     rules: {
10 |         // Preset rules to disable entirely.
11 |         "@typescript-eslint/no-explicit-any": "off",
12 |         "@typescript-eslint/no-unused-vars": "off",
13 |         "prefer-const": "off",
14 |         "no-case-declarations": "off",
15 |         "no-empty": "off",
16 |         "no-extra-boolean-cast": "off",
17 |         "@typescript-eslint/ban-types": "off",
18 | 
19 |         // Additional or modified rules.
20 |         "semi": ["warn", "always"],
21 |     },
22 |     ignorePatterns: [
23 |         "build/",
24 |         ".eslintrc.cjs",
25 |         "build.js",
26 |         "vite.config.ts"
27 |     ]
28 | };
29 | 


--------------------------------------------------------------------------------
/src/utilities/Valuable.ts:
--------------------------------------------------------------------------------
 1 | type NotFunction<T> = T extends Function ? never : T;
 2 | 
 3 | /**
 4 |  * An object that can be turned into a value that can either be:
 5 |  * - a value of type T;
 6 |  * - a function that returns a value of type T given a context of type C.
 7 |  * 
 8 |  * Note that the type of a single value T cannot be a function.
 9 |  */
10 | export type Valuable<T, C = undefined> =
11 |     | NotFunction<T>
12 |     | ((parameter: C) => T);
13 | 
14 | /** Evaluate the given valuable within the given context. */
15 | export function evaluate<T>(valuable: Valuable<T, undefined>): T;
16 | export function evaluate<T, C>(valuable: Valuable<T, C>, context: C): T;
17 |     export function evaluate<T, C = undefined>(valuable: Valuable<T, C>, context?: C): T {
18 |     if (valuable instanceof Function) {
19 |         return valuable(context!);
20 |     }
21 |     else {
22 |         return valuable;
23 |     }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/presets/renderers/side/SideRendererSettings.ts:
--------------------------------------------------------------------------------
 1 | import { RendererSettings } from "../../../core/renderers/RendererSettings";
 2 | 
 3 | export enum SideRendererPosition {
 4 |     RightSideOfCode = "RightSideOfCode",
 5 |     RightSideOfEditor = "RightSideOfEditor"
 6 | }
 7 | 
 8 | export interface SideRendererSettings extends RendererSettings {
 9 |     onlyShowWhenCursorIsInRange: boolean;
10 |     position: SideRendererPosition;
11 |     positionOffset: number; // px
12 | }
13 | 
14 | export const DEFAULT_ASIDE_RENDERER_SETTINGS: SideRendererSettings = {
15 |     onlyShowWhenCursorIsInRange: false,
16 |     position: SideRendererPosition.RightSideOfCode,
17 |     positionOffset: 10
18 | };
19 | 
20 | export const deriveSideRendererSettingsFrom = (partialSettings: Partial<SideRendererSettings>): SideRendererSettings => {
21 |     return {
22 |         ...DEFAULT_ASIDE_RENDERER_SETTINGS,
23 |         ...partialSettings
24 |     };
25 | };


--------------------------------------------------------------------------------
/src/utilities/ValueWithUnit.ts:
--------------------------------------------------------------------------------
 1 | export class ValueWithUnit<V = number, U = string> {
 2 |     value: V;
 3 |     unit: U;
 4 | 
 5 |     constructor(value: V, unit: U) {
 6 |         this.value = value;
 7 |         this.unit = unit;
 8 |     }
 9 | 
10 |     with(changes: Partial<ValueWithUnit<V, U>>): ValueWithUnit<V, U> {
11 |         return new ValueWithUnit(
12 |             changes.value ?? this.value,
13 |             changes.unit ?? this.unit
14 |         );
15 |     }
16 | 
17 |     toString(): string {
18 |         return `${this.value}${this.unit}`;
19 |     }
20 | 
21 |     static fromText(text: string): ValueWithUnit<number, string> | null {
22 |         const regex = /\s*([+-]?(?:\d*.\d+)|\d+)\s*(\S*)\s*/;
23 |         const execResults = regex.exec(text);
24 | 
25 |         if (!execResults) {
26 |             return null;
27 |         }
28 | 
29 |         return new ValueWithUnit(
30 |             Number(execResults[1]),
31 |             execResults[2],
32 |         );
33 |     }
34 | }


--------------------------------------------------------------------------------
/src/core/templates/evaluators/boolean/BooleanEvaluatorSettings.ts:
--------------------------------------------------------------------------------
 1 | import { EvaluatorSettings, EvaluatorValueType, deriveEvaluatorSettingsFromDefaults } from "../Evaluator";
 2 | 
 3 | 
 4 | export interface BooleanEvaluatorSettings extends EvaluatorSettings<EvaluatorValueType.Boolean> {
 5 |     // Text to use when writing a true or false value in a document.
 6 |     trueSymbol: string;
 7 |     falseSymbol: string;
 8 | 
 9 |     // A function that takes the raw value as text and decides whether it is truthful or not.
10 |     isTextTruthful(text: string): boolean;
11 | }
12 | 
13 | export function deriveBooleanEvaluatorSettingsFromDefaults<
14 |     S extends EvaluatorSettings<EvaluatorValueType.Boolean>
15 | >(settings: Partial<S>): BooleanEvaluatorSettings {
16 |     return {
17 |         trueSymbol: "true",
18 |         falseSymbol: "false",
19 |         isTextTruthful(text: string) { return text !== this.falseSymbol; },
20 | 
21 |         ...deriveEvaluatorSettingsFromDefaults(settings)
22 |     };
23 | }
24 | 


--------------------------------------------------------------------------------
/src/utilities/monaco-editor/monaco-editor-with-projections.css:
--------------------------------------------------------------------------------
 1 | .monaco-editor-with-projections {
 2 |     position: relative;
 3 |     width: 100%;
 4 |     height: 100%;
 5 | }
 6 | 
 7 | .monaco-editor-with-projections .projections {
 8 |     position: absolute;
 9 |     top: 0;
10 |     left: 0;
11 |     width: 100%;
12 |     height: 100%;
13 |     pointer-events: none;
14 | }
15 | 
16 | .monaco-editor-with-projections .projections * {
17 |     pointer-events: all;
18 | }
19 | 
20 | .monaco-editor-with-projections {
21 |     /* box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); */
22 |     border: 1px solid rgba(0, 0, 0, 0.1);
23 | }
24 | 
25 | .monaco-editor-with-projections .decorated-range.fragment {
26 |     background-color: rgba(255, 255, 0, 0.10);
27 | }
28 | 
29 | .monaco-editor-with-projections .decorated-range.fragment.active {
30 |     background-color: rgba(255, 255, 0, 0.25);
31 | }
32 | 
33 | .monaco-editor-with-projections .decorated-range.highlighted {
34 |     background-color: rgba(0, 255, 0, 0.25);
35 | }


--------------------------------------------------------------------------------
/src/presets/user-interfaces/form/form-elements/helpers/Section.tsx:
--------------------------------------------------------------------------------
 1 | import React, { PropsWithChildren, ReactElement } from "react";
 2 | 
 3 | export type SectionProps = PropsWithChildren<{
 4 |     title?: string;
 5 |     style?: React.CSSProperties;
 6 |     contentStyle?: React.CSSProperties;
 7 | }>;
 8 | 
 9 | export class Section extends React.PureComponent<SectionProps> {
10 |     render(): ReactElement | null {
11 |         return <div className="form-section" style={this.props.style}>
12 |             <div className="form-section-header">
13 |                 <div className="form-section-separator" />
14 |                 <div className="form-section-title">
15 |                     { this.props.title }
16 |                 </div>
17 |                 <div className="form-section-separator" />
18 |             </div>
19 |             <div className="form-section-content" style={this.props.contentStyle}>
20 |                 { this.props.children }
21 |             </div>
22 |         </div>;
23 |     }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/tree/tree-component.css:
--------------------------------------------------------------------------------
 1 | .ui.tree {
 2 |     --rct-color-tree-bg: transparent;
 3 | }
 4 | 
 5 | .ui.tree .tree-item {
 6 |     display: flex;
 7 |     width: 100%;
 8 |     padding: 0.25ex 0 0.25ex 1em;
 9 |     justify-content: space-between;
10 |     background-color: rgba(0, 0, 0, 0.015);
11 |     border-width: 1px 0 1px 2px;
12 |     border-style: solid;
13 |     border-color: rgba(0, 0, 0, 0.05);
14 | }
15 | 
16 | .ui.tree .tree-item .title {
17 |     max-height: 2ex;
18 |     overflow: hidden;
19 | }
20 | 
21 | .ui.tree .tree-item:hover {
22 |     background-color: rgba(0, 0, 0, 0.05);
23 |     border-color: rgba(0, 0, 0, 0.15);
24 | }
25 | 
26 | .ui.tree .tree-item .range {
27 |     color: #666;
28 |     font-family: monospace;
29 |     text-align: right;
30 | }
31 | 
32 | .ui.tree .tree-item .pre-title {
33 |     padding: 0 1em 0 0;
34 |     color: #666;
35 |     font-family: monospace;
36 | }
37 | 
38 | .ui.tree .tree-item .post-title {
39 |     padding: 0 0 0 1em;
40 |     color: #666;
41 | }


--------------------------------------------------------------------------------
/src/core/user-interfaces/error/UserInterfaceError.tsx:
--------------------------------------------------------------------------------
 1 | import "./user-interface-error.css";
 2 | import { ReactElement } from "react";
 3 | 
 4 | export const enum UserInterfaceErrorOrigin {
 5 |     ForwardMapping = "ForwardMapping",
 6 |     UserInterface = "UserInterface"
 7 | }
 8 | 
 9 | export class UserInterfaceError {
10 |     readonly origin: UserInterfaceErrorOrigin;
11 |     readonly title: string;
12 |     readonly body: ReactElement | null;
13 | 
14 |     constructor(
15 |         origin: UserInterfaceErrorOrigin,
16 |         title: string,
17 |         body?: ReactElement
18 |     ) {
19 |         this.origin = origin;
20 |         this.title = title;
21 |         this.body = body ?? null;
22 |     }
23 | 
24 |     createView(): ReactElement {
25 |         return <div
26 |             className="ui-error"
27 |         >
28 |             <span className="title">{ this.title }</span>
29 |             <div className="body">
30 |                 { this.body }
31 |             </div>
32 |         </div>;
33 |     }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/core/templates/evaluators/boolean/BooleanEvaluator.ts:
--------------------------------------------------------------------------------
 1 | import { BooleanEvaluatorSettings, deriveBooleanEvaluatorSettingsFromDefaults } from "./BooleanEvaluatorSettings";
 2 | import { EvaluatorSettings, EvaluatorValueType, Evaluator } from "../Evaluator";
 3 | 
 4 | export class BooleanEvaluator extends Evaluator<
 5 |     EvaluatorValueType.Boolean,
 6 |     BooleanEvaluatorSettings
 7 | > {
 8 |     readonly type = EvaluatorValueType.Boolean;
 9 | 
10 |     constructor(partialSettings: Partial<EvaluatorSettings<EvaluatorValueType.Boolean>> = {}) {
11 |         super(
12 |             partialSettings,
13 |             deriveBooleanEvaluatorSettingsFromDefaults
14 |         );
15 |     }
16 | 
17 |     protected convertRawValueToValue(text: string): boolean {
18 |         return this.settings.isTextTruthful(text);
19 |     }
20 | 
21 |     protected convertValueToRawValue(newValue: boolean): string {
22 |         return newValue
23 |             ? this.settings.trueSymbol
24 |             : this.settings.falseSymbol;
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/presets/languages/python/nodes/NoneNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { PythonSyntaxTreeNode } from "../PythonSyntaxTreeNode";
 3 | import { PythonParserContext } from "../PythonParser";
 4 | import { Document } from "../../../../core/documents/Document";
 5 | 
 6 | export class NoneNode extends PythonSyntaxTreeNode {
 7 |     static readonly type = "None";
 8 |     readonly type = NoneNode.type;
 9 | 
10 |     constructor(
11 |         parserNode: any,
12 |         range: Range,
13 |         sourceDocument: Document
14 |     ) {
15 |         super(parserNode, range, sourceDocument);
16 |     }
17 | 
18 |     get childNodes(): PythonSyntaxTreeNode[] {
19 |         return [];
20 |     }
21 | 
22 |     static fromNearlyParserResultNode(node: any, parserContext: PythonParserContext): NoneNode {
23 |         return new NoneNode(
24 |             node,
25 |             NoneNode.computeRangeFromParserNode(node, parserContext),
26 |             parserContext.sourceDocument
27 |         );
28 |     }
29 | }


--------------------------------------------------------------------------------
/src/presets/user-interfaces/user-interfaces-presets.ts:
--------------------------------------------------------------------------------
 1 | import { ColorPicker } from "./color-picker/ColorPicker";
 2 | import { Form } from "./form/Form";
 3 | import { ObjectInspector } from "./object-inspector/ObjectInspector";
 4 | import { RegexEditor } from "./regex-editor/RegexEditor";
 5 | import { StyleInspector } from "./style-inspector/StyleInspector";
 6 | import { Table } from "./table/Table";
 7 | import { Tree } from "./tree/Tree";
 8 | import { ValueHistory } from "./value-history/ValueHistory";
 9 | 
10 | export const USER_INTERFACE_PRESETS = {
11 |     "object-inspector": ObjectInspector.makeConfigurableProvider(),
12 |     "color-picker": ColorPicker.makeConfigurableProvider(),
13 |     "table": Table.makeConfigurableProvider(),
14 |     "form": Form.makeConfigurableProvider(),
15 |     "tree": Tree.makeConfigurableProvider(),
16 |     "regex-editor": RegexEditor.makeConfigurableProvider(),
17 |     "value-history": ValueHistory.makeConfigurableProvider(),
18 |     "style-inspector": StyleInspector.makeConfigurableProvider(),
19 | } as const;
20 | 


--------------------------------------------------------------------------------
/src/core/mappings/BackwardMapping.ts:
--------------------------------------------------------------------------------
 1 | import { Document } from "../documents/Document";
 2 | import { DocumentEditor } from "../documents/DocumentEditor";
 3 | import { Fragment } from "../fragments/Fragment";
 4 | import { UserInterfaceOutput } from "../user-interfaces/UserInterface";
 5 | 
 6 | export interface BackwardMappingContext<
 7 |     F extends Fragment = Fragment,
 8 |     O extends UserInterfaceOutput = UserInterfaceOutput
 9 | > {
10 |     userInterfaceOutput: O;
11 |     fragment: F;
12 |     document: Document;
13 |     documentEditor: DocumentEditor;
14 | }
15 | 
16 | export type BackwardMappingFunction <
17 |     F extends Fragment = Fragment,
18 |     O extends UserInterfaceOutput = UserInterfaceOutput,
19 | > = (context: BackwardMappingContext<F, O>) => void
20 | 
21 | export interface BackwardMapping<
22 |     F extends Fragment = Fragment,
23 |     O extends UserInterfaceOutput = UserInterfaceOutput,
24 | > {
25 |     apply: BackwardMappingFunction<F, O>;
26 | }
27 | 
28 | export const EMPTY_OUTPUT_MAPPING: BackwardMapping = {
29 |     apply() {}
30 | };
31 | 


--------------------------------------------------------------------------------
/src/presets/languages/markdown/MarkdownParser.ts:
--------------------------------------------------------------------------------
 1 | // import { Parser as CommonmarkParser } from "commonmark";
 2 | import { fromMarkdown } from "mdast-util-from-markdown";
 3 | import { gfm } from "micromark-extension-gfm";
 4 | import { gfmFromMarkdown } from "mdast-util-gfm";
 5 | import { Parser } from "../../../core/languages/Parser";
 6 | import { MarkdownSyntaxTree } from "./MarkdownSyntaxTree";
 7 | import { Document } from "../../../core/documents/Document";
 8 | 
 9 | export interface MarkdownParserContext {
10 |     text: string;
11 |     sourceDocument: Document;
12 | }
13 | 
14 | export class MarkdownParser implements Parser {
15 |     async parse(document: Document): Promise<MarkdownSyntaxTree> {
16 |         const text = document.content;
17 |         const rootNode = fromMarkdown(text, {
18 |             extensions: [gfm()],
19 |             mdastExtensions: [gfmFromMarkdown()]
20 |         });
21 | 
22 |         return MarkdownSyntaxTree.fromMarkdownTreeRootNode(rootNode, {
23 |             text: text,
24 |             sourceDocument: document
25 |         });
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/core/templates/syntactic/SyntacticTemplateSlot.ts:
--------------------------------------------------------------------------------
 1 | import { Document } from "../../documents/Document";
 2 | import { Range } from "../../documents/Range";
 3 | import { SyntaxTreeNode } from "../../languages/SyntaxTreeNode";
 4 | import { TemplateSlot, TemplateSlotKey } from "../TemplateSlot";
 5 | import { Evaluator } from "../evaluators/Evaluator";
 6 | 
 7 | // Note: defining the range property as a getter results in an exception,
 8 | // because it seems that some code (that I could not identify...)
 9 | // attempts to set the "range" property of the slot.
10 | export class SyntacticTemplateSlot extends TemplateSlot {
11 |     readonly node: SyntaxTreeNode;
12 |     readonly range: Range;
13 | 
14 |     constructor(
15 |         node: SyntaxTreeNode,
16 |         sourceDocument: Document,
17 |         key: TemplateSlotKey,
18 |         evaluator?: Evaluator
19 |     ) {
20 |         super(sourceDocument, key, evaluator);
21 | 
22 |         this.node = node;
23 |         this.range = node.range;
24 |     }
25 | 
26 |     getText(): string {
27 |         return this.node.text;
28 |     }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/core/templates/evaluators/numeric/NumericEvaluator.ts:
--------------------------------------------------------------------------------
 1 | import { EvaluatorValueType, Evaluator } from "../Evaluator";
 2 | import { NumericEvaluatorSettings, deriveNumericEvaluatorSettingsFromDefaults } from "./NumericEvaluatorSettings";
 3 | 
 4 | export class NumericEvaluator extends Evaluator<
 5 |     EvaluatorValueType.Number,
 6 |     NumericEvaluatorSettings
 7 | > {
 8 |     readonly type = EvaluatorValueType.Number;
 9 | 
10 |     constructor(partialSettings: Partial<NumericEvaluatorSettings> = {}) {
11 |         super(
12 |             partialSettings,
13 |             deriveNumericEvaluatorSettingsFromDefaults
14 |         );
15 |     }
16 | 
17 |     protected convertRawValueToValue(text: string): number {
18 |         return this.settings.isIntegerValue
19 |             ? parseInt(text, this.settings.integerBase)
20 |             : parseFloat(text);
21 |     }
22 | 
23 |     protected convertValueToRawValue(newValue: number): string {
24 |         return this.settings.isIntegerValue
25 |             ? newValue.toString(this.settings.integerBase)
26 |             : newValue.toString();
27 |     }
28 | }


--------------------------------------------------------------------------------
/src/utilities/ValueCondition.ts:
--------------------------------------------------------------------------------
 1 | type NotFunction<T> = T extends Function ? never : T;
 2 | type NotFunctionNorNullable<T> = NotFunction<T> & NonNullable<T>;
 3 | 
 4 | /**
 5 |  * A condition on a value that can be represented by either:
 6 |  * - a single value that (true if the other value is equal);
 7 |  * - a list of values (true if the other value is in the list);
 8 |  * - an assertion function (true if it returns true when given another value).
 9 |  * 
10 |  * Note that the type of a single value T cannot be a function nor nullable.
11 |  */
12 | export type ValueCondition<T> =
13 |     | NotFunctionNorNullable<T>
14 |     | T[]
15 |     | ((value: T) => boolean);
16 | 
17 | /** Evaluate whether the given condition is true for the given value. */
18 | export function evaluateCondition<T>(condition: ValueCondition<T>, value: T): boolean {
19 |     if (condition instanceof Function) {
20 |         return condition(value);
21 |     }
22 |     else if (Array.isArray(condition)) {
23 |         return condition.includes(value);
24 |     }
25 |     else {
26 |         return value === condition;
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/core/fragments/textual/TextualFragment.ts:
--------------------------------------------------------------------------------
 1 | import { RegexMatch } from "../../../utilities/RegexMatcher";
 2 | import { Document } from "../../documents/Document";
 3 | import { DocumentRange } from "../../documents/DocumentRange";
 4 | import { ABSOLUTE_ORIGIN_POSITION, Position } from "../../documents/Position";
 5 | import { Fragment } from "../Fragment";
 6 | import { FragmentType } from "../FragmentType";
 7 | 
 8 | export class TextualFragment implements Fragment {
 9 |     readonly type = FragmentType.Textual;
10 |     
11 |     readonly text: string;
12 |     readonly range: DocumentRange;
13 | 
14 |     constructor(text: string, range: DocumentRange) {
15 |         this.text = text;
16 |         this.range = range;
17 |     }
18 | 
19 |     static fromRegexMatch(
20 |         match: RegexMatch,
21 |         document: Document,
22 |         originPosition: Position = ABSOLUTE_ORIGIN_POSITION
23 |     ): TextualFragment {
24 |         return new TextualFragment(
25 |             match.value,
26 |             DocumentRange.fromRange(match.range.relativeTo(originPosition), document)
27 |         );
28 |     }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/core/runtime/RuntimeResponse.ts:
--------------------------------------------------------------------------------
 1 | import { RuntimeRequestId } from "./RuntimeRequest";
 2 | 
 3 | export interface RawRuntimeResponse {
 4 |     readonly requestId: number;
 5 |     readonly content: string;    
 6 | }
 7 | 
 8 | export class RuntimeResponse {
 9 |     private requestId: RuntimeRequestId;
10 |     readonly name: string;
11 |     readonly receptionTime: number;
12 |     readonly content: string;
13 | 
14 |     constructor(
15 |         requestId: RuntimeRequestId,
16 |         name: string,
17 |         receptionTime: number,
18 |         content: string
19 |     ) {
20 |         this.requestId = requestId;
21 |         this.name = name;
22 |         this.receptionTime = receptionTime;
23 |         this.content = content;
24 |     }
25 | 
26 |     static fromRawResponse(
27 |         rawResponse: RawRuntimeResponse,
28 |         name: string,
29 |         receptionTime: number
30 |     ): RuntimeResponse {
31 |         return new RuntimeResponse(
32 |             rawResponse.requestId,
33 |             name,
34 |             receptionTime,
35 |             rawResponse.content
36 |         );
37 |     }
38 | }
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Camille Gobert
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/form/form.css:
--------------------------------------------------------------------------------
 1 | .ui.form {
 2 |     /* max-width: 600px; */
 3 |     padding: 1em;
 4 |     /* background-color: #FFF; */
 5 |     /* border: 1px solid #666; */
 6 | }
 7 | 
 8 | .ui.form .form-label-text {
 9 |     display: block;
10 |     margin: 0 0 0.5ex 0;
11 |     color: #666;
12 |     font-size: 0.8em;
13 |     text-align: left;
14 | }
15 | 
16 | .ui.form .form-section {
17 |     
18 | }
19 | 
20 | .ui.form .form-section .form-section-header {
21 |     display: flex;
22 | }
23 | 
24 | .ui.form .form-section .form-section-title {
25 |     margin: 0 1em;
26 |     color: #333;
27 |     font-weight: bold;
28 | }
29 | 
30 | .ui.form .form-section .form-section-separator {
31 |     flex-grow: 1;
32 |     margin: 0 0 0.6em 0;
33 |     border-bottom: 1px solid #999;
34 | }
35 | 
36 | .ui.form .form-section .form-section-content {
37 |     padding: 1em;
38 | }
39 | 
40 | .ui.form .form-single-row {
41 |     display: flex;
42 |     align-items: center;
43 |     gap: 1ex;
44 | }
45 | 
46 | .ui.form .form-button-group {
47 |     align-items: center;
48 | }
49 | 
50 | /* .ui.form .bp5-switch {
51 |     float: right;
52 |     margin: 0;
53 | } */
54 | 


--------------------------------------------------------------------------------
/src/presets/languages/json/nodes/BooleanNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { JsonSyntaxTreeNode } from "../JsonSyntaxTreeNode";
 3 | import { JsonParserContext } from "../JsonParser";
 4 | import { Document } from "../../../../core/documents/Document";
 5 | 
 6 | export class BooleanNode extends JsonSyntaxTreeNode {
 7 |     static readonly type = "Boolean";
 8 |     readonly type = BooleanNode.type;
 9 | 
10 |     readonly value: boolean;
11 | 
12 |     constructor(
13 |         value: boolean,
14 |         parserNode: any,
15 |         range: Range,
16 |         sourceDocument: Document
17 |     ) {
18 |         super(parserNode, range, sourceDocument);
19 |         this.value = value;
20 |     }
21 | 
22 |     get childNodes(): JsonSyntaxTreeNode[] {
23 |         return [];
24 |     }
25 | 
26 |     static fromNearlyParserResultNode(node: any, parserContext: JsonParserContext): JsonSyntaxTreeNode {
27 |         return new BooleanNode(
28 |             node.value,
29 |             node,
30 |             BooleanNode.computeRangeFromParserNode(node, parserContext),
31 |             parserContext.sourceDocument
32 |         );
33 |     }
34 | }


--------------------------------------------------------------------------------
/src/presets/user-interfaces/form/form-elements/helpers/SingleRow.tsx:
--------------------------------------------------------------------------------
 1 | import React, { PropsWithChildren, ReactElement } from "react";
 2 | import { AnyEntryTypeSymbol, ANY_ENTRY_TYPES } from "../FormElement";
 3 | import { Label } from "./Label";
 4 | 
 5 | export type SingleRowProps = PropsWithChildren<{
 6 |     label?: string;
 7 |     style?: React.CSSProperties;
 8 |     gapSize?: number | string;
 9 | }>;
10 | 
11 | export class SingleRow extends React.PureComponent<SingleRowProps> {
12 |     protected readonly supportedFormEntryTypes: AnyEntryTypeSymbol = ANY_ENTRY_TYPES;
13 | 
14 |     protected renderSingleRow(): ReactElement {
15 |         return <div
16 |             className="form-single-row"
17 |             style={{
18 |                 gap: this.props.gapSize,
19 |                 ...this.props.style
20 |             }}
21 |         >
22 |             { this.props.children }
23 |         </div>;
24 |     }
25 | 
26 |     render(): ReactElement | null {
27 |         const label = this.props.label;
28 |         return label ?
29 |             Label.wrapNonEmptyComponentWithLabel(this.renderSingleRow(), label)
30 |             : this.renderSingleRow();
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/core/fragments/syntactic/TreePatternFinder.ts:
--------------------------------------------------------------------------------
 1 | import { Document } from "../../documents/Document";
 2 | import { SyntaxTreePattern } from "../../languages/SyntaxTreePattern";
 3 | import { FragmentProvider } from "../FragmentProvider";
 4 | import { FragmentType } from "../FragmentType";
 5 | import { SyntacticFragment } from "./SyntacticFragment";
 6 | 
 7 | export class TreePatternFinder implements FragmentProvider<SyntacticFragment> {
 8 |     readonly type = FragmentType.Syntactic;
 9 |     private searchPattern: SyntaxTreePattern;
10 | 
11 |     constructor(searchPattern: SyntaxTreePattern) {
12 |         this.searchPattern = searchPattern;
13 |     }
14 | 
15 |     async provideFragmentsForDocument(document: Document): Promise<SyntacticFragment[]> {
16 |         try {
17 |             const syntaxTree = await document.syntaxTree;
18 |             return this.searchPattern
19 |                 .apply(syntaxTree)
20 |                 .map(node => new SyntacticFragment(node, document));
21 |         }
22 |         catch (error: any) {
23 |             // In case an error happens (e.g., during parsing), return an empty list.
24 |             return [];
25 |         }
26 |     }
27 | }


--------------------------------------------------------------------------------
/src/presets/languages/json/nodes/NumberNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { JsonSyntaxTreeNode } from "../JsonSyntaxTreeNode";
 3 | import { JsonParserContext } from "../JsonParser";
 4 | import { Document } from "../../../../core/documents/Document";
 5 | 
 6 | export class NumberNode extends JsonSyntaxTreeNode {
 7 |     static readonly type = "Number";
 8 |     readonly type = NumberNode.type;
 9 | 
10 |     readonly value: number;
11 | 
12 |     constructor(
13 |         value: number,
14 |         parserNode: any,
15 |         range: Range,
16 |         sourceDocument: Document
17 |     ) {
18 |         super(parserNode, range, sourceDocument);
19 |         this.value = value;
20 |     }
21 | 
22 |     get childNodes(): JsonSyntaxTreeNode[] {
23 |         return [];
24 |     }
25 | 
26 |     static fromNearlyParserResultNode(node: any, parserContext: JsonParserContext): JsonSyntaxTreeNode {
27 |         return new NumberNode(
28 |             Number(node.value.text),
29 |             node,
30 |             NumberNode.computeRangeFromParserNode(node, parserContext),
31 |             parserContext.sourceDocument
32 |         );
33 |     }
34 | }


--------------------------------------------------------------------------------
/src/presets/languages/python/nodes/BooleanNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { PythonSyntaxTreeNode } from "../PythonSyntaxTreeNode";
 3 | import { PythonParserContext } from "../PythonParser";
 4 | import { Document } from "../../../../core/documents/Document";
 5 | 
 6 | export class BooleanNode extends PythonSyntaxTreeNode {
 7 |     static readonly type = "Boolean";
 8 |     readonly type = BooleanNode.type;
 9 | 
10 |     readonly value: boolean;
11 | 
12 |     constructor(
13 |         value: boolean,
14 |         parserNode: any,
15 |         range: Range,
16 |         sourceDocument: Document
17 |     ) {
18 |         super(parserNode, range, sourceDocument);
19 |         this.value = value;
20 |     }
21 | 
22 |     get childNodes(): PythonSyntaxTreeNode[] {
23 |         return [];
24 |     }
25 | 
26 |     static fromNearlyParserResultNode(node: any, parserContext: PythonParserContext): BooleanNode {
27 |         return new BooleanNode(
28 |             node.value,
29 |             node,
30 |             BooleanNode.computeRangeFromParserNode(node, parserContext),
31 |             parserContext.sourceDocument
32 |         );
33 |     }
34 | }


--------------------------------------------------------------------------------
/src/utilities/components/color-pickers/RgbColorPicker.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from "react";
 3 | import { RgbColorPicker as ReactColorfulRgbColorPicker } from "react-colorful";
 4 | import { ColorPickerBaseProps, RgbColor } from "react-colorful/dist/types";
 5 | import { Color } from "../../Color";
 6 | 
 7 | export type RgbColorPickerProps = {
 8 |     color: Color;
 9 |     onChange?: (newColor: Color) => void;
10 |     onDragStart?: () => void;
11 |     onDragEnd?: () => void;
12 | };
13 | 
14 | export class RgbColorPicker extends React.PureComponent<RgbColorPickerProps> {
15 |     private get colorPickerProps(): ColorPickerBaseProps<RgbColor> {
16 |         return {
17 |             className: "color-picker rgb",
18 |             color: this.props.color as RgbColor,
19 |             onChange: newColor => this.props.onChange && this.props.onChange(Color.fromRgb(newColor)),
20 |             onMouseDown: () => this.props.onDragStart && this.props.onDragStart(),
21 |             onMouseUp: () => this.props.onDragEnd && this.props.onDragEnd()
22 |         };
23 |     }
24 |     
25 |     render() {
26 |         return <ReactColorfulRgbColorPicker {...this.colorPickerProps} />;
27 |     }
28 | }


--------------------------------------------------------------------------------
/src/presets/languages/python/nodes/NumberNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { PythonSyntaxTreeNode } from "../PythonSyntaxTreeNode";
 3 | import { PythonParserContext } from "../PythonParser";
 4 | import { Document } from "../../../../core/documents/Document";
 5 | 
 6 | export class NumberNode extends PythonSyntaxTreeNode {
 7 |     static readonly type = "Number";
 8 |     readonly type = NumberNode.type;
 9 | 
10 |     readonly value: number;
11 | 
12 |     constructor(
13 |         value: number,
14 |         parserNode: any,
15 |         range: Range,
16 |         sourceDocument: Document
17 |     ) {
18 |         super(parserNode, range, sourceDocument);
19 |         this.value = value;
20 |     }
21 | 
22 |     get childNodes(): PythonSyntaxTreeNode[] {
23 |         return [];
24 |     }
25 | 
26 |     static fromNearlyParserResultNode(node: any, parserContext: PythonParserContext): NumberNode {
27 |         return new NumberNode(
28 |             Number(node.value.text),
29 |             node,
30 |             NumberNode.computeRangeFromParserNode(node, parserContext),
31 |             parserContext.sourceDocument
32 |         );
33 |     }
34 | }


--------------------------------------------------------------------------------
/src/presets/languages/json/nodes/KeyNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { JsonSyntaxTreeNode } from "../JsonSyntaxTreeNode";
 3 | import { JsonParserContext } from "../JsonParser";
 4 | import { Document } from "../../../../core/documents/Document";
 5 | 
 6 | export class KeyNode extends JsonSyntaxTreeNode {
 7 |     static readonly type = "Key";
 8 |     readonly type = KeyNode.type;
 9 | 
10 |     readonly value: string;
11 | 
12 |     constructor(
13 |         value: string,
14 |         parserNode: any,
15 |         range: Range,
16 |         sourceDocument: Document
17 |     ) {
18 |         super(parserNode, range, sourceDocument);
19 |         this.value = value;
20 |     }
21 | 
22 |     get childNodes(): JsonSyntaxTreeNode[] {
23 |         return [];
24 |     }
25 | 
26 |     static fromNearlyParserResultNode(node: any, parserContext: JsonParserContext): JsonSyntaxTreeNode {
27 |         return new KeyNode(
28 |             node.value.text.slice(1, node.value.text.length - 1),
29 |             node,
30 |             KeyNode.computeRangeFromParserNode(node, parserContext),
31 |             parserContext.sourceDocument
32 |         );
33 |     }
34 | }


--------------------------------------------------------------------------------
/src/utilities/components/color-pickers/RgbaColorPicker.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from "react";
 3 | import { RgbaColorPicker as ReactColorfulRgbaColorPicker } from "react-colorful";
 4 | import { ColorPickerBaseProps, RgbaColor } from "react-colorful/dist/types";
 5 | import { Color } from "../../Color";
 6 | 
 7 | export type RgbColorPickerProps = {
 8 |     color: Color;
 9 |     onChange?: (newColor: Color) => void;
10 |     onDragStart?: () => void;
11 |     onDragEnd?: () => void;
12 | };
13 | 
14 | export class RgbaColorPicker extends React.PureComponent<RgbColorPickerProps> {
15 |     private get colorPickerProps(): ColorPickerBaseProps<RgbaColor> {
16 |         return {
17 |             className: "color-picker rgba",
18 |             color: this.props.color as RgbaColor,
19 |             onChange: newColor => this.props.onChange && this.props.onChange(Color.fromRgba(newColor)),
20 |             onMouseDown: () => this.props.onDragStart && this.props.onDragStart(),
21 |             onMouseUp: () => this.props.onDragEnd && this.props.onDragEnd()
22 |         };
23 |     }
24 |     
25 |     render() {
26 |         return <ReactColorfulRgbaColorPicker {...this.colorPickerProps} />;
27 |     }
28 | }


--------------------------------------------------------------------------------
/src/presets/languages/python/nodes/IdentifierNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { PythonSyntaxTreeNode } from "../PythonSyntaxTreeNode";
 3 | import { PythonParserContext } from "../PythonParser";
 4 | import { Document } from "../../../../core/documents/Document";
 5 | 
 6 | export class IdentifierNode extends PythonSyntaxTreeNode {
 7 |     static readonly type = "Identifier";
 8 |     readonly type = IdentifierNode.type;
 9 | 
10 |     readonly name: string;
11 | 
12 |     constructor(
13 |         name: string,
14 |         parserNode: any,
15 |         range: Range,
16 |         sourceDocument: Document
17 |     ) {
18 |         super(parserNode, range, sourceDocument);
19 |         this.name = name;
20 |     }
21 | 
22 |     get childNodes(): PythonSyntaxTreeNode[] {
23 |         return [];
24 |     }
25 | 
26 |     static fromNearlyParserResultNode(node: any, parserContext: PythonParserContext): IdentifierNode {
27 |         return new IdentifierNode(
28 |             node.name,
29 |             node,
30 |             IdentifierNode.computeRangeFromParserNode(node, parserContext),
31 |             parserContext.sourceDocument
32 |         );
33 |     }
34 | }


--------------------------------------------------------------------------------
/src/presets/languages/json/nodes/StringNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { JsonSyntaxTreeNode } from "../JsonSyntaxTreeNode";
 3 | import { JsonParserContext } from "../JsonParser";
 4 | import { Document } from "../../../../core/documents/Document";
 5 | 
 6 | export class StringNode extends JsonSyntaxTreeNode {
 7 |     static readonly type = "String";
 8 |     readonly type = StringNode.type;
 9 | 
10 |     readonly value: string;
11 | 
12 |     constructor(
13 |         value: string,
14 |         parserNode: any,
15 |         range: Range,
16 |         sourceDocument: Document
17 |     ) {
18 |         super(parserNode, range, sourceDocument);
19 |         this.value = value;
20 |     }
21 | 
22 |     get childNodes(): JsonSyntaxTreeNode[] {
23 |         return [];
24 |     }
25 | 
26 |     static fromNearlyParserResultNode(node: any, parserContext: JsonParserContext): JsonSyntaxTreeNode {
27 |         return new StringNode(
28 |             node.value.text.slice(1, node.value.text.length - 1),
29 |             node,
30 |             StringNode.computeRangeFromParserNode(node, parserContext),
31 |             parserContext.sourceDocument
32 |         );
33 |     }
34 | }


--------------------------------------------------------------------------------
/src/presets/languages/json/JsonSyntaxTreeNode.ts:
--------------------------------------------------------------------------------
 1 | import { Document } from "../../../core/documents/Document";
 2 | import { Range } from "../../../core/documents/Range";
 3 | import { SyntaxTreeNode } from "../../../core/languages/SyntaxTreeNode";
 4 | import { JsonParserContext } from "./JsonParser";
 5 | 
 6 | export abstract class JsonSyntaxTreeNode extends SyntaxTreeNode {
 7 |     readonly range: Range;
 8 |     readonly parserNode: any;
 9 | 
10 |     constructor(parserNode: any, range: Range, sourceDocument: Document) {
11 |         super(sourceDocument);
12 | 
13 |         this.range = range;
14 |         this.parserNode = parserNode;
15 |     }
16 | 
17 |     protected static computeRangeFromParserNode(parserNode: any, parserContext: JsonParserContext): Range {
18 |         const nonNullChildNodes = parserNode.data.filter((childParserNode: any) => !!childParserNode);
19 |         const firstChildNode = nonNullChildNodes[0];
20 |         const lastChildNode = nonNullChildNodes[nonNullChildNodes.length - 1];
21 | 
22 |         return new Range(
23 |             parserContext.offsetToPositionConverter(firstChildNode.offset),
24 |             parserContext.offsetToPositionConverter(lastChildNode.offset + lastChildNode.text.length)
25 |         );
26 |     }
27 | }


--------------------------------------------------------------------------------
/src/presets/languages/python/PythonSyntaxTreeNode.ts:
--------------------------------------------------------------------------------
 1 | import { ClassOf } from "../../../utilities/types";
 2 | import { Document } from "../../../core/documents/Document";
 3 | import { Range } from "../../../core/documents/Range";
 4 | import { SyntaxTreeNode } from "../../../core/languages/SyntaxTreeNode";
 5 | import { PythonParserContext } from "./PythonParser";
 6 | 
 7 | export abstract class PythonSyntaxTreeNode extends SyntaxTreeNode {
 8 |     readonly range: Range;
 9 |     readonly parserNode: any;
10 | 
11 |     constructor(parserNode: any, range: Range, sourceDocument: Document) {
12 |         super(sourceDocument);
13 |         this.range = range;
14 |         this.parserNode = parserNode;
15 |     }
16 | 
17 |     get text(): string {
18 |         return this.parserNode.text;
19 |     }
20 | 
21 |     is<N extends SyntaxTreeNode, T extends ClassOf<N> & {type: string}>(node: T): this is T {
22 |         return this.type === node.type;
23 |     }
24 | 
25 |     protected static computeRangeFromParserNode(parserNode: any, parserContext: PythonParserContext): Range {
26 |         return new Range(
27 |             parserContext.offsetToPositionConverter(parserNode.offset),
28 |             parserContext.offsetToPositionConverter(parserNode.endOffset)
29 |         );
30 |     }
31 | }


--------------------------------------------------------------------------------
/src/core/languages/SyntaxTreeNode.ts:
--------------------------------------------------------------------------------
 1 | import { Document } from "../documents/Document";
 2 | import { Range } from "../documents/Range";
 3 | import { SyntaxTeeeVisitor } from "./SyntaxTreeVisitor";
 4 | 
 5 | export abstract class SyntaxTreeNode<T = any> {
 6 |     readonly sourceDocument: Document;
 7 |     abstract readonly type: string;
 8 |     abstract readonly range: Range;
 9 |     abstract readonly parserNode: T;
10 | 
11 |     constructor(sourceDocument: Document) {
12 |         this.sourceDocument = sourceDocument;
13 |     }
14 | 
15 |     // Note: this method may be overriden to provide text in another way,
16 |     // e.g., by accessing a property of the parser node.
17 |     get text(): string {
18 |         return this.sourceDocument.getContentInRange(this.range);
19 |     }
20 |     
21 |     abstract get childNodes(): SyntaxTreeNode[];
22 | 
23 |     isEmpty(): boolean {
24 |         return this.range.isEmpty();
25 |     }
26 |     
27 |     visitWith<T>(visitor: SyntaxTeeeVisitor<T>, extraData: T): void {
28 |         const skipDescendants = visitor.visitNode(this, extraData);
29 |         if (skipDescendants) {
30 |             return;
31 |         }
32 | 
33 |         for (let node of this.childNodes) {
34 |             node.visitWith(visitor, extraData);
35 |         }
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/table/TableSettings.ts:
--------------------------------------------------------------------------------
 1 | import { UserInterfaceSettings } from "../../../core/user-interfaces/UserInterfaceSettings";
 2 | 
 3 | export interface TableSettings extends UserInterfaceSettings {
 4 |     columns: {
 5 |         canBeInserted: boolean;
 6 |         canBeMoved: boolean;
 7 |         canBeDeleted: boolean;
 8 |         newColumnName: (newColumnIndex: number) => string;
 9 |     };
10 |     rows: {
11 |         canBeInserted: boolean;
12 |         canBeMoved: boolean;
13 |         canBeDeleted: boolean;
14 |         newRowName: (newRowIndex: number) => string;
15 |     };
16 | }
17 | 
18 | export const DEFAULT_TABLE_SETTINGS: TableSettings = {
19 |     columns: {
20 |         canBeInserted: true,
21 |         canBeMoved: true,
22 |         canBeDeleted: true,
23 |         newColumnName: (newColumnIndex: number) => newColumnIndex.toString()
24 |     },
25 |     rows: {
26 |         canBeInserted: true,
27 |         canBeMoved: true,
28 |         canBeDeleted: true,
29 |         newRowName: (newRowIndex: number) => newRowIndex.toString()
30 |     }
31 | };
32 | 
33 | export const deriveTableSettingsFrom = (partialSettings: Partial<TableSettings>): TableSettings => {
34 |     return {
35 |         ...DEFAULT_TABLE_SETTINGS,
36 |         ...partialSettings
37 |     };
38 | };
39 | 


--------------------------------------------------------------------------------
/src/core/user-interfaces/error/UserInterfaceErrorCatcherAndDisplay.tsx:
--------------------------------------------------------------------------------
 1 | import React, { PropsWithChildren } from "react";
 2 | import { UserInterfaceError, UserInterfaceErrorOrigin } from "./UserInterfaceError";
 3 | 
 4 | type Props = PropsWithChildren<{
 5 |     initialError: UserInterfaceError | null;
 6 | }>;
 7 | 
 8 | interface State {
 9 |     error: UserInterfaceError | null;
10 | }
11 | 
12 | export class UserInterfaceErrorCatcherAndDisplay extends React.Component<Props, State> {
13 |     constructor(props: Props) {
14 |         super(props);
15 | 
16 |         this.state = {
17 |             error: props.initialError
18 |         };
19 |     }
20 | 
21 |     setError(error: UserInterfaceError | null): void {
22 |         this.setState({ error: error });
23 |     }
24 | 
25 |     componentDidCatch(error: Error) {
26 |         this.setError(
27 |             new UserInterfaceError(
28 |                 UserInterfaceErrorOrigin.UserInterface,
29 |                 "Exception thrown by the user interface",
30 |                 <div>{ error.message }</div>
31 |             )
32 |         );
33 |     }
34 | 
35 |     render() {
36 |         const errorToDisplay = this.state.error;
37 |         return errorToDisplay
38 |             ? errorToDisplay.createView()
39 |             : this.props.children;
40 |     }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/form/form-elements/helpers/ButtonGroup.tsx:
--------------------------------------------------------------------------------
 1 | import React, { PropsWithChildren, ReactElement } from "react";
 2 | import { ButtonGroup as BlueprintButtonGroup } from "@blueprintjs/core";
 3 | import { AnyEntryTypeSymbol, ANY_ENTRY_TYPES } from "../FormElement";
 4 | import { Label } from "./Label";
 5 | 
 6 | export type ButtonGroupProps = PropsWithChildren<{
 7 |     label?: string;
 8 |     fill?: boolean;
 9 |     vertical?: boolean;
10 | }>;
11 | 
12 | export class ButtonGroup extends React.PureComponent<ButtonGroupProps> {
13 |     protected readonly supportedFormEntryTypes: AnyEntryTypeSymbol = ANY_ENTRY_TYPES;
14 | 
15 |     protected renderGroup(): ReactElement {
16 |         const fill = this.props.fill ?? false;
17 |         const vertical = this.props.vertical ?? false;
18 | 
19 |         return <BlueprintButtonGroup
20 |             className="form-button-group"
21 |             fill={fill}
22 |             vertical={vertical}
23 |         >
24 |             { this.props.children }
25 |         </BlueprintButtonGroup>;
26 |     }
27 | 
28 |     render(): ReactElement | null {
29 |         const label = this.props.label;
30 |         return label
31 |             ? Label.wrapNonEmptyComponentWithLabel(this.renderGroup(), label)
32 |             : this.renderGroup();
33 |     }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/presets/renderers/popover/popover-renderer.css:
--------------------------------------------------------------------------------
 1 | .projection-renderer.popover {
 2 |     position: absolute;
 3 |     /* z-index: 200; */
 4 | }
 5 | 
 6 | .projection-renderer.popover > button.bp5-button,
 7 | .projection-renderer.popover > button.bp5-button:active,
 8 | .projection-renderer.popover > button.bp5-button.bp5-active,
 9 | .projection-renderer.popover > button.bp5-button:hover {
10 |     display: block;
11 |     min-width: auto;
12 |     min-height: auto;
13 |     margin: 0;
14 |     padding: 0 0.5ex;
15 |     background: none;
16 |     border: 1px solid #aaa;
17 |     outline: none;
18 |     box-shadow: none;
19 |     color: #aaa;
20 |     font-family: monospace;
21 |     font-size: 0.9em;
22 | }
23 | 
24 | .projection-renderer.popover > button.bp5-button > span {
25 |     display: inline-block;
26 | }
27 | 
28 | .projection-renderer.popover > button.bp5-button:hover,
29 | .projection-renderer.popover > button.bp5-button:active,
30 | .projection-renderer.popover > button.bp5-button.bp5-active {
31 |     background: #eee;
32 |     border: 1px solid #888;
33 |     color: #666;
34 | }
35 | 
36 | .projection-popover-content-wrapper {
37 |     padding: 10px;
38 |     background-color: #FAFAFA;
39 |     border: 1px solid #CCC;
40 |     box-shadow: 0 0 10px rgba(120, 120, 120, 0.4);
41 |     z-index: 500;
42 | }
43 | 


--------------------------------------------------------------------------------
/src/apps/playground/examples/typescript.ts:
--------------------------------------------------------------------------------
 1 | import { TYPESCRIPT_LANGUAGE } from "../../../presets/languages/typescript/language";
 2 | 
 3 | const text = 
 4 | `const color = new Color(100, 150, 200);
 5 | const color2 = new Color(
 6 |   255, // some comment ruining the regex
 7 |   50,
 8 |   25
 9 | );
10 | 
11 | const re1 = new RegExp("Color\\((\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\)");
12 | const re2 = /^([0-9a-zA-Z]([-.\\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\\w]*[0-9a-zA-Z]\\.)+[a-zA-Z]{2,9})$/;
13 | 
14 | const style = {
15 |   color: "#fedcba"
16 | };
17 | 
18 | const formEntries = {
19 |   a: 123,
20 |   b: "foo",
21 |   c: "bar",
22 |   d: true,
23 |   e: {x: 1, y: 2},
24 |   f: [1, 2, 3], 
25 |   g: data,
26 |   color: "#123456"
27 | };
28 | 
29 | const tsx = (
30 |   <ComponentOne
31 |     propFoo={foo}
32 |     propBar={bar}
33 |   >
34 |     Begin with some text.
35 |     <ComponentTwo />
36 |     <ComponentThree />
37 |     Some text in between...
38 |     <ComponentFour style{{ color: "red" }}>
39 |       <ul>
40 |         <li id="elOne">Element 1</li>
41 |         <li id="elTwo">Element 2</li>
42 |         <li id="elThree">Element 3</li>
43 |       </ul>
44 |     </ComponentFour>
45 |   </ComponentOne>
46 | );
47 | `;
48 | 
49 | export const TYPESCRIPT_EXAMPLE = {
50 |     name: "Typescript",
51 |     language: TYPESCRIPT_LANGUAGE,
52 |     content: text.trim()
53 | };


--------------------------------------------------------------------------------
/src/apps/playground/local-store/LocalStoreManager.ts:
--------------------------------------------------------------------------------
 1 | import { LocalStore } from "./LocalStore";
 2 | 
 3 | export class LocalStoreManager {
 4 |     private static LOCAL_STORAGE_KEY = "lorgnette-store";
 5 |     private storage: Storage;
 6 | 
 7 |     constructor() {
 8 |         if (!window.localStorage) {
 9 |             throw new Error("The local store manager cannot be created: there is no local storage.");
10 |         }
11 | 
12 |         this.storage = window.localStorage;
13 |     }
14 | 
15 |     getStore(): LocalStore | null {
16 |         try {
17 |             const rawStore = this.storage.getItem(LocalStoreManager.LOCAL_STORAGE_KEY);
18 |             if (rawStore === null) {
19 |                 return null;
20 |             }
21 | 
22 |             return JSON.parse(rawStore);
23 |         }
24 |         catch (exception) {
25 |             console.warn("The local store could not be parsed from the local storage:", exception);
26 |             return null;
27 |         }
28 |     }
29 | 
30 |     setStore(store: LocalStore): void {
31 |         try {
32 |             const rawStore = JSON.stringify(store);
33 |             this.storage.setItem(LocalStoreManager.LOCAL_STORAGE_KEY, rawStore);
34 |         }
35 |         catch (exception) {
36 |             console.warn("The local store could not be serialised into JSON:", exception);
37 |         }
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/core/mappings/ProgrammableBackwardMapping.ts:
--------------------------------------------------------------------------------
 1 | import { ProgrammableFunction, ProgrammableFunctionOf, ProgrammableFunctionSource } from "../../utilities/ProgrammableFunction";
 2 | import { Fragment } from "../fragments/Fragment";
 3 | import { UserInterfaceOutput } from "../user-interfaces/UserInterface";
 4 | import { BackwardMapping, BackwardMappingContext, BackwardMappingFunction } from "./BackwardMapping";
 5 | 
 6 | export class ProgrammableBackwardMapping<
 7 |     F extends Fragment = Fragment,
 8 |     O extends UserInterfaceOutput = UserInterfaceOutput
 9 | > implements BackwardMapping<F, O> {
10 |     private programmableFunction: ProgrammableFunctionOf<BackwardMappingFunction<F, O>>;
11 | 
12 |     constructor(source: ProgrammableFunctionSource<BackwardMappingContext<F, O>, void>) {
13 |         this.programmableFunction = new ProgrammableFunction(
14 |             source,
15 |             exception => {
16 |                 console.error("An exception was caught in a programmable backward mapping:", exception);
17 |             }
18 |         );
19 |     }
20 | 
21 |     apply(context: BackwardMappingContext<F>): void {
22 |         try {
23 |             this.programmableFunction.call(context);
24 |         }
25 |         catch {
26 |             // In case a programmable backward mapping throws, do nothing.
27 |             return;
28 |         }
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/presets/languages/json/nodes/ObjectNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { JsonSyntaxTreeNode } from "../JsonSyntaxTreeNode";
 3 | import { JsonParserContext } from "../JsonParser";
 4 | import { PropertyNode } from "./PropertyNode";
 5 | import { convertParserNode } from "../JsonSyntaxTree";
 6 | import { Document } from "../../../../core/documents/Document";
 7 | 
 8 | export class ObjectNode extends JsonSyntaxTreeNode {
 9 |     static readonly type = "Object";
10 |     readonly type = ObjectNode.type;
11 | 
12 |     readonly properties: PropertyNode[];
13 | 
14 |     constructor(
15 |         properties: PropertyNode[],
16 |         parserNode: any,
17 |         range: Range,
18 |         sourceDocument: Document
19 |     ) {
20 |         super(parserNode, range, sourceDocument);
21 |         this.properties = properties;
22 |     }
23 | 
24 |     get childNodes(): JsonSyntaxTreeNode[] {
25 |         return [...this.properties];
26 |     }
27 | 
28 |     static fromNearlyParserResultNode(node: any, parserContext: JsonParserContext): JsonSyntaxTreeNode {
29 |         return new ObjectNode(
30 |             node.properties.map((n: any) => convertParserNode(n, parserContext)),
31 |             node,
32 |             ObjectNode.computeRangeFromParserNode(node, parserContext),
33 |             parserContext.sourceDocument
34 |         );
35 |     }
36 | }


--------------------------------------------------------------------------------
/src/presets/languages/python/nodes/PositionalArgumentNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { PythonSyntaxTreeNode } from "../PythonSyntaxTreeNode";
 3 | import { PythonParserContext } from "../PythonParser";
 4 | import { ExpressionNode } from "./ExpressionNode";
 5 | import { Document } from "../../../../core/documents/Document";
 6 | 
 7 | export class PositionalArgumentNode extends PythonSyntaxTreeNode {
 8 |     static readonly type = "PositionalArgument";
 9 |     readonly type = PositionalArgumentNode.type;
10 | 
11 |     readonly value: ExpressionNode;
12 | 
13 |     constructor(
14 |         value: ExpressionNode,
15 |         parserNode: any,
16 |         range: Range,
17 |         sourceDocument: Document
18 |     ) {
19 |         super(parserNode, range, sourceDocument);
20 |         this.value = value;
21 |     }
22 | 
23 |     get childNodes(): PythonSyntaxTreeNode[] {
24 |         return [this.value];
25 |     }
26 | 
27 |     static fromNearlyParserResultNode(node: any, parserContext: PythonParserContext): PositionalArgumentNode {
28 |         return new PositionalArgumentNode(
29 |             ExpressionNode.fromNearlyParserResultNode(node.value, parserContext),
30 |             node,
31 |             PositionalArgumentNode.computeRangeFromParserNode(node, parserContext),
32 |             parserContext.sourceDocument
33 |         );
34 |     }
35 | }


--------------------------------------------------------------------------------
/src/core/documents/DocumentRange.ts:
--------------------------------------------------------------------------------
 1 | import { Document } from "./Document";
 2 | import { Position } from "./Position";
 3 | import { Range } from "./Range";
 4 | 
 5 | export class DocumentRange extends Range {
 6 |     readonly document: Document;
 7 | 
 8 |     constructor(document: Document, start: Position, end: Position) {
 9 |         super(start, end);
10 |         this.document = document;
11 |     }
12 | 
13 |     relativeTo(origin: Position): DocumentRange {
14 |         return new DocumentRange(
15 |             this.document,
16 |             this.start.relativeTo(origin),
17 |             this.end.relativeTo(origin)
18 |         );
19 |     }
20 | 
21 |     static fromSinglePositionInDocument(document: Document, position: Position): DocumentRange {
22 |         return new DocumentRange(document, position, position);
23 |     }
24 | 
25 |     static fromOffsetsInDocument(document: Document, startOffset: number, endOffset: number): DocumentRange {
26 |         const convertOffsetToPosition = Position.getOffsetToPositionConverterForText(document.content);
27 |         
28 |         return new DocumentRange(
29 |             document,
30 |             convertOffsetToPosition(startOffset),
31 |             convertOffsetToPosition(endOffset)
32 |         );
33 |     }
34 | 
35 |     static fromRange(range: Range, document: Document): DocumentRange {
36 |         return new DocumentRange(document, range.start, range.end);
37 |     }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/presets/languages/python/nodes/ProgramNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { PythonSyntaxTreeNode } from "../PythonSyntaxTreeNode";
 3 | import { PythonParserContext } from "../PythonParser";
 4 | import { convertParserNode } from "../PythonSyntaxTree";
 5 | import { ExpressionNode } from "./ExpressionNode";
 6 | import { Document } from "../../../../core/documents/Document";
 7 | 
 8 | export type InstructionNode =
 9 |     | ExpressionNode;
10 | 
11 | export class ProgramNode extends PythonSyntaxTreeNode {
12 |     static readonly type = "Program";
13 |     readonly type = ProgramNode.type;
14 | 
15 |     readonly instructions: InstructionNode[];
16 | 
17 |     constructor(
18 |         instructions: InstructionNode[],
19 |         parserNode: any,
20 |         range: Range,
21 |         sourceDocument: Document
22 |     ) {
23 |         super(parserNode, range, sourceDocument);
24 |         this.instructions = instructions;
25 |     }
26 | 
27 |     get childNodes(): PythonSyntaxTreeNode[] {
28 |         return [...this.instructions];
29 |     }
30 | 
31 |     static fromNearlyParserResultNode(node: any, parserContext: PythonParserContext): ProgramNode {
32 |         return new ProgramNode(
33 |             node.instructions.map((n: any) => convertParserNode(n, parserContext)),
34 |             node,
35 |             ProgramNode.computeRangeFromParserNode(node, parserContext),
36 |             parserContext.sourceDocument
37 |         );
38 |     }
39 | }


--------------------------------------------------------------------------------
/src/core/templates/TemplateSlot.ts:
--------------------------------------------------------------------------------
 1 | import { Document } from "../documents/Document";
 2 | import { DocumentEditor } from "../documents/DocumentEditor";
 3 | import { Range } from "../documents/Range";
 4 | import { EvaluatorValue, Evaluator } from "./evaluators/Evaluator";
 5 | import { TextualEvaluator } from "./evaluators/textual/TextualEvaluator";
 6 | 
 7 | export type TemplateSlotKey = string;
 8 | 
 9 | export interface TemplateSlotSpecification {
10 |     key: TemplateSlotKey;
11 |     evaluator: Evaluator;
12 | }
13 | 
14 | export abstract class TemplateSlot {
15 |     readonly sourceDocument: Document;
16 |     readonly key: TemplateSlotKey;
17 |     protected evaluator: Evaluator;
18 |     abstract readonly range: Range;
19 | 
20 |     constructor(
21 |         sourceDocument: Document,
22 |         key: TemplateSlotKey,
23 |         evaluator?: Evaluator
24 |     ) {
25 |         this.sourceDocument = sourceDocument;
26 |         this.key = key;
27 |         this.evaluator = evaluator ?? new TextualEvaluator();
28 |     }
29 |     
30 |     abstract getText(): string;
31 | 
32 |     setText(text: string, documentEditor: DocumentEditor): void {
33 |         documentEditor.replace(this.range, text);
34 |     }
35 | 
36 |     getValue(): EvaluatorValue {
37 |         return this.evaluator.getValueFromSlot(this);
38 |     }
39 | 
40 |     setValue(newValue: EvaluatorValue, documentEditor: DocumentEditor) {
41 |         this.evaluator.setValueInSlot(this, newValue, documentEditor);
42 |     }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/apps/playground/examples/vega.ts:
--------------------------------------------------------------------------------
 1 | import { JSON_LANGUAGE } from "../../../presets/languages/json/language";
 2 | 
 3 | // From https://vega.github.io/vega-lite/examples/layer_line_rolling_mean_point_raw.html
 4 | const text = 
 5 | `
 6 | {
 7 |     "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
 8 |     "description": "Plot showing a 30 day rolling average with raw values in the background.",
 9 |     "width": 400,
10 |     "height": 300,
11 |     "data": {"url": "data/seattle-weather.csv"},
12 |     "transform": [{
13 |       "window": [
14 |         {
15 |           "field": "temp_max",
16 |           "op": "mean",
17 |           "as": "rolling_mean"
18 |         }
19 |       ],
20 |       "frame": [-15, 15]
21 |     }],
22 |     "encoding": {
23 |       "x": {"field": "date", "type": "temporal", "title": "Date"},
24 |       "y": {"type": "quantitative", "axis": {"title": "Max Temperature and Rolling Mean"}}
25 |     },
26 |     "layer": [
27 |       {
28 |         "mark": {"type": "point", "opacity": 0.3},
29 |         "encoding": {
30 |           "y": {"field": "temp_max", "title": "Max Temperature"}
31 |         }
32 |       },
33 |       {
34 |         "mark": {"type": "line", "color": "red", "size": 3},
35 |         "encoding": {
36 |           "y": {"field": "rolling_mean", "title": "Rolling Mean of Max Temperature"}
37 |         }
38 |       }
39 |     ]
40 |   }
41 | `;
42 | 
43 | export const VEGA_EXAMPLE = {
44 |     name: "Vega",
45 |     language: JSON_LANGUAGE,
46 |     content: text.trim()
47 | };


--------------------------------------------------------------------------------
/src/presets/user-interfaces/style-inspector/inspectors/BackgroundInspector.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactElement } from "react";
 2 | import { Color } from "../../../../utilities/Color";
 3 | import { ButtonColorPicker } from "../../../../utilities/components/color-pickers/ButtonColorPicker";
 4 | import { SpecialisedStyleInspector, SpecialisedStyleInspectorProperties } from "./SpecialisedStyleInspector";
 5 | 
 6 | export type BackgroundProperties = SpecialisedStyleInspectorProperties<{
 7 |     color?: Color;
 8 | }>;
 9 | 
10 | export class BackgroundInspector extends SpecialisedStyleInspector<BackgroundProperties> {
11 |     protected readonly title = "Background";
12 |     protected readonly className = "background";
13 | 
14 |     private renderColorEditor(): ReactElement | null {
15 |         return this.renderProperty({
16 |             propertyName: "color",
17 |             formGroup: { label: "Color", className: "color" },
18 |             renderer: (propertyValue, isDisabled) =>
19 |                 <ButtonColorPicker
20 |                     color={propertyValue}
21 |                     disabled={isDisabled}
22 |                     onDragStart={() => this.startTransientChange()}
23 |                     onDragEnd={() => this.endTransientChange()}
24 |                     onChange={newColor => this.changeProperties({ color: newColor })}
25 |                 />
26 |         });
27 |     }
28 | 
29 |     protected renderEditor(): ReactElement {
30 |         return <>
31 |             {this.renderColorEditor()}
32 |         </>;
33 |     }
34 | }


--------------------------------------------------------------------------------
/src/presets/languages/python/nodes/NamedArgumentNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { PythonSyntaxTreeNode } from "../PythonSyntaxTreeNode";
 3 | import { PythonParserContext } from "../PythonParser";
 4 | import { ExpressionNode } from "./ExpressionNode";
 5 | import { IdentifierNode } from "./IdentifierNode";
 6 | import { Document } from "../../../../core/documents/Document";
 7 | 
 8 | export class NamedArgumentNode extends PythonSyntaxTreeNode {
 9 |     static readonly type = "NamedArgument";
10 |     readonly type = NamedArgumentNode.type;
11 | 
12 |     readonly name: IdentifierNode;
13 |     readonly value: ExpressionNode;
14 | 
15 |     constructor(
16 |         name: IdentifierNode,
17 |         value: ExpressionNode,
18 |         parserNode: any,
19 |         range: Range,
20 |         sourceDocument: Document
21 |     ) {
22 |         super(parserNode, range, sourceDocument);
23 |         this.name = name;
24 |         this.value = value;
25 |     }
26 | 
27 |     get childNodes(): PythonSyntaxTreeNode[] {
28 |         return [this.value];
29 |     }
30 | 
31 |     static fromNearlyParserResultNode(node: any, parserContext: PythonParserContext): NamedArgumentNode {
32 |         return new NamedArgumentNode(
33 |             node.name,
34 |             ExpressionNode.fromNearlyParserResultNode(node.value, parserContext),
35 |             node,
36 |             NamedArgumentNode.computeRangeFromParserNode(node, parserContext),
37 |             parserContext.sourceDocument
38 |         );
39 |     }
40 | }


--------------------------------------------------------------------------------
/src/presets/user-interfaces/form/FormEntry.ts:
--------------------------------------------------------------------------------
 1 | import { Color } from "../../../utilities/Color";
 2 | 
 3 | export type FormEntryKey = string | number;
 4 | 
 5 | export const enum FormEntryType {
 6 |     Boolean = "Boolean",
 7 |     Number = "Number",
 8 |     String = "String",
 9 |     Color = "Color"
10 | }
11 | 
12 | export type FormEntry =
13 |     {
14 |         type: FormEntryType.Boolean,
15 |         key: FormEntryKey,
16 |         value: boolean
17 |     } | {
18 |         type: FormEntryType.Number,
19 |         key: FormEntryKey,
20 |         value: number
21 |     } | {
22 |         type: FormEntryType.String,
23 |         key: FormEntryKey,
24 |         value: string
25 |     } | {
26 |         type: FormEntryType.Color,
27 |         key: FormEntryKey,
28 |         value: Color
29 |     };
30 | 
31 | // Utility type used to implement other types.
32 | // It maps a form entry type (from the enumeration above) to the related form entry.
33 | type FormEntryTypesToFormEntries = { [K in FormEntryType]: Extract<FormEntry, { type: K }> };
34 | 
35 | export type FormEntryOfType<T extends FormEntryType> = FormEntryTypesToFormEntries[T];
36 | export type FormEntryValueOfType<T extends FormEntryType> = FormEntryOfType<T>["value"];
37 | export type FormEntryValue = FormEntryValueOfType<FormEntryType>;
38 | 
39 | export function formEntryHasType<T extends FormEntryType>(
40 |     formEntry: FormEntry,
41 |     acceptedTypes: T[]
42 | ): formEntry is FormEntryOfType<T> {
43 |     return (acceptedTypes as FormEntryType[]).includes(formEntry.type);
44 | }


--------------------------------------------------------------------------------
/src/utilities/ArrayMap.ts:
--------------------------------------------------------------------------------
 1 | export class ArrayMap<K, V> {
 2 |     private readonly map: Map<K, V[]>;
 3 | 
 4 |     constructor(initialEntries: Iterable<[K, V[]]> = []) {
 5 |         this.map = new Map(initialEntries);
 6 |     }
 7 | 
 8 |     get keys(): IterableIterator<K> {
 9 |         return this.map.keys();
10 |     }
11 | 
12 |     get values(): IterableIterator<V> {
13 |         const map = this.map;
14 |         return (function*() {
15 |             for (let array of map.values()) {
16 |                 for (let value of array) {
17 |                     yield value;
18 |                 }
19 |             }
20 |         })();
21 |     }
22 | 
23 |     get entries(): IterableIterator<[K, V[]]> {
24 |         return this.map.entries();
25 |     }
26 | 
27 |     hasKey(key: K): boolean {
28 |         return this.map.has(key);
29 |     }
30 | 
31 |     add(key: K, ...values: V[]): void {
32 |         if (!this.hasKey(key)) {
33 |             this.map.set(key, []);
34 |         }
35 | 
36 |         const currentValues = this.map.get(key);
37 |         currentValues!.push(...values);
38 |     }
39 | 
40 |     getValuesOf(key: K): V[] {
41 |         if (!this.hasKey(key)) {
42 |             return [];
43 |         }
44 | 
45 |         return this.map.get(key)!;
46 |     }
47 | 
48 |     clone(): ArrayMap<K, V> {
49 |         return new ArrayMap(
50 |             [...this.map.entries()]
51 |                 .map(([key, values]) => [key, [...values]])
52 |         );
53 |     }
54 | 
55 |     clear(): void {
56 |         this.map.clear();
57 |     }
58 | }


--------------------------------------------------------------------------------
/src/presets/user-interfaces/form/form-elements/Switch.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactElement } from "react";
 2 | import { Switch as BlueprintSwitch } from "@blueprintjs/core";
 3 | import { FormEntryType, FormEntryValueOfType } from "../FormEntry";
 4 | import { FormElement, FormElementProps, FormElementValueChangeListener } from "./FormElement";
 5 | 
 6 | type SupportedEntryTypes = FormEntryType.Boolean;
 7 | 
 8 | export interface SwitchProps extends FormElementProps<SupportedEntryTypes> {
 9 |     defaultValue?: boolean;
10 | }
11 | 
12 | export class Switch extends FormElement<SupportedEntryTypes, SwitchProps> {
13 |     protected readonly supportedFormEntryTypes = [FormEntryType.Boolean] as SupportedEntryTypes[];
14 | 
15 |     protected renderControlWithoutValue(
16 |         declareValueChange: FormElementValueChangeListener<SupportedEntryTypes>
17 |     ): ReactElement | null {
18 |         const defaultValue = this.props.defaultValue;
19 |         return defaultValue !== undefined
20 |             ? this.renderControl(defaultValue, declareValueChange)
21 |             : null;
22 |     }
23 | 
24 |     protected renderControl(
25 |         value: FormEntryValueOfType<SupportedEntryTypes>,
26 |         declareValueChange: FormElementValueChangeListener<SupportedEntryTypes>
27 |     ): ReactElement {
28 |         return <BlueprintSwitch
29 |             defaultChecked={value}
30 |             style={this.props.style}
31 |             onChange={() => declareValueChange(!value, this.supportedFormEntryTypes[0])}
32 |             inline={true}
33 |         />;
34 |     }
35 | }


--------------------------------------------------------------------------------
/src/core/projections/ProjectionSpecification.ts:
--------------------------------------------------------------------------------
 1 | import { Fragment } from "../fragments/Fragment";
 2 | import { FragmentProvider } from "../fragments/FragmentProvider";
 3 | import { BackwardMapping } from "../mappings/BackwardMapping";
 4 | import { ForwardMapping } from "../mappings/ForwardMapping";
 5 | import { RendererProvider } from "../renderers/RendererProvider";
 6 | import { RendererSettings } from "../renderers/RendererSettings";
 7 | import { RuntimeRequestProvider } from "../runtime/request-providers/RuntimeRequestProvider";
 8 | import { UserInterfaceProvider } from "../user-interfaces/UserInterfaceProvider";
 9 | import { UserInterfaceSettings } from "../user-interfaces/UserInterfaceSettings";
10 | import { ProjectionRequirements } from "./ProjectionRequirements";
11 | 
12 | export interface ProjectionSpecification<F extends Fragment = Fragment> {
13 |     name: string;
14 |     requirements: ProjectionRequirements;
15 |     pattern: FragmentProvider<F>,
16 |     runtimeRequest?: RuntimeRequestProvider<F>,
17 |     forwardMapping: ForwardMapping<F>;
18 |     backwardMapping?: BackwardMapping<F>;
19 |     userInterface: UserInterfaceSpecification;
20 |     renderer: RendererSpecification;
21 | }
22 | 
23 | export type UserInterfaceSpecification =
24 |     string |
25 |     UserInterfaceProvider |
26 |     {
27 |         name: string;
28 |         settings: UserInterfaceSettings;
29 |     };
30 | 
31 | export type RendererSpecification =
32 |     string |
33 |     RendererProvider |
34 |     {
35 |         name: string;
36 |         settings: RendererSettings;
37 |     };
38 | 


--------------------------------------------------------------------------------
/src/presets/projections/hexadecimal-color-picker.ts:
--------------------------------------------------------------------------------
 1 | import { SideRendererPosition } from "../renderers/side/SideRendererSettings";
 2 | import { RegexPatternTemplate } from "../../core/templates/textual/RegexPatternTemplate";
 3 | import { NumericEvaluator } from "../../core/templates/evaluators/numeric/NumericEvaluator";
 4 | import { ProjectionSpecification } from "../../core/projections/ProjectionSpecification";
 5 | import { TextualFragment } from "../../core/fragments/textual/TextualFragment";
 6 | 
 7 | const hexadecimalValuator = new NumericEvaluator({
 8 |     isIntegerValue: true,
 9 |     integerBase: 16
10 | });
11 | 
12 | const hexadecimalColorTemplate = new RegexPatternTemplate(
13 |     "#(?<r>[a-fA-F0-9]{2})(?<g>[a-fA-F0-9]{2})(?<b>[a-fA-F0-9]{2})",
14 |     {
15 |         "r": hexadecimalValuator,
16 |         "g": hexadecimalValuator,
17 |         "b": hexadecimalValuator
18 |     },
19 |     {
20 |         transformTemplateData: data => { return { color: data }; },
21 |         transformUserInterfaceOutput: output => { return { ...output.color }; }
22 |     }
23 | );
24 | 
25 | export const hexadecimalColorPickerSpecification: ProjectionSpecification<TextualFragment> = {
26 |     ...hexadecimalColorTemplate.resourcesAndMappings,
27 | 
28 |     name: "Hexadecimal colour picker",
29 | 
30 |     requirements: {},
31 | 
32 |     userInterface: "color-picker",
33 | 
34 |     renderer: {
35 |         name: "side",
36 |         settings: {
37 |             onlyShowWhenCursorIsInRange: true,
38 |             position: SideRendererPosition.RightSideOfEditor
39 |         }
40 |     }
41 | };
42 | 


--------------------------------------------------------------------------------
/.github/workflows/build-and-publish-playground.yml:
--------------------------------------------------------------------------------
 1 | name: build-and-publish-playground
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ master ]
 6 |   pull_request:
 7 |     branches: [ master ]
 8 | 
 9 |   # This key is required to enable manual triggers of this workflow.
10 |   workflow_dispatch:
11 | 
12 | jobs:
13 |   build-update-deploy-extension:
14 |     runs-on: ubuntu-latest
15 |     steps:
16 | 
17 |     - name: Checkout the source code from the repository
18 |       uses: actions/checkout@v3
19 | 
20 |     - name: Setup the development environement
21 |       uses: actions/setup-node@v3
22 |       with:
23 |         node-version: "21"
24 | 
25 |     - name: Install all the dependencies
26 |       run: yarn
27 | 
28 |     - name: Build the playground
29 |       run: yarn run build
30 | 
31 |     # Note: the 'git rm -rf .' command is required because we are pushing to an orphan branch.
32 |     # If the command is not used, all the files from the 'master' branch are staged and pushed.
33 |     - name: Commit files to the CI branch
34 |       run: |
35 |         mv ./src/apps/playground/build ./playground
36 |         git config --local user.name "github-action"
37 |         git config --local user.email "<>"
38 |         git add -f ./playground
39 |         git commit -m "Update the playground"
40 |         git rm -rf .
41 |         git checkout HEAD -- ./playground
42 |     
43 |     - name: Push the commit to the CI branch
44 |       uses: ad-m/github-push-action@master
45 |       with:
46 |         github_token: ${{ secrets.GITHUB_TOKEN }}
47 |         branch: "lorgnette-ci"
48 |         force: true


--------------------------------------------------------------------------------
/src/core/runtime/request-providers/ProgrammableRuntimeRequestProvider.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import { ProgrammableFunction } from "../../../utilities/ProgrammableFunction";
 3 | import { Fragment } from "../../fragments/Fragment";
 4 | import { RuntimeRequest } from "../RuntimeRequest";
 5 | import { RuntimeRequestContext, RuntimeRequestProvider } from "./RuntimeRequestProvider";
 6 | 
 7 | export type ProgrammableRuntimeRequestProviderFunction<F extends Fragment = Fragment> =
 8 |     (context: RuntimeRequestContext<F>) => RuntimeRequest[];
 9 | 
10 | export class ProgrammableRuntimeRequestProvider<
11 |     F extends Fragment = Fragment
12 | > implements RuntimeRequestProvider {
13 |     private programmableFunction: ProgrammableFunction<
14 |         Parameters<ProgrammableRuntimeRequestProviderFunction<F>>[0],
15 |         ReturnType<ProgrammableRuntimeRequestProviderFunction<F>>
16 |     >;
17 | 
18 |     constructor(functionBodyOrRef: string | ProgrammableRuntimeRequestProviderFunction<F>) {
19 |         this.programmableFunction = new ProgrammableFunction(
20 |             functionBodyOrRef,
21 |             exception => {
22 |                 console.error("An exception was caught in a programmable runtime request provider:", exception);
23 |             }
24 |         );
25 |     }
26 | 
27 |     provideRuntimeRequests(context: RuntimeRequestContext<F>): RuntimeRequest[] {
28 |         try {
29 |             return this.programmableFunction.call({
30 |                 document: context.document,
31 |                 fragment: context.fragment
32 |             });
33 |         }
34 |         catch (error) {
35 |             return [];
36 |         }
37 |     }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/core/code-editor/DecoratedRange.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../documents/Range";
 2 | import { Projection } from "../projections/Projection";
 3 | 
 4 | export type DecoratedRangeId = number;
 5 | 
 6 | export const enum DecoratedRangeType {
 7 |     Fragment = "fragment",
 8 |     ActiveFragment = "fragment active",
 9 |     Highlighted = "highlighted"
10 | }
11 | 
12 | export class DecoratedRange {
13 |     static readonly className: string = "decorated-range";
14 | 
15 |     readonly range: Range;
16 |     readonly type: DecoratedRangeType;
17 |     readonly id?: DecoratedRangeId;
18 | 
19 |     constructor(range: Range, type: DecoratedRangeType, id?: DecoratedRangeId) {
20 |         this.range = range;
21 |         this.type = type;
22 |         this.id = id;
23 |     }
24 | 
25 |     get className(): string {
26 |         const idClassName = this.id !== undefined ? DecoratedRange.classNameForId(this.id) : "";
27 |         return `${DecoratedRange.className} ${this.type} ${idClassName}`;
28 |     }
29 | 
30 |     static classNameForId(id: DecoratedRangeId): string {
31 |         return `id-${id}`;
32 |     }
33 | 
34 |     static fromHighlightedRange(range: Range): DecoratedRange {
35 |         return new DecoratedRange(
36 |             range,
37 |             DecoratedRangeType.Highlighted
38 |         );
39 |     }
40 | 
41 |     static fromProjection(projection: Projection, isActive: boolean = false): DecoratedRange {
42 |         return new DecoratedRange(
43 |             projection.fragment.range,
44 |             isActive ? DecoratedRangeType.ActiveFragment : DecoratedRangeType.Fragment,
45 |             projection.uid
46 |         );
47 |     }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/presets/renderers/popup/popup-renderer.css:
--------------------------------------------------------------------------------
 1 | .projection-renderer.popup {
 2 |     position: absolute;
 3 |     /* z-index: 200; */
 4 | }
 5 | 
 6 | .projection-renderer.popup > button.bp5-button,
 7 | .projection-renderer.popup > button.bp5-button:active,
 8 | .projection-renderer.popup > button.bp5-button.bp5-active,
 9 | .projection-renderer.popup > button.bp5-button:hover {
10 |     display: block;
11 |     min-width: auto;
12 |     min-height: auto;
13 |     margin: 0;
14 |     padding: 0 0.5ex;
15 |     background: none;
16 |     border: 1px solid #aaa;
17 |     outline: none;
18 |     box-shadow: none;
19 |     color: #aaa;
20 |     font-family: monospace;
21 |     font-size: 0.9em;
22 | }
23 | 
24 | .projection-renderer.popup > button.bp5-button > span {
25 |     display: inline-block;
26 | }
27 | 
28 | .projection-renderer.popup > button.bp5-button:hover,
29 | .projection-renderer.popup > button.bp5-button:active,
30 | .projection-renderer.popup > button.bp5-button.bp5-active {
31 |     background: #eee;
32 |     border: 1px solid #888;
33 |     color: #666;
34 | }
35 | 
36 | .projection-popup-content-wrapper {
37 |     display: flex;
38 |     align-items: center;
39 |     justify-content: center;
40 |     width: 100%;
41 |     height: 100%;
42 |     z-index: 800;
43 | }
44 | 
45 | .projection-popup-content-panel {
46 |     max-width: calc(100vw - 50px);
47 |     max-height: calc(100vh - 50px);
48 |     padding: 2em;
49 |     overflow: auto;
50 |     background-color: #eee;
51 |     border: 2px solid #ccc;
52 |     box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
53 |     z-index: 1000;
54 | }
55 | 
56 | .projection-popup-content-panel * {
57 |     z-index: 1000;
58 | }


--------------------------------------------------------------------------------
/src/presets/languages/typescript/TypescriptParser.ts:
--------------------------------------------------------------------------------
 1 | import { Parser } from "../../../core/languages/Parser";
 2 | import { Project } from "ts-morph";
 3 | import { Position } from "../../../core/documents/Position";
 4 | import { TypescriptSyntaxTree } from "./TypescriptSyntaxTree";
 5 | import { TypescriptSyntaxTreeNode } from "./TypescriptSyntaxTreeNode";
 6 | import { Document } from "../../../core/documents/Document";
 7 | 
 8 | export interface TypescriptParserContext {
 9 |     text: string;
10 |     sourceDocument: Document;
11 |     offsetToPositionConverter: (offset: number) => Position;
12 | }
13 | 
14 | export class TypescriptParser implements Parser {
15 |     private project: Project;
16 | 
17 |     constructor() {
18 |         this.project = new Project({
19 |             useInMemoryFileSystem: true
20 |         });
21 |     }
22 | 
23 |     async parse(document: Document): Promise<TypescriptSyntaxTree> {
24 |         const text = document.content;
25 |         const sourceFile = this.project.createSourceFile(
26 |             "code-in-editor.tsx",
27 |             text,
28 |             { overwrite: true }
29 |         );
30 | 
31 |         const parserContext: TypescriptParserContext = {
32 |             text: text,
33 |             sourceDocument: document,
34 |             offsetToPositionConverter: Position.getOffsetToPositionConverterForText(text)
35 |         };
36 | 
37 |         const childNodes = sourceFile.compilerNode.getChildren();
38 |         const root = TypescriptSyntaxTreeNode.fromTsMorphNode(
39 |             childNodes[0],
40 |             parserContext
41 |         );
42 | 
43 |         return new TypescriptSyntaxTree(root);
44 |     }
45 | }


--------------------------------------------------------------------------------
/src/presets/renderers/popup/ButtonPopupRenderer.tsx:
--------------------------------------------------------------------------------
 1 | import "./popup-renderer.css";
 2 | import React, { ReactElement } from "react";
 3 | import { Button } from "@blueprintjs/core";
 4 | import { PopupRenderer } from "./PopupRenderer";
 5 | import { ConfigurableRendererProvider } from "../../../core/renderers/RendererProvider";
 6 | import { ButtonPopupRendererSettings, DEFAULT_BUTTON_POPUP_RENDERER_SETTINGS, deriveButtonPopupRendererSettingsFrom } from "./ButtonPopupRendererSettings";
 7 | import { RendererProps } from "../../../core/renderers/Renderer";
 8 | 
 9 | 
10 | export class ButtonPopupRenderer extends PopupRenderer {
11 |     readonly className: string = "popup button-popup";
12 |     protected settings: ButtonPopupRendererSettings;
13 | 
14 |     constructor(props: RendererProps) {
15 |         super(props);
16 |         this.settings = DEFAULT_BUTTON_POPUP_RENDERER_SETTINGS;
17 |     }
18 | 
19 |     protected renderPopupToggle(): ReactElement {
20 |         return <Button
21 |             {...this.settings.buttonProps}
22 |             onClick={() => {
23 |                 this.setState({ isPopupOpen: !this.state.isPopupOpen });
24 |             }}
25 |         >
26 |             {this.settings.buttonContent}
27 |         </Button>;
28 |     }
29 | 
30 |     static makeConfigurableProvider(): ConfigurableRendererProvider {
31 |         return (settings: Partial<ButtonPopupRendererSettings> = {}) => {
32 |             return {
33 |                 provide: () => class extends ButtonPopupRenderer {
34 |                     protected settings = deriveButtonPopupRendererSettingsFrom(settings);
35 |                 }
36 |             };
37 |         };
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/presets/languages/json/nodes/ArrayNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { JsonSyntaxTreeNode } from "../JsonSyntaxTreeNode";
 3 | import { JsonParserContext } from "../JsonParser";
 4 | import { ObjectNode } from "./ObjectNode";
 5 | import { BooleanNode } from "./BooleanNode";
 6 | import { NullNode } from "./NullNode";
 7 | import { NumberNode } from "./NumberNode";
 8 | import { StringNode } from "./StringNode";
 9 | import { convertParserNode } from "../JsonSyntaxTree";
10 | import { Document } from "../../../../core/documents/Document";
11 | 
12 | export type ValueNode =
13 |     | ObjectNode
14 |     | ArrayNode
15 |     | StringNode
16 |     | NumberNode
17 |     | BooleanNode
18 |     | NullNode;
19 | 
20 | export class ArrayNode extends JsonSyntaxTreeNode {
21 |     static readonly type = "Array";
22 |     readonly type = ArrayNode.type;
23 | 
24 |     readonly values: ValueNode[];
25 | 
26 |     constructor(
27 |         values: ValueNode[],
28 |         parserNode: any,
29 |         range: Range,
30 |         sourceDocument: Document
31 |     ) {
32 |         super(parserNode, range, sourceDocument);
33 |         this.values = values;
34 |     }
35 | 
36 |     get childNodes(): JsonSyntaxTreeNode[] {
37 |         return [...this.values];
38 |     }
39 | 
40 |     static fromNearlyParserResultNode(node: any, parserContext: JsonParserContext): JsonSyntaxTreeNode {
41 |         return new ArrayNode(
42 |             node.values.map((n: any) => convertParserNode(n, parserContext)),
43 |             node,
44 |             ArrayNode.computeRangeFromParserNode(node, parserContext),
45 |             parserContext.sourceDocument
46 |         );
47 |     }
48 | }


--------------------------------------------------------------------------------
/src/presets/languages/json/JsonSyntaxTree.ts:
--------------------------------------------------------------------------------
 1 | import { SyntaxTree } from "../../../core/languages/SyntaxTree";
 2 | import { JsonSyntaxTreeNode } from "./JsonSyntaxTreeNode";
 3 | import { JsonParserContext } from "./JsonParser";
 4 | import { ObjectNode } from "./nodes/ObjectNode";
 5 | import { PropertyNode } from "./nodes/PropertyNode";
 6 | import { ArrayNode } from "./nodes/ArrayNode";
 7 | import { StringNode } from "./nodes/StringNode";
 8 | import { NumberNode } from "./nodes/NumberNode";
 9 | import { BooleanNode } from "./nodes/BooleanNode";
10 | import { NullNode } from "./nodes/NullNode";
11 | import { KeyNode } from "./nodes/KeyNode";
12 | 
13 | export function convertParserNode(
14 |     parserNode: any,
15 |     parserContext: JsonParserContext
16 | ): JsonSyntaxTreeNode {
17 |     const nodeClasses = [
18 |         ObjectNode,
19 |         PropertyNode,
20 |         KeyNode,
21 |         ArrayNode,
22 |         StringNode,
23 |         NumberNode,
24 |         BooleanNode,
25 |         NullNode
26 |     ];
27 | 
28 |     const parserNodeType = parserNode.type;
29 |     const nodeClass = nodeClasses.find(nodeClass => nodeClass.type === parserNodeType);
30 |     if (!nodeClass) {
31 |         throw new Error(`Unknown JSON syntax tree node type: ${parserNodeType}`);
32 |     }
33 | 
34 |     return nodeClass.fromNearlyParserResultNode(parserNode, parserContext);
35 | }
36 | 
37 | export class JsonSyntaxTree extends SyntaxTree<JsonSyntaxTreeNode> {
38 |     static fromNearlyParserResult(result: any, parserContext: JsonParserContext): JsonSyntaxTree {
39 |         const rootNode = convertParserNode(result[0], parserContext);
40 |         return new JsonSyntaxTree(rootNode);
41 |     } 
42 | }
43 | 
44 | 


--------------------------------------------------------------------------------
/src/core/mappings/ProgrammableForwardMapping.ts:
--------------------------------------------------------------------------------
 1 | import { ProgrammableFunction, ProgrammableFunctionOf, ProgrammableFunctionSource } from "../../utilities/ProgrammableFunction";
 2 | import { Fragment } from "../fragments/Fragment";
 3 | import { UserInterfaceInput } from "../user-interfaces/UserInterface";
 4 | import { UserInterfaceError, UserInterfaceErrorOrigin } from "../user-interfaces/error/UserInterfaceError";
 5 | import { ForwardMapping, ForwardMappingContext, ForwardMappingFunction } from "./ForwardMapping";
 6 | 
 7 | export class ProgrammableForwardMapping<
 8 |     F extends Fragment = Fragment,
 9 |     I extends UserInterfaceInput = UserInterfaceInput
10 | > implements ForwardMapping<F, I> {
11 |     private programmableFunction: ProgrammableFunctionOf<ForwardMappingFunction<F, I>>;
12 | 
13 |     constructor(source: ProgrammableFunctionSource<ForwardMappingContext<F>, I>) {
14 |         this.programmableFunction = new ProgrammableFunction(
15 |             source,
16 |             exception => {
17 |                 console.error("An exception was caught in a programmable forward mapping:", exception);
18 |             }
19 |         );
20 |     }
21 |     
22 |     apply(context: ForwardMappingContext<F>): I {
23 |         try {
24 |             return this.programmableFunction.call(context);
25 |         }
26 |         catch (exception: any) {
27 |             // In case a programmable forward mapping throws, return an empty object.
28 |             return new UserInterfaceError(
29 |                 UserInterfaceErrorOrigin.ForwardMapping,
30 |                 "Exception thrown by the forward mapping",
31 |                 exception.toString()
32 |             ) as I;
33 |         }
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/presets/languages/python/nodes/StringNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { PythonSyntaxTreeNode } from "../PythonSyntaxTreeNode";
 3 | import { PythonParserContext } from "../PythonParser";
 4 | import { Document } from "../../../../core/documents/Document";
 5 | 
 6 | export class StringNode extends PythonSyntaxTreeNode {
 7 |     static readonly type = "String";
 8 |     readonly type = StringNode.type;
 9 | 
10 |     // readonly prefix: string;
11 |     readonly delimiter: string;
12 |     readonly content: string;
13 | 
14 |     constructor(
15 |         // prefix: string,
16 |         delimiter: string,
17 |         content: string,
18 |         parserNode: any,
19 |         range: Range,
20 |         sourceDocument: Document
21 |     ) {
22 |         super(parserNode, range, sourceDocument);
23 |         // this.prefix = prefix;
24 |         this.delimiter = delimiter;
25 |         this.content = content;
26 |     }
27 | 
28 |     get childNodes(): PythonSyntaxTreeNode[] {
29 |         return [];
30 |     }
31 | 
32 |     static fromNearlyParserResultNode(node: any, parserContext: PythonParserContext): StringNode {
33 |         const delimiterLength = node.delimiter.length;
34 |         const stringContent = node.value.slice(
35 |             delimiterLength,
36 |             node.value.length - delimiterLength
37 |         );
38 | 
39 |         return new StringNode(
40 |             // node.value.text.slice(1, node.value.text.length - 1),
41 |             node.delimiter,
42 |             stringContent,
43 |             node,
44 |             StringNode.computeRangeFromParserNode(node, parserContext),
45 |             parserContext.sourceDocument
46 |         );
47 |     }
48 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "monocle",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "dependencies": {
 7 |     "@blueprintjs/core": "^5.5.1",
 8 |     "@blueprintjs/icons": "^5.9.0",
 9 |     "@blueprintjs/select": "^5.0.16",
10 |     "@handsontable/react": "^14.1.0",
11 |     "@monaco-editor/react": "^4.4.5",
12 |     "@types/node": "^20.8.8",
13 |     "@types/react": "^18.2.31",
14 |     "@types/react-dom": "^18.2.14",
15 |     "ajv": "^8.6.3",
16 |     "css-tree": "^2.0.4",
17 |     "handsontable": "^14.1.0",
18 |     "mdast-util-from-markdown": "^2.0.0",
19 |     "mdast-util-gfm": "^3.0.0",
20 |     "mdast-util-to-markdown": "^2.1.0",
21 |     "micromark-extension-gfm": "^3.0.0",
22 |     "moo": "^0.5.1",
23 |     "normalize.css": "^8.0.1",
24 |     "react": "^18.2.0",
25 |     "react-colorful": "^5.4.0",
26 |     "react-complex-tree": "^2.2.2",
27 |     "react-dom": "^18.2.0",
28 |     "react-json-view": "^1.21.3",
29 |     "react-split": "^2.0.14",
30 |     "react-string-diff": "^0.2.0",
31 |     "recharts": "^2.1.13",
32 |     "ts-morph": "^21.0.1",
33 |     "typescript": "^5.2.2"
34 |   },
35 |   "scripts": {
36 |     "start": "yarn run vite",
37 |     "lint": "yarn run eslint .",
38 |     "build": "yarn run vite build"
39 |   },
40 |   "devDependencies": {
41 |     "@types/css-tree": "^2.3.3",
42 |     "@types/moo": "^0.5.5",
43 |     "@types/nearley": "^2.11.2",
44 |     "@typescript-eslint/eslint-plugin": "^6.9.0",
45 |     "@typescript-eslint/parser": "^6.9.0",
46 |     "@vitejs/plugin-react": "^4.1.0",
47 |     "eslint": "^8.52.0",
48 |     "monaco-editor": "^0.45.0",
49 |     "nearley": "^2.20.1",
50 |     "vite": "^5.0.12",
51 |     "vite-plugin-singlefile": "^1.0.0"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/core/projections/ProjectionMatcher.ts:
--------------------------------------------------------------------------------
 1 | import { Fragment } from "../fragments/Fragment";
 2 | import { Projection } from "./Projection";
 3 | 
 4 | export class ProjectionMatcher {
 5 |     private projectionToPreserve: Projection;
 6 | 
 7 |     constructor(projectionToPreserve: Projection) {
 8 |         this.projectionToPreserve = projectionToPreserve;
 9 |     }
10 | 
11 |     private computeDistanceWithFragments(fragment: Fragment): number {
12 |         const fragmentStartOffset = fragment.range.start.offset;
13 |         const fragmentEndOffset = fragment.range.end.offset;
14 | 
15 |         const startOffsetsDifference = this.projectionToPreserve.range.start.offset - fragmentStartOffset;
16 |         const endOffsetsDifference = this.projectionToPreserve.range.end.offset - fragmentEndOffset;
17 | 
18 |         return startOffsetsDifference**2 + endOffsetsDifference**2;
19 |     }
20 | 
21 |     findBestMatchingFragment(fragments: Fragment[]): Fragment | null {
22 |         const nbFragments = fragments.length;
23 |         if (nbFragments === 0) {
24 |             return null;
25 |         }
26 | 
27 |         let bestMatch: Fragment | null = null;
28 |         let bestMatchDistance = Infinity;
29 | 
30 |         for (let i = 0; i < nbFragments; i++) {
31 |             const fragment = fragments[i];
32 |             const distance = this.computeDistanceWithFragments(fragment);
33 |             // console.log("distance of fragment to fragment", this.projectionToPreserve, fragment.range.toPrettyString(), distance)
34 | 
35 |             if (distance < bestMatchDistance) {
36 |                 bestMatch = fragment;
37 |                 bestMatchDistance = distance;
38 |             }
39 |         }
40 | 
41 |         return bestMatch;
42 |     }
43 | }


--------------------------------------------------------------------------------
/src/presets/renderers/popover/ButtonPopoverRenderer.tsx:
--------------------------------------------------------------------------------
 1 | import "./popover-renderer.css";
 2 | import React, { ReactElement } from "react";
 3 | import { Button, PopoverTargetProps } from "@blueprintjs/core";
 4 | import { PopoverRenderer } from "./PopoverRenderer";
 5 | import { ConfigurableRendererProvider } from "../../../core/renderers/RendererProvider";
 6 | import { ButtonPopoverRendererSettings, DEFAULT_BUTTON_POPOVER_RENDERER_SETTINGS, deriveButtonPopoverRendererSettingsFrom } from "./ButtonPopoverRendererSettings";
 7 | import { RendererProps } from "../../../core/renderers/Renderer";
 8 | 
 9 | export class ButtonPopoverRenderer extends PopoverRenderer {
10 |     readonly className: string = "popover button-popover";
11 |     protected settings: ButtonPopoverRendererSettings;
12 | 
13 |     constructor(props: RendererProps) {
14 |         super(props);
15 |         this.settings = DEFAULT_BUTTON_POPOVER_RENDERER_SETTINGS;
16 |     }
17 | 
18 |     protected renderPopoverTarget(props: PopoverTargetProps): ReactElement {
19 |         const { isOpen, ref, ...targetProps } = props;
20 |         return <Button
21 |             {...this.settings.buttonProps}
22 |             ref={props.ref as any}
23 |             {...targetProps}
24 |         >
25 |             {this.settings.buttonContent}
26 |         </Button>;
27 |     }
28 | 
29 |     static makeConfigurableProvider(): ConfigurableRendererProvider {
30 |         return (settings: Partial<ButtonPopoverRendererSettings> = {}) => {
31 |             return {
32 |                 provide: () => class extends ButtonPopoverRenderer {
33 |                     protected settings = deriveButtonPopoverRendererSettingsFrom(settings);
34 |                 }
35 |             };
36 |         };
37 |     }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/core/languages/SyntaxTreePattern.ts:
--------------------------------------------------------------------------------
 1 | import { SyntaxTree } from "./SyntaxTree";
 2 | import { SyntaxTeeeVisitor } from "./SyntaxTreeVisitor";
 3 | import { SyntaxTreeNode } from "./SyntaxTreeNode";
 4 | 
 5 | export const SKIP_MATCH_DESCENDANTS = (node: SyntaxTreeNode, isMatch: boolean) => isMatch;
 6 | 
 7 | export class SyntaxTreePattern implements SyntaxTeeeVisitor<SyntaxTreeNode[]> {
 8 |     private match: (node: SyntaxTreeNode) => boolean;
 9 | 
10 |     /**
11 |      * Parameter controlling if the subtree(s) rooted in a certain node should be explored.
12 |      * - If the parameter is set to `false`, all subtrees will be explored.
13 |      * - If the parameter is set to a function, the subtrees of nodes
14 |      *   for which the function evaliates to true will not be explored.
15 |      */
16 |     private skipDescendants: false | ((node: SyntaxTreeNode, isMatch: boolean) => boolean);
17 |     
18 |     constructor(
19 |         match: (node: SyntaxTreeNode) => boolean,
20 |         skipDescendants: false | ((node: SyntaxTreeNode, isMatch: boolean) => boolean) = false
21 |     ) {
22 |         this.match = match;
23 |         this.skipDescendants = skipDescendants;
24 |     }
25 | 
26 |     visitNode(node: SyntaxTreeNode, matchingNodes: SyntaxTreeNode[]): boolean {
27 |         const isMatch = this.match(node);
28 |         if (isMatch) {
29 |             matchingNodes.push(node);
30 |         }
31 | 
32 |         return typeof this.skipDescendants === "function"
33 |             ? this.skipDescendants(node, isMatch)
34 |             : this.skipDescendants;
35 |     }
36 | 
37 |     apply(syntaxTree: SyntaxTree): SyntaxTreeNode[] {
38 |         const matchingNodes: SyntaxTreeNode[] = [];
39 |         syntaxTree.visitWith(this, matchingNodes);
40 | 
41 |         return matchingNodes;
42 |     }
43 | }


--------------------------------------------------------------------------------
/src/presets/user-interfaces/regex-editor/regex-editor.css:
--------------------------------------------------------------------------------
 1 | /* Small diagram */
 2 | 
 3 | .regex-diagram.small {
 4 |     position: relative;
 5 |     overflow: hidden;
 6 |     width: 30vw;
 7 | }
 8 | 
 9 | .regex-diagram.small .iframe-container iframe {
10 |     border: none;
11 |     transform-origin: 0 0;
12 |     z-index: 100;
13 | }
14 | 
15 | .regex-diagram.small + .regex-diagram-overlay {
16 |     position: absolute;
17 |     left: 0;
18 |     top: 0;
19 |     width: 100%;
20 |     height: 100%;
21 |     z-index: 200;
22 | }
23 | 
24 | .regex-diagram.small + .regex-diagram-overlay:hover {
25 |     background-color: rgba(0, 0, 0, 0.1);
26 |     cursor: zoom-in;
27 | }
28 | 
29 | 
30 | 
31 | 
32 | /* Large diagram */
33 | 
34 | .regex-diagram.large {
35 |     width: 80vw;
36 |     height: 100%;
37 | }
38 | 
39 | .regex-diagram.large .iframe-container iframe {
40 |     border: none;
41 |     transform-origin: 0 0;
42 | }
43 | 
44 | 
45 | 
46 | 
47 | /* Editor */
48 | 
49 | .regex-editor-with-diagram {
50 |     display: flex;
51 |     flex-direction: column;
52 | }
53 | 
54 | .regex-editor {
55 |     display: flex;
56 |     flex-direction: row;
57 |     width: 100%;
58 |     margin: 0 0 1em 0;
59 | }
60 | 
61 | .regex-editor .regex-body {
62 |     flex-grow: 4;
63 |     margin-right: 1em;
64 | }
65 | 
66 | .regex-editor .regex-flags {
67 |     flex-grow: 1;
68 | }
69 | 
70 | 
71 | 
72 | 
73 | /* Popup */
74 | 
75 | .regex-popup-content-wrapper {
76 |     display: flex;
77 |     align-items: center;
78 |     justify-content: center;
79 |     width: 100%;
80 |     height: 100%;
81 |     z-index: 500;
82 | }
83 | 
84 | .regex-popup-content-panel {
85 |     background-color: #EEE;
86 |     padding: 1em;
87 | }
88 | 
89 | .regex-popup-content-panel,
90 | .regex-popup-content-panel * {
91 |     z-index: 1000;
92 | }


--------------------------------------------------------------------------------
/src/core/runtime/RuntimeRequest.ts:
--------------------------------------------------------------------------------
 1 | import { Position } from "../documents/Position";
 2 | import { Fragment } from "../fragments/Fragment";
 3 | 
 4 | export type RuntimeRequestId = number;
 5 | export type RuntimeRequestExpression = string;
 6 | 
 7 | // Function to generate unique IDs for new runtime requests.
 8 | let nextUnusedRuntimeId: RuntimeRequestId = 1;
 9 | 
10 | function getUnusedRuntimeId(): RuntimeRequestId {
11 |     const id = nextUnusedRuntimeId;
12 |     nextUnusedRuntimeId += 1;
13 | 
14 |     return id;
15 | }
16 | 
17 | export interface RawRuntimeRequest {
18 |     readonly id: number;
19 |     readonly position: { line: number, column: number };
20 |     readonly expression: string;  
21 | }
22 | 
23 | export class RuntimeRequest {
24 |     readonly id: RuntimeRequestId;
25 |     readonly name: string;
26 |     readonly position: Position;
27 |     readonly expression: RuntimeRequestExpression;
28 | 
29 |     constructor(
30 |         id: RuntimeRequestId,
31 |         name: string,
32 |         position: Position,
33 |         expression: RuntimeRequestExpression
34 |     ) {
35 |         this.id = id;
36 |         this.name = name;
37 |         this.position = position;
38 |         this.expression = expression;
39 |     }
40 | 
41 |     get raw(): RawRuntimeRequest {
42 |         return {
43 |             id: this.id,
44 |             position: { line: this.position.row, column: this.position.column },
45 |             expression: this.expression
46 |         };
47 |     }
48 | 
49 |     static createForFragment(fragment: Fragment, name: string, expression: RuntimeRequestExpression): RuntimeRequest {
50 |         return new RuntimeRequest(
51 |             getUnusedRuntimeId(),
52 |             name,
53 |             fragment.range.start,
54 |             expression
55 |         );
56 |     }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/utilities/ProgrammableFunction.ts:
--------------------------------------------------------------------------------
 1 | export type ProgrammableFunctionException = any;
 2 | 
 3 | export type ProgrammableFunctionExceptionHandler = (exception: ProgrammableFunctionException) => void;
 4 | 
 5 | const DEFAULT_PROGRAMMABLE_FUNCTION_EXCEPTION_HANDLER = (exception: ProgrammableFunctionException) => {
 6 |     console.error("An exception was caught in a programmable function:", exception);
 7 | };
 8 | 
 9 | export type ProgrammableFunctionSource<I = any, O = any> =
10 |     string | ((argument: I) => O);
11 | 
12 | export class ProgrammableFunction<I = any, O = any> {
13 |     private function: (argument: I) => O;
14 |     private exceptionHandler: ProgrammableFunctionExceptionHandler;
15 | 
16 |     constructor(
17 |         source: ProgrammableFunctionSource<I, O>,
18 |         exceptionHandler: ProgrammableFunctionExceptionHandler = DEFAULT_PROGRAMMABLE_FUNCTION_EXCEPTION_HANDLER
19 |     ) {
20 |         this.function = typeof source === "string"
21 |             ? this.createFunctionFromTextualDescription(source)
22 |             : source;
23 |         this.exceptionHandler = exceptionHandler;
24 |     }
25 | 
26 |     private createFunctionFromTextualDescription(
27 |         functionBody: string,
28 |         argumentName: string = "argument"
29 |     ): (argument: I) => O {
30 |         return new Function(argumentName, functionBody) as (argument: I) => O;
31 |     }
32 |     
33 |     call(argument: I): O {
34 |         try {
35 |             return this.function(argument); 
36 |         } catch (exception) {
37 |             this.exceptionHandler(exception);
38 |             throw exception;
39 |         }
40 |     }
41 | }
42 | 
43 | export type ProgrammableFunctionOf<F extends (argument: any) => any> =
44 |     ProgrammableFunction<
45 |         Parameters<F>[0],
46 |         ReturnType<F>
47 |     >;
48 | 


--------------------------------------------------------------------------------
/src/presets/languages/python/nodes/ArgumentListNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { PythonSyntaxTreeNode } from "../PythonSyntaxTreeNode";
 3 | import { PythonParserContext } from "../PythonParser";
 4 | import { PositionalArgumentNode } from "./PositionalArgumentNode";
 5 | import { NamedArgumentNode } from "./NamedArgumentNode";
 6 | import { Document } from "../../../../core/documents/Document";
 7 | 
 8 | export class ArgumentListNode extends PythonSyntaxTreeNode {
 9 |     static readonly type = "ArgumentList";
10 |     readonly type = ArgumentListNode.type;
11 | 
12 |     readonly positionalArguments: PositionalArgumentNode[];
13 |     readonly namedArguments: NamedArgumentNode[];
14 | 
15 |     constructor(
16 |         positionalArguments: PositionalArgumentNode[],
17 |         namedArguments: NamedArgumentNode[],
18 |         parserNode: any,
19 |         range: Range,
20 |         sourceDocument: Document
21 |     ) {
22 |         super(parserNode, range, sourceDocument);
23 |         this.positionalArguments = positionalArguments;
24 |         this.namedArguments = namedArguments;
25 |     }
26 | 
27 |     get childNodes(): PythonSyntaxTreeNode[] {
28 |         return [...this.positionalArguments, ...this.namedArguments];
29 |     }
30 | 
31 |     static fromNearlyParserResultNode(node: any, parserContext: PythonParserContext): ArgumentListNode {
32 |         return new ArgumentListNode(
33 |             node.positionalArguments.map((n: any) => PositionalArgumentNode.fromNearlyParserResultNode(n, parserContext)),
34 |             node.namedArguments.map((n: any) => NamedArgumentNode.fromNearlyParserResultNode(n, parserContext)),
35 |             node,
36 |             ArgumentListNode.computeRangeFromParserNode(node, parserContext),
37 |             parserContext.sourceDocument
38 |         );
39 |     }
40 | }


--------------------------------------------------------------------------------
/src/presets/user-interfaces/form/form-elements/StringInput.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactElement } from "react";
 2 | import { InputGroup } from "@blueprintjs/core";
 3 | import { FormEntryType, FormEntryValueOfType } from "../FormEntry";
 4 | import { FormElement, FormElementProps, FormElementValueChangeListener } from "./FormElement";
 5 | 
 6 | type SupportedEntryTypes = FormEntryType.String;
 7 | 
 8 | export interface StringInputProps extends FormElementProps<SupportedEntryTypes> {
 9 |     defaultValue?: string;
10 | }
11 | 
12 | export class StringInput extends FormElement<SupportedEntryTypes, StringInputProps> {
13 |     protected readonly supportedFormEntryTypes = [FormEntryType.String] as SupportedEntryTypes[];
14 | 
15 |     protected renderControlWithoutValue(
16 |         declareValueChange: FormElementValueChangeListener<SupportedEntryTypes>,
17 |         beginTransientState: () => void,
18 |         endTransientState: () => void
19 |     ): ReactElement | null {
20 |         const defaultValue = this.props.defaultValue;
21 |         return defaultValue !== undefined
22 |             ? this.renderControl(defaultValue, declareValueChange, beginTransientState, endTransientState)
23 |             : null;
24 |     }
25 |     
26 |     protected renderControl(
27 |         value: FormEntryValueOfType<SupportedEntryTypes>,
28 |         declareValueChange: FormElementValueChangeListener<SupportedEntryTypes>,
29 |         beginTransientState: () => void,
30 |         endTransientState: () => void
31 |     ): ReactElement {
32 |         return <InputGroup
33 |             defaultValue={value}
34 |             style={this.props.style}
35 |             onChange={event => declareValueChange(event.target.value, this.supportedFormEntryTypes[0])}
36 |             onFocus={event => beginTransientState()}
37 |             onBlur={event => endTransientState()}
38 |         />;
39 |     }
40 | }


--------------------------------------------------------------------------------
/src/utilities/languages/markdown/markdown-utilities.ts:
--------------------------------------------------------------------------------
 1 | import { fromMarkdown } from "mdast-util-from-markdown";
 2 | import { toMarkdown } from "mdast-util-to-markdown";
 3 | import { gfmFromMarkdown, gfmToMarkdown } from "mdast-util-gfm";
 4 | import { gfm } from "micromark-extension-gfm";
 5 | import { TableContent } from "../../../presets/user-interfaces/table/Table";
 6 | 
 7 | function parse(text: string): MdastParentNode {
 8 |     return fromMarkdown(text, {
 9 |         extensions: [gfm()],
10 |         mdastExtensions: [gfmFromMarkdown()]
11 |     });
12 | }
13 | 
14 | export type MdastValue = string;
15 | 
16 | export interface MdastNode {
17 |     type: string;
18 | }
19 | 
20 | export interface MdastParentNode extends MdastNode {
21 |     children: MdastNode[];
22 | }
23 | 
24 | export function createMdastParentNode(type: string, children: MdastNode[] = []): MdastParentNode {
25 |     return {
26 |         type: type,
27 |         children: children
28 |     };
29 | }
30 | 
31 | export function createMdastTable(tableContent: TableContent): MdastParentNode {
32 |     const tableNode = createMdastParentNode("table");
33 |     
34 |     for (let row of tableContent) {
35 |         const rowNode = createMdastParentNode("tableRow");
36 |         tableNode.children.push(rowNode);
37 | 
38 |         for (let cell of row) {
39 |             const cellNode = createMdastParentNode("tableCell");
40 |             rowNode.children.push(cellNode);
41 | 
42 |             const cellContentAsString = (cell ?? "").toString();
43 |             const parsedCellContent = parse(cellContentAsString);
44 |             cellNode.children.push(...parsedCellContent.children);
45 |         }
46 |     }
47 | 
48 |     return tableNode;
49 | }
50 | 
51 | export function convertMdastToMarkdownString(node: MdastNode): string {
52 |     return toMarkdown(node as any, {
53 |         extensions: [gfmToMarkdown()]
54 |     }).trim();
55 | }
56 | 


--------------------------------------------------------------------------------
/src/core/fragments/textual/RegexPatternFinder.ts:
--------------------------------------------------------------------------------
 1 | import { RegexMatcher, RegexMatchWithGroups } from "../../../utilities/RegexMatcher";
 2 | import { Document } from "../../documents/Document";
 3 | import { FragmentProvider } from "../../fragments/FragmentProvider";
 4 | import { FragmentType } from "../../fragments/FragmentType";
 5 | import { TextualFragment } from "../../fragments/textual/TextualFragment";
 6 | 
 7 | export class RegexPatternFinder implements FragmentProvider<TextualFragment> {
 8 |     readonly type = FragmentType.Textual;
 9 |     private regexMatcher: RegexMatcher;
10 | 
11 |     constructor(pattern: string) {
12 |         this.regexMatcher = new RegexMatcher(pattern);
13 |     }
14 | 
15 |     get pattern(): string {
16 |         return this.regexMatcher.pattern;
17 |     }
18 | 
19 |     set pattern(newPattern: string) {
20 |         this.regexMatcher.pattern = newPattern;
21 |     }
22 | 
23 |     async provideFragmentsForDocument(document: Document): Promise<TextualFragment[]> {
24 |         // If the document is empty, there is nothing to do.
25 |         if (document.isEmpty) {
26 |             return [];
27 |         }
28 | 
29 |         return this.regexMatcher
30 |             .matchAll(document.content)
31 |             .map(match => TextualFragment.fromRegexMatch(match, document));
32 |     }
33 | 
34 |     provideFragmentsWithMatchesForDocument(document: Document): { fragment: TextualFragment, match: RegexMatchWithGroups }[] {
35 |         // If the document is empty, there is nothing to do.
36 |         if (document.isEmpty) {
37 |             return [];
38 |         }
39 | 
40 |         return this.regexMatcher
41 |             .matchAllWithGroups(document.content)
42 |             .map(match => {
43 |                 return {
44 |                     fragment: TextualFragment.fromRegexMatch(match, document),
45 |                     match: match
46 |                 };
47 |             });
48 |     }
49 | }


--------------------------------------------------------------------------------
/src/presets/languages/json/nodes/PropertyNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { JsonSyntaxTreeNode } from "../JsonSyntaxTreeNode";
 3 | import { JsonParserContext } from "../JsonParser";
 4 | import { ObjectNode } from "./ObjectNode";
 5 | import { ArrayNode } from "./ArrayNode";
 6 | import { BooleanNode } from "./BooleanNode";
 7 | import { NullNode } from "./NullNode";
 8 | import { NumberNode } from "./NumberNode";
 9 | import { StringNode } from "./StringNode";
10 | import { KeyNode } from "./KeyNode";
11 | import { convertParserNode } from "../JsonSyntaxTree";
12 | import { Document } from "../../../../core/documents/Document";
13 | 
14 | export type ValueNode =
15 |     | ObjectNode
16 |     | ArrayNode
17 |     | StringNode
18 |     | NumberNode
19 |     | BooleanNode
20 |     | NullNode;
21 | 
22 | export class PropertyNode extends JsonSyntaxTreeNode {
23 |     static readonly type = "Property";
24 |     readonly type = PropertyNode.type;
25 | 
26 |     readonly key: KeyNode;
27 |     readonly value: ValueNode;
28 | 
29 |     constructor(
30 |         key: KeyNode,
31 |         value: ValueNode,
32 |         parserNode: any,
33 |         range: Range,
34 |         sourceDocument: Document
35 |     ) {
36 |         super(parserNode, range, sourceDocument);
37 |         this.key = key;
38 |         this.value = value;
39 |     }
40 | 
41 |     get childNodes(): JsonSyntaxTreeNode[] {
42 |         return [this.key, this.value];
43 |     }
44 | 
45 |     static fromNearlyParserResultNode(node: any, parserContext: JsonParserContext): JsonSyntaxTreeNode {
46 |         return new PropertyNode(
47 |             convertParserNode(node.key, parserContext) as KeyNode,
48 |             convertParserNode(node.value, parserContext) as ValueNode,
49 |             node,
50 |             PropertyNode.computeRangeFromParserNode(node, parserContext),
51 |             parserContext.sourceDocument
52 |         );
53 |     }
54 | }


--------------------------------------------------------------------------------
/src/core/runtime/request-providers/RuntimeRequestList.ts:
--------------------------------------------------------------------------------
 1 | import { Fragment } from "../../fragments/Fragment";
 2 | import { RuntimeRequest, RuntimeRequestExpression } from "../RuntimeRequest";
 3 | import { RuntimeRequestContext, RuntimeRequestProvider } from "./RuntimeRequestProvider";
 4 | 
 5 | export type NamedExpression = {
 6 |     name: string,
 7 |     expression: RuntimeRequestExpression
 8 | };
 9 | 
10 | export class RuntimeRequestList implements RuntimeRequestProvider {
11 |     readonly namesToRuntimeExpressions: Map<string, RuntimeRequestExpression>;
12 | 
13 |     constructor(
14 |         namedExpressions: Record<string, RuntimeRequestExpression> = {}
15 |     ) {
16 |         this.namesToRuntimeExpressions = new Map();
17 |         this.add(namedExpressions);
18 |     }
19 | 
20 |     add(name: string, expression: RuntimeRequestExpression): void;
21 |     add(namedExpressions: Record<string, RuntimeRequestExpression>): void;
22 |     add(nameOrNamedExpressions: string | Record<string, RuntimeRequestExpression>, expression?: RuntimeRequestExpression): void {
23 |         if (arguments.length === 1) {
24 |             const name = nameOrNamedExpressions as string;
25 |             this.namesToRuntimeExpressions.set(name, expression!);
26 |         }
27 |         else {
28 |             const namedExpressions = nameOrNamedExpressions as Record<string, RuntimeRequestExpression>;
29 |             for (let name of Object.getOwnPropertyNames(namedExpressions)) {
30 |                 this.add(name, namedExpressions[name]);
31 |             }
32 |         }
33 |         
34 |     }
35 | 
36 |     provideRuntimeRequests(context: RuntimeRequestContext<Fragment>): RuntimeRequest[] {
37 |         return [...this.namesToRuntimeExpressions.entries()]
38 |             .map(([name, expression]: [string, RuntimeRequestExpression]) =>
39 |                 RuntimeRequest.createForFragment(context.fragment, name, expression)
40 |             );
41 |     }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/presets/languages/python/nodes/ExpressionNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { PythonSyntaxTreeNode } from "../PythonSyntaxTreeNode";
 3 | import { PythonParserContext } from "../PythonParser";
 4 | import { FunctionCallNode } from "./FunctionCallNode";
 5 | import { BooleanNode } from "./BooleanNode";
 6 | import { NoneNode } from "./NoneNode";
 7 | import { NumberNode } from "./NumberNode";
 8 | import { StringNode } from "./StringNode";
 9 | import { convertParserNode } from "../PythonSyntaxTree";
10 | import { NamedAccessNode } from "./NamedAccessNode";
11 | import { IndexedAccessNode } from "./IndexedAccessNode";
12 | import { IdentifierNode } from "./IdentifierNode";
13 | import { Document } from "../../../../core/documents/Document";
14 | 
15 | export type ValueNode =
16 |     | IdentifierNode
17 |     | NamedAccessNode
18 |     | IndexedAccessNode
19 |     | FunctionCallNode
20 |     | StringNode
21 |     | NumberNode
22 |     | BooleanNode
23 |     | NoneNode;
24 | 
25 | export class ExpressionNode extends PythonSyntaxTreeNode {
26 |     static readonly type = "Expression";
27 |     readonly type = ExpressionNode.type;
28 | 
29 |     readonly value: ValueNode;
30 | 
31 |     constructor(
32 |         value: ValueNode,
33 |         parserNode: any,
34 |         range: Range,
35 |         sourceDocument: Document
36 |     ) {
37 |         super(parserNode, range, sourceDocument);
38 |         this.value = value;
39 |     }
40 | 
41 |     get childNodes(): PythonSyntaxTreeNode[] {
42 |         return [this.value];
43 |     }
44 | 
45 |     static fromNearlyParserResultNode(node: any, parserContext: PythonParserContext): ExpressionNode {
46 |         return new ExpressionNode(
47 |             convertParserNode(node.value, parserContext) as ValueNode,
48 |             node,
49 |             ExpressionNode.computeRangeFromParserNode(node, parserContext),
50 |             parserContext.sourceDocument
51 |         );
52 |     }
53 | }


--------------------------------------------------------------------------------
/src/presets/user-interfaces/regex-editor/LargeRegexDiagramComponent.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactElement } from "react";
 2 | import "./regex-editor.css";
 3 | import { Range } from "../../../core/documents/Range";
 4 | import { RegulexIframe } from "./RegulexIframe";
 5 | import { SplitRegex } from "../../../utilities/SplitRegex";
 6 | 
 7 | type Props = {
 8 |     regex: RegExp;
 9 |     regexRange: Range | null;
10 | };
11 | 
12 | export class LargeRegexDiagramComponent extends React.PureComponent<Props> {
13 |     private createLargeRegulexIframe(splitRegex: SplitRegex): ReactElement {
14 |         const regexBody = splitRegex.body;
15 |         const regexFlags = splitRegex.flags;
16 | 
17 |         const panelWidth = window.innerWidth * 0.3;
18 |         const overlayWidth = window.innerWidth * 0.8;
19 |         const nbCharacterSetsInRegexBody = (regexBody.match((/[^\\]\[/g)) || []).length;
20 | 
21 |         const iframeWidth = (regexBody.length * 50) / (1 + nbCharacterSetsInRegexBody / 5); // px
22 |         const iframeHeight = (regexBody.length * 200) / 40; // px
23 |         const iframeScale = overlayWidth / iframeWidth;
24 |         const iframeMarginBottom = -(iframeHeight * (1 - iframeScale) / 4); // px (to remove useless whitespace)
25 | 
26 |         return <RegulexIframe
27 |             splitRegex={splitRegex}
28 |             htmlAttributes={{
29 |                 style: `
30 |                     width: ${iframeWidth}px;
31 |                     height: ${iframeHeight}px;
32 |                     transform: scale(${iframeScale});
33 |                     margin-bottom: ${iframeMarginBottom}px;
34 |                 `,
35 |             }}
36 |         />;
37 |     }
38 | 
39 |     render() {
40 |         const splitRegex = SplitRegex.fromRegex(this.props.regex);
41 |         const iframe = this.createLargeRegulexIframe(splitRegex);
42 | 
43 |         return <div className="regex-diagram large">
44 |             {iframe}
45 |         </div>;
46 |     }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/core/documents/DocumentEdit.ts:
--------------------------------------------------------------------------------
 1 | import { Document } from "./Document";
 2 | import { Position } from "./Position";
 3 | import { Range } from "./Range";
 4 | 
 5 | export enum DocumentEditKind {
 6 |     Insertion,
 7 |     Replacement,
 8 |     Deletion
 9 | }
10 | 
11 | export class DocumentEdit {
12 |     readonly kind: DocumentEditKind;
13 |     readonly range: Range;
14 |     readonly newContent: string;
15 | 
16 |     constructor(
17 |         kind: DocumentEditKind,
18 |         range: Range,
19 |         newContent: string = ""
20 |     ) {
21 |         this.kind = kind;
22 |         this.range = range;
23 |         this.newContent = newContent;
24 |     }
25 | 
26 |     getContentSizeDifferenceInDocument(document: Document): number {
27 |         const getSizeOfContentToEdit = () => document.getContentInRange(this.range).length;
28 | 
29 |         switch (this.kind) {
30 |             case DocumentEditKind.Insertion:
31 |                 return this.newContent.length;
32 | 
33 |             case DocumentEditKind.Replacement:
34 |                 return this.newContent.length - getSizeOfContentToEdit();
35 |         
36 |             case DocumentEditKind.Deletion:
37 |                 return -getSizeOfContentToEdit();
38 |         }
39 |     }
40 | 
41 |     static createInsertion(position: Position, newContent: string): DocumentEdit {
42 |         return new DocumentEdit(
43 |             DocumentEditKind.Insertion,
44 |             Range.fromSinglePosition(position),
45 |             newContent
46 |         );
47 |     }
48 | 
49 |     static createReplacement(range: Range, newContent: string): DocumentEdit {
50 |         return new DocumentEdit(
51 |             DocumentEditKind.Replacement,
52 |             range,
53 |             newContent
54 |         );
55 |     }
56 | 
57 |     static createDeletion(range: Range): DocumentEdit {
58 |         return new DocumentEdit(
59 |             DocumentEditKind.Deletion,
60 |             range
61 |         );
62 |     }
63 | }


--------------------------------------------------------------------------------
/src/apps/playground/examples/markdown.ts:
--------------------------------------------------------------------------------
 1 | import { MARKDOWN_LANGUAGE } from "../../../presets/languages/markdown/language";
 2 | 
 3 | const text = `
 4 | Indented code
 5 | 
 6 |     // Some comments
 7 |     line 1 of code
 8 |     line 2 of code
 9 |     line 3 of code
10 | 
11 | 
12 | Block code "fences"
13 | 
14 | \`\`\`
15 | Sample text here...
16 | \`\`\`
17 | 
18 | Syntax highlighting
19 | 
20 | \`\`\` js
21 | var foo = function (bar) {
22 |   return bar++;
23 | };
24 | 
25 | /* test */
26 | 
27 | console.log(foo(5));
28 | \`\`\`
29 | 
30 | ## Tables
31 | 
32 | | Option | Description |
33 | | ------ | ----------- |
34 | | data   | path to data files to supply the data that will be passed into templates. |
35 | | engine | engine to be used for processing templates. Handlebars is the default. |
36 | | ext    | extension to be used for dest files. |
37 | 
38 | Right aligned columns
39 | 
40 | | Option | Description |
41 | | ------:| -----------:|
42 | | data   | path to data files to supply the data that will be passed into templates. |
43 | | engine | engine to be used for processing templates. Handlebars is the default. |
44 | | ext    | extension to be used for dest files. |
45 | 
46 | 
47 | ## Links
48 | 
49 | [link text](http://dev.nodeca.com)
50 | 
51 | [link with title](http://nodeca.github.io/pica/demo/ "title text!")
52 | 
53 | Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
54 | 
55 | 
56 | ## Images
57 | 
58 | ![Minion](https://octodex.github.com/images/minion.png)
59 | ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
60 | 
61 | Like links, Images also have a footnote style syntax
62 | 
63 | ![Alt text][id]
64 | 
65 | With a reference later in the document defining the URL location:
66 | 
67 | [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
68 | `;
69 | 
70 | export const MARKDOWN_EXAMPLE = {
71 |     name: "Markdown",
72 |     language: MARKDOWN_LANGUAGE,
73 |     content: text.trim()
74 | };


--------------------------------------------------------------------------------
/src/presets/user-interfaces/form/form-elements/ButtonColorPicker.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactElement } from "react";
 2 | import { FormEntryType, FormEntryValueOfType } from "../FormEntry";
 3 | import { FormElement, FormElementProps, FormElementValueChangeListener } from "./FormElement";
 4 | import { ButtonColorPicker as ButtonColorPickerComponent } from "../../../../utilities/components/color-pickers/ButtonColorPicker";
 5 | import { Color } from "../../../../utilities/Color";
 6 | 
 7 | type SupportedEntryTypes = FormEntryType.Color;
 8 | 
 9 | export interface ButtonProps extends FormElementProps<SupportedEntryTypes> {
10 |     defaultValue?: Color;
11 | }
12 | 
13 | export class ButtonColorPicker extends FormElement<SupportedEntryTypes, ButtonProps> {
14 |     protected readonly supportedFormEntryTypes = [FormEntryType.Color] as SupportedEntryTypes[];
15 | 
16 |     protected renderControlWithoutValue(
17 |         declareValueChange: FormElementValueChangeListener<SupportedEntryTypes>,
18 |         beginTransientState: () => void,
19 |         endTransientState: () => void
20 |     ): ReactElement | null {
21 |         const defaultValue = this.props.defaultValue;
22 |         return defaultValue !== undefined
23 |             ? this.renderControl(defaultValue, declareValueChange, beginTransientState, endTransientState)
24 |             : null;
25 |     }
26 | 
27 |     protected renderControl(
28 |         value: FormEntryValueOfType<SupportedEntryTypes>,
29 |         declareValueChange: FormElementValueChangeListener<SupportedEntryTypes>,
30 |         beginTransientState: () => void,
31 |         endTransientState: () => void
32 |     ): ReactElement {
33 |         return <ButtonColorPickerComponent
34 |             color={value}
35 |             buttonStyle={this.props.style}
36 |             onOpen={() => beginTransientState()}
37 |             onClose={() => endTransientState()}
38 |             onChange={newColor => declareValueChange(newColor, this.supportedFormEntryTypes[0])}
39 |         />;
40 |     }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/presets/languages/python/nodes/FunctionCallNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { PythonSyntaxTreeNode } from "../PythonSyntaxTreeNode";
 3 | import { PythonParserContext } from "../PythonParser";
 4 | import { convertParserNode } from "../PythonSyntaxTree";
 5 | import { ArgumentListNode } from "./ArgumentListNode";
 6 | import { IndexedAccessNode } from "./IndexedAccessNode";
 7 | import { NamedAccessNode } from "./NamedAccessNode";
 8 | import { IdentifierNode } from "./IdentifierNode";
 9 | import { Document } from "../../../../core/documents/Document";
10 | 
11 | export type CallableExpressionNode =
12 |     | IdentifierNode
13 |     | NamedAccessNode
14 |     | IndexedAccessNode
15 |     | FunctionCallNode;
16 | 
17 | export class FunctionCallNode extends PythonSyntaxTreeNode {
18 |     static readonly type = "FunctionCall";
19 |     readonly type = FunctionCallNode.type;
20 | 
21 |     readonly callee: CallableExpressionNode;
22 |     readonly arguments: ArgumentListNode;
23 | 
24 |     constructor(
25 |         callee: CallableExpressionNode,
26 |         argumentList: ArgumentListNode,
27 |         parserNode: any,
28 |         range: Range,
29 |         sourceDocument: Document
30 |     ) {
31 |         super(parserNode, range, sourceDocument);
32 |         this.callee = callee;
33 |         this.arguments = argumentList;
34 |     }
35 | 
36 |     get childNodes(): PythonSyntaxTreeNode[] {
37 |         return [this.callee, this.arguments];
38 |     }
39 | 
40 |     static fromNearlyParserResultNode(node: any, parserContext: PythonParserContext): FunctionCallNode {
41 |         return new FunctionCallNode(
42 |             convertParserNode(node.callee, parserContext) as CallableExpressionNode,
43 |             ArgumentListNode.fromNearlyParserResultNode(node.argumentList, parserContext),
44 |             node,
45 |             FunctionCallNode.computeRangeFromParserNode(node, parserContext),
46 |             parserContext.sourceDocument
47 |         );
48 |     }
49 | }


--------------------------------------------------------------------------------
/src/apps/playground/syntax-tree/syntax-tree.css:
--------------------------------------------------------------------------------
 1 | .syntax-tree {
 2 |     font-size: 0.8em;
 3 | }
 4 | 
 5 | .syntax-tree .syntax-tree-node {
 6 |     padding: 0.25ex 0 0.25ex 1em;
 7 |     background-color: rgba(0, 0, 0, 0.015);
 8 |     border-width: 1px 0 1px 2px;
 9 |     border-style: solid;
10 |     border-color: rgba(0, 0, 0, 0.05);
11 | }
12 | 
13 | .syntax-tree .syntax-tree-node.contains-cursor {
14 |     background-color: rgba(255, 255, 0, 0.015);
15 |     border-color: rgba(100, 100, 0, 0.40);    
16 | }
17 | /* 
18 | .syntax-tree .syntax-tree-node.contains-cursor:hover {
19 |     background-color: rgba(255, 255, 0, 0.01);
20 |     border-color: rgba(100, 100, 0, 0.55);    
21 | } */
22 | 
23 | .syntax-tree .syntax-tree-node:hover .syntax-tree-node:hover {
24 |     background-color: rgba(0, 255, 0, 0.01);
25 |     border-color: rgba(0, 100, 0, 0.25);
26 | }
27 | 
28 | .syntax-tree .syntax-tree-node:hover .syntax-tree-node:not(:hover) {
29 |     opacity: 0.8;
30 | }
31 | 
32 | .syntax-tree .syntax-tree-node + .syntax-tree-node {
33 |     margin: 0.5ex 0 0 0;
34 | }
35 | 
36 | .syntax-tree .syntax-tree-node .syntax-tree-node-data {
37 |     display: flex;
38 | }
39 | 
40 | .syntax-tree .syntax-tree-node .type {
41 |     flex-grow: 1;
42 |     font-family: monospace;
43 | }
44 | 
45 | .syntax-tree .syntax-tree-node .range {
46 |     flex-grow: 0;
47 |     font-family: monospace;
48 | }
49 | 
50 | .syntax-tree .syntax-tree-node .range * {
51 |     color: #666;
52 | }
53 | 
54 | .syntax-tree-message {
55 |     padding: 1ex;
56 |     box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
57 | }
58 | 
59 | .syntax-tree-message.no-parser {
60 |     background-color: #ffdc18;
61 |     color: #646430;
62 | }
63 | 
64 | .syntax-tree-message.parsing-error {
65 |     background-color: #f6baa9;
66 |     color: #5f2e1f;
67 | }
68 | 
69 | .syntax-tree-message.parsing-error .parsing-error-message {
70 |     max-width: 100%;
71 |     font-size: 0.8rem;
72 |     font-family: monospace;
73 |     white-space: pre-wrap;
74 |     word-wrap: break-word;
75 | }


--------------------------------------------------------------------------------
/src/core/code-editor/CodeEditor.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Range } from "../documents/Range";
 3 | import { DecoratedRangeId } from "./DecoratedRange";
 4 | 
 5 | export interface CodeEditorProps {
 6 | 
 7 | }
 8 | 
 9 | export interface CodeEditorState {
10 | 
11 | }
12 | 
13 | export abstract class CodeEditor<
14 |     P extends CodeEditorProps = CodeEditorProps,
15 |     S extends CodeEditorState = CodeEditorState
16 | > extends React.Component<P, S> {
17 |     constructor(props: P) {
18 |         super(props);
19 |     }
20 | 
21 |     abstract getVisibleRange(): Range;
22 |     abstract getEditorBoundingBox(): DOMRect;
23 |     abstract getEditorTextAreaBoundingBox(): DOMRect;
24 |     abstract getDecorationElementsWithId(id: DecoratedRangeId): Element[];
25 |     
26 |     getDecorationBoundingBoxWithId(id: DecoratedRangeId): DOMRect {
27 |         const elements = this.getDecorationElementsWithId(id);
28 |         const nbElements = elements.length;
29 | 
30 |         if (nbElements === 0) {
31 |             throw Error("The decoration bounding box cannot be computed: there is no element for the given ID.");
32 |         }
33 | 
34 |         const elementBoundingBoxes = elements.map(element => element.getBoundingClientRect());
35 |     
36 |         const markersSortedByTop = elementBoundingBoxes.sort((box1, box2) => box2.top - box1.top);
37 |         const minMarkerTop = markersSortedByTop[0].top;
38 |         const maxMarkerTop = markersSortedByTop[nbElements - 1].top;
39 | 
40 |         const markersSortedByLeft = elementBoundingBoxes.sort((box1, box2) => box2.left - box1.left);
41 |         const minMarkerLeft = markersSortedByLeft[0].left;
42 | 
43 |         const markersSortedByRight = elementBoundingBoxes.sort((box1, box2) => box2.right - box1.right);
44 |         const maxMarkerRight = markersSortedByRight[0].right;
45 |     
46 |         return new DOMRect(
47 |             minMarkerLeft,
48 |             minMarkerTop,
49 |             maxMarkerRight - minMarkerLeft,
50 |             maxMarkerTop - minMarkerTop
51 |         );
52 |     }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/core/templates/evaluators/textual/TextualEvaluator.ts:
--------------------------------------------------------------------------------
 1 | import { EvaluatorValueType, Evaluator } from "../Evaluator";
 2 | import { TextualEvaluatorSettings, deriveTextualEvaluatorSettingsFromDefaults } from "./TextualEvaluatorSettings";
 3 | 
 4 | export class TextualEvaluator extends Evaluator<
 5 |     EvaluatorValueType.Text,
 6 |     TextualEvaluatorSettings
 7 | > {
 8 |     readonly type = EvaluatorValueType.Text;
 9 | 
10 |     constructor(partialSettings: Partial<TextualEvaluatorSettings> = {}) {
11 |         super(
12 |             partialSettings,
13 |             deriveTextualEvaluatorSettingsFromDefaults
14 |         );
15 |     }
16 | 
17 |     protected convertRawValueToValue(text: string): string {
18 |         return this.settings.ignorePairsOfDelimiters
19 |             ? TextualEvaluator.trimPairsOfIdenticDelimitersOff(text, this.settings.ignorePairsOfDelimiters)
20 |             : text;
21 |     }
22 | 
23 |     protected convertValueToRawValue(newValue: string): string {
24 |         if (this.settings.ignorePairsOfDelimiters) {
25 |             const delimiter = this.settings.ignorePairsOfDelimiters[0];
26 |             return `${delimiter}${newValue}${delimiter}`;
27 |         }
28 | 
29 |         return newValue;
30 |     }
31 | 
32 |     protected static trimPairsOfIdenticDelimitersOff(text: string, delimiters: string[]): string {
33 |         const textLength = text.length;
34 |         if (textLength < 2) {
35 |             console.warn(`The text "${text}" was not trimmed: it contains <2 characters.`);
36 |             return text;
37 |         }
38 | 
39 |         const firstCharacter = text[0];
40 |         const firstCharacterIsADelimiter = delimiters.includes(firstCharacter);
41 |         if (firstCharacterIsADelimiter) {
42 |             const lastCharacter = text[textLength - 1];
43 |             const lastCharacterIsTheSameDelimiter = lastCharacter === firstCharacter;
44 | 
45 |             if (lastCharacterIsTheSameDelimiter) {
46 |                 return text.substring(1, textLength - 1);
47 |             }
48 |         }
49 | 
50 |         return text;
51 |     }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/utilities/array.ts:
--------------------------------------------------------------------------------
 1 | export function ensureArrayHasLength<T>(array: T[], targetLength: number, padElement: T): T[] {
 2 |     const arrayLength = array.length;
 3 |     
 4 |     if (arrayLength === targetLength) {
 5 |         return array;
 6 |     }
 7 |     else if (arrayLength < targetLength) {
 8 |         const nbMissingElements = targetLength - arrayLength;
 9 |         return array.concat(new Array(nbMissingElements).fill(padElement));
10 |     }
11 |     else {
12 |         return array.slice(0, targetLength);
13 |     }
14 | }
15 | 
16 | // Note: the insertion index must be in the range [0, max. index + 1],
17 | // i.e. it can be higher than the index of the last element of the array.
18 | // This is required to support insertion at the end of the array.
19 | export function moveElementsByIndex<T>(
20 |     array: T[],
21 |     movedElementIndices: number[],
22 |     insertionIndex: number
23 | ): T[] {
24 |     const newArray: T[] = [];
25 |     const insertionIndexIsOutsideOfArray = insertionIndex === array.length;
26 | 
27 |     for (let i = 0; i <= array.length; i++) {
28 |         // Case 1: the current index is the insertion index.
29 |         if (i === insertionIndex) {
30 |             const movedElements = array.filter((row, index) => movedElementIndices.includes(index));
31 |             const movedElementIndicesIncludeCurrentIndex = movedElementIndices.includes(i);
32 |             
33 |             newArray.push(...movedElements);
34 |             if (!movedElementIndicesIncludeCurrentIndex && !insertionIndexIsOutsideOfArray) {
35 |                 newArray.push(array[i]);
36 |             }
37 |         }
38 |         // Case 2: the current index is the index of a row that is being moved.
39 |         else if (movedElementIndices.includes(i)) {
40 |             continue;
41 |         }
42 |         // Case 3: the current index is the index of a row that is NOT being moved.
43 |         // We must ensure the current index is valid before inserting the row at that index.
44 |         else if (i < array.length) {
45 |             newArray.push(array[i]);
46 |         }
47 |     }
48 | 
49 |     return newArray;
50 | }
51 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/regex-editor/RegexEditorComponent.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactElement } from "react";
 2 | import "./regex-editor.css";
 3 | import { InputGroup, Label } from "@blueprintjs/core";
 4 | import { Range } from "../../../core/documents/Range";
 5 | import { LargeRegexDiagramComponent } from "./LargeRegexDiagramComponent";
 6 | import { SplitRegex } from "../../../utilities/SplitRegex";
 7 | 
 8 | type Props = {
 9 |     regex: RegExp;
10 |     regexRange: Range | null;
11 |     onChange?: (regexBody: string, regexFlags: string) => void;
12 | };
13 | 
14 | export class RegexEditorComponent extends React.Component<Props> {
15 |     private createEditor(): ReactElement {
16 |         const splitRegex = SplitRegex.fromRegex(this.props.regex);
17 | 
18 |         return <div className="regex-editor">
19 |             <Label className="regex-body">
20 |                 Regular expression (without <span style={{fontFamily: "monospace"}}>/</span> delimiters)
21 |                 <InputGroup
22 |                     defaultValue={splitRegex.body}
23 |                     onChange={event => this.props.onChange && this.props.onChange(
24 |                         event.target.value,
25 |                         splitRegex.flags
26 |                     )}
27 |                     large={true}
28 |                 />
29 |             </Label>
30 |             <Label className="regex-flags">
31 |                 Flags
32 |                 <InputGroup
33 |                     defaultValue={splitRegex.flags}
34 |                     onChange={event => this.props.onChange && this.props.onChange(
35 |                         splitRegex.body,
36 |                         event.target.value
37 |                     )}
38 |                     large={true}
39 |                 />
40 |             </Label>
41 |         </div>;
42 |     }
43 | 
44 |     render() {
45 |         return <div className="regex-editor-with-diagram">
46 |             { this.createEditor() }
47 |             <LargeRegexDiagramComponent
48 |                 regex={this.props.regex}
49 |                 regexRange={this.props.regexRange}
50 |             />
51 |         </div>;
52 |     }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/presets/languages/python/nodes/NamedAccessNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { PythonSyntaxTreeNode } from "../PythonSyntaxTreeNode";
 3 | import { PythonParserContext } from "../PythonParser";
 4 | import { IdentifierNode } from "./IdentifierNode";
 5 | import { BooleanNode } from "./BooleanNode";
 6 | import { FunctionCallNode } from "./FunctionCallNode";
 7 | import { IndexedAccessNode } from "./IndexedAccessNode";
 8 | import { StringNode } from "./StringNode";
 9 | import { NumberNode } from "./NumberNode";
10 | import { convertParserNode } from "../PythonSyntaxTree";
11 | import { Document } from "../../../../core/documents/Document";
12 | 
13 | export type IndexableExpressionNode =
14 |     | IdentifierNode
15 |     | NamedAccessNode
16 |     | IndexedAccessNode
17 |     | FunctionCallNode
18 |     | StringNode
19 |     | NumberNode
20 |     | BooleanNode;
21 | 
22 | export class NamedAccessNode extends PythonSyntaxTreeNode {
23 |     static readonly type = "NamedAccess";
24 |     readonly type = NamedAccessNode.type;
25 | 
26 |     readonly expression: IndexableExpressionNode;
27 |     readonly identifier: IdentifierNode;
28 | 
29 |     constructor(
30 |         expression: IndexableExpressionNode,
31 |         identifier: IdentifierNode,
32 |         parserNode: any,
33 |         range: Range,
34 |         sourceDocument: Document
35 |     ) {
36 |         super(parserNode, range, sourceDocument);
37 |         this.expression = expression;
38 |         this.identifier = identifier;
39 |     }
40 | 
41 |     get childNodes(): PythonSyntaxTreeNode[] {
42 |         return [this.expression, this.identifier];
43 |     }
44 | 
45 |     static fromNearlyParserResultNode(node: any, parserContext: PythonParserContext): NamedAccessNode {
46 |         return new NamedAccessNode(
47 |             convertParserNode(node.expression, parserContext) as IndexableExpressionNode,
48 |             IdentifierNode.fromNearlyParserResultNode(node.identifier, parserContext),
49 |             node,
50 |             NamedAccessNode.computeRangeFromParserNode(node, parserContext),
51 |             parserContext.sourceDocument
52 |         );
53 |     }
54 | }


--------------------------------------------------------------------------------
/src/presets/languages/python/PythonParser.ts:
--------------------------------------------------------------------------------
 1 | import nearley from "nearley";
 2 | import grammar from "./grammar/python.grammar";
 3 | import { Position } from "../../../core/documents/Position";
 4 | import { Parser } from "../../../core/languages/Parser";
 5 | import { PythonSyntaxTree } from "./PythonSyntaxTree";
 6 | import { Document } from "../../../core/documents/Document";
 7 | 
 8 | export interface PythonParserContext {
 9 |     text: string;
10 |     sourceDocument: Document;
11 |     offsetToPositionConverter: (offset: number) => Position;
12 | }
13 | 
14 | export class PythonParser implements Parser {
15 |     private nearleyParser: nearley.Parser;
16 | 
17 |     constructor() {
18 |         this.nearleyParser = this.createNewParser();
19 |     }
20 | 
21 |     private createNewParser(): nearley.Parser {
22 |         return new nearley.Parser(
23 |             nearley.Grammar.fromCompiled(grammar),
24 |             { keepHistory: false }
25 |         );
26 |     }
27 | 
28 |     async parse(document: Document): Promise<PythonSyntaxTree> {
29 |         const text = document.content;
30 |         const offsetToPositionConverter = Position.getOffsetToPositionConverterForText(text);
31 |         const parsingContext = {
32 |             text: text,
33 |             sourceDocument: document,
34 |             offsetToPositionConverter: offsetToPositionConverter
35 |         };
36 | 
37 |         // The parser must be re-created: no better way to clear what has been fed earlier?
38 |         this.nearleyParser = this.createNewParser();
39 |         this.nearleyParser.feed(text);
40 | 
41 |         const results = this.nearleyParser.results;
42 |         const nbResults = results.length;
43 | 
44 |         if (nbResults === 0) {
45 |             throw new Error("The Python parser returned no result.");
46 |         }
47 |         else {
48 |             const result = results[0];
49 |             if (nbResults > 1) {
50 |                 console.warn("The Python parser returned more than one result; only the first one is going to be used.", results);
51 |             }
52 | 
53 |             return PythonSyntaxTree.fromNearlyParserResult(result, parsingContext);
54 |         }
55 |     }
56 | }


--------------------------------------------------------------------------------
/src/presets/languages/python/nodes/IndexedAccessNode.ts:
--------------------------------------------------------------------------------
 1 | import { Range } from "../../../../core/documents/Range";
 2 | import { PythonSyntaxTreeNode } from "../PythonSyntaxTreeNode";
 3 | import { PythonParserContext } from "../PythonParser";
 4 | import { ExpressionNode } from "./ExpressionNode";
 5 | import { BooleanNode } from "./BooleanNode";
 6 | import { FunctionCallNode } from "./FunctionCallNode";
 7 | import { IdentifierNode } from "./IdentifierNode";
 8 | import { NamedAccessNode } from "./NamedAccessNode";
 9 | import { StringNode } from "./StringNode";
10 | import { NumberNode } from "./NumberNode";
11 | import { convertParserNode } from "../PythonSyntaxTree";
12 | import { Document } from "../../../../core/documents/Document";
13 | 
14 | export type IndexableExpressionNode =
15 |     | IdentifierNode
16 |     | NamedAccessNode
17 |     | IndexedAccessNode
18 |     | FunctionCallNode
19 |     | StringNode
20 |     | NumberNode
21 |     | BooleanNode;
22 | 
23 | export class IndexedAccessNode extends PythonSyntaxTreeNode {
24 |     static readonly type = "IndexedAccess";
25 |     readonly type = IndexedAccessNode.type;
26 | 
27 |     readonly expression: IndexableExpressionNode;
28 |     readonly index: ExpressionNode;
29 | 
30 |     constructor(
31 |         expression: IndexableExpressionNode,
32 |         index: ExpressionNode,
33 |         parserNode: any,
34 |         range: Range,
35 |         sourceDocument: Document
36 |     ) {
37 |         super(parserNode, range, sourceDocument);
38 |         this.expression = expression;
39 |         this.index = index;
40 |     }
41 | 
42 |     get childNodes(): PythonSyntaxTreeNode[] {
43 |         return [this.expression, this.index];
44 |     }
45 | 
46 |     static fromNearlyParserResultNode(node: any, parserContext: PythonParserContext): IndexedAccessNode {
47 |         return new IndexedAccessNode(
48 |             convertParserNode(node.expression, parserContext) as IndexableExpressionNode,
49 |             ExpressionNode.fromNearlyParserResultNode(node.index, parserContext),
50 |             node,
51 |             IndexedAccessNode.computeRangeFromParserNode(node, parserContext),
52 |             parserContext.sourceDocument
53 |         );
54 |     }
55 | }


--------------------------------------------------------------------------------
/src/presets/user-interfaces/object-inspector/ObjectInspector.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import { Projection } from "../../../core/projections/Projection";
 3 | import { UserInterface, UserInterfaceOutput } from "../../../core/user-interfaces/UserInterface";
 4 | import { ConfigurableUserInterfaceProvider } from "../../../core/user-interfaces/UserInterfaceProvider";
 5 | import { ObjectInspectorComponent } from "./ObjectInspectorComponent";
 6 | import { UserInterfaceSettings } from "../../../core/user-interfaces/UserInterfaceSettings";
 7 | 
 8 | export type Input = any;
 9 | export interface Output extends UserInterfaceOutput {}
10 | 
11 | export class ObjectInspector extends UserInterface<Input, Output> {
12 |     readonly className = "object-inspector";
13 |     private input: any;
14 |     private component: ObjectInspectorComponent | null;
15 | 
16 |     constructor(projection: Projection) {
17 |         super(projection);
18 | 
19 |         this.input = {};
20 |         this.component = null;
21 |     }
22 | 
23 |     setInput(newInput: any): void {
24 |         this.input = newInput;
25 |         this.updateViewContent();
26 |     }
27 | 
28 |     createViewContent(): JSX.Element {
29 |         return <ObjectInspectorComponent
30 |             initialInput={this.input}
31 |             ref={component => this.component = component}
32 |         />;
33 |     }
34 | 
35 |     updateViewContent(): void {
36 |         if (!this.component) {
37 |             return;
38 |         }
39 | 
40 |         this.component.setState({
41 |             input: this.input
42 |         });
43 |     }
44 | 
45 |     protected get modelOutput(): Output {
46 |         return {};
47 |     }
48 | 
49 |     protected processInput(input: Input): void {
50 |         // TODO: check input
51 |         this.setInput(input);
52 |         console.log("Updated object inspector model with:", input);
53 |     }
54 | 
55 |     static makeConfigurableProvider(): ConfigurableUserInterfaceProvider {
56 |         return (settings: Partial<UserInterfaceSettings> = {}) => {
57 |             return {
58 |                 provide: (projection: Projection) => {
59 |                     return new ObjectInspector(projection);
60 |                 }
61 |             };  
62 |         };
63 |     }
64 | }


--------------------------------------------------------------------------------
/src/presets/projections/regex-literal-diagram.ts:
--------------------------------------------------------------------------------
 1 | import { TreePatternFinder } from "../../core/fragments/syntactic/TreePatternFinder";
 2 | import { SyntaxTreePattern } from "../../core/languages/SyntaxTreePattern";
 3 | import { ProgrammableBackwardMapping } from "../../core/mappings/ProgrammableBackwardMapping";
 4 | import { ProjectionSpecification } from "../../core/projections/ProjectionSpecification";
 5 | import { SyntacticFragment } from "../../core/fragments/syntactic/SyntacticFragment";
 6 | import { ProgrammableForwardMapping } from "../../core/mappings/ProgrammableForwardMapping";
 7 | 
 8 | const forwardMapping = new ProgrammableForwardMapping<SyntacticFragment>(({ fragment }) => {
 9 |     const regexAsString = fragment.text;
10 |     const lastRegexLiteralSlashIndex = regexAsString.lastIndexOf("/");
11 |     
12 |     const regexBody = regexAsString.slice(1, lastRegexLiteralSlashIndex);
13 |     const regexFlags = regexAsString.slice(lastRegexLiteralSlashIndex + 1);
14 |     
15 |     try {
16 |         return {
17 |             regex: new RegExp(regexBody, regexFlags),
18 |             range: fragment.range
19 |         };
20 |     }
21 |     catch (error) {
22 |         console.error("Error while constructing a regex:", error);
23 |         return { regex: new RegExp("") };
24 |     }
25 | });
26 | 
27 | const backwardMapping = new ProgrammableBackwardMapping<SyntacticFragment>(({ userInterfaceOutput, documentEditor, fragment  }) => {
28 |     const regex = userInterfaceOutput.regex;
29 |     
30 |     const regexRange = fragment.node.range;
31 |     documentEditor.replace(regexRange, regex.toString());
32 |     documentEditor.applyEdits();
33 | });
34 | 
35 | export const regexLiteralDiagramSpecification: ProjectionSpecification<SyntacticFragment> = {
36 |     name: "Regex literal diagram",
37 | 
38 |     requirements: { languages: ["typescript"] },
39 | 
40 |     pattern: new TreePatternFinder(new SyntaxTreePattern(n => n.type === "RegularExpressionLiteral")),
41 | 
42 |     forwardMapping: forwardMapping,
43 | 
44 |     backwardMapping: backwardMapping,
45 | 
46 |     userInterface: "regex-editor",
47 |     
48 |     renderer: {
49 |         name: "button-popup",
50 |         settings: { buttonContent: "📊" }
51 |     }
52 | };
53 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/form/form-elements/NumberInput.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactElement } from "react";
 2 | import { NumericInput } from "@blueprintjs/core";
 3 | import { FormEntryType, FormEntryValueOfType } from "../FormEntry";
 4 | import { FormElement, FormElementProps, FormElementValueChangeListener } from "./FormElement";
 5 | 
 6 | type SupportedEntryTypes = FormEntryType.Number;
 7 | 
 8 | export interface NumberInputProps extends FormElementProps<SupportedEntryTypes> {
 9 |     defaultValue?: number;
10 |     min?: number;
11 |     max?: number;
12 |     step?: number;
13 |     hideButtons?: boolean;
14 | }
15 | 
16 | export class NumberInput extends FormElement<SupportedEntryTypes, NumberInputProps> {
17 |     protected readonly supportedFormEntryTypes = [FormEntryType.Number] as SupportedEntryTypes[];
18 | 
19 |     protected renderControlWithoutValue(
20 |         declareValueChange: FormElementValueChangeListener<SupportedEntryTypes>,
21 |         beginTransientState: () => void,
22 |         endTransientState: () => void
23 |     ): ReactElement | null {
24 |         const defaultValue = this.props.defaultValue;
25 |         return defaultValue !== undefined
26 |             ? this.renderControl(defaultValue, declareValueChange, beginTransientState, endTransientState)
27 |             : null;
28 |     }
29 | 
30 |     protected renderControl(
31 |         value: FormEntryValueOfType<SupportedEntryTypes>,
32 |         declareValueChange: FormElementValueChangeListener<SupportedEntryTypes>,
33 |         beginTransientState: () => void,
34 |         endTransientState: () => void
35 |     ): ReactElement {
36 |         return <NumericInput
37 |             defaultValue={value}
38 |             onValueChange={newValue => declareValueChange(newValue, this.supportedFormEntryTypes[0])}
39 |             onFocus={event => beginTransientState()}
40 |             onBlur={event => endTransientState()}
41 |             min={this.props.min}
42 |             max={this.props.max}
43 |             stepSize={this.props.step}
44 |             buttonPosition={this.props.hideButtons ? "none" : "right"}
45 |             style={{
46 |                 width: 60,
47 |                 ...this.props.style
48 |             }}
49 |         />;
50 |     }
51 | }


--------------------------------------------------------------------------------
/src/presets/languages/json/JsonParser.ts:
--------------------------------------------------------------------------------
 1 | import nearley from "nearley";
 2 | import grammar from "./grammar/json.grammar";
 3 | import { Position } from "../../../core/documents/Position";
 4 | import { Parser } from "../../../core/languages/Parser";
 5 | import { JsonSyntaxTree } from "./JsonSyntaxTree";
 6 | import { Document } from "../../../core/documents/Document";
 7 | 
 8 | export interface JsonParserContext {
 9 |     text: string;
10 |     sourceDocument: Document;
11 |     offsetToPositionConverter: (offset: number) => Position;
12 | }
13 | 
14 | export class JsonParser implements Parser {
15 |     private nearleyParser: nearley.Parser;
16 | 
17 |     constructor() {
18 |         this.nearleyParser = this.createNewParser();
19 |     }
20 | 
21 |     private createNewParser(): nearley.Parser {
22 |         return new nearley.Parser(
23 |             nearley.Grammar.fromCompiled(grammar),
24 |             { keepHistory: false }
25 |         );
26 |     }
27 | 
28 |     async parse(document: Document): Promise<JsonSyntaxTree> {
29 |         const text = document.content;
30 |         const offsetToPositionConverter = Position.getOffsetToPositionConverterForText(text);
31 |         const parsingContext = {
32 |             text: text,
33 |             sourceDocument: document,
34 |             offsetToPositionConverter: offsetToPositionConverter
35 |         };
36 | 
37 |         // The parser must be re-created: no better way to clear what has been fed earlier?
38 |         this.nearleyParser = this.createNewParser();
39 |         this.nearleyParser.feed(text);
40 | 
41 |         const results = this.nearleyParser.results;
42 |         const nbResults = results.length;
43 | 
44 |         if (nbResults === 0) {
45 |             console.warn("JSON parser result: ", this.nearleyParser.results);
46 |             throw new Error("The JSON parser returned no result.");
47 |         }
48 |         else {
49 |             const result = results[0];
50 |             if (nbResults > 1) {
51 |                 console.warn("The JSON parser returned more than one result; only the first one is going to be used.", results);
52 |             }
53 | 
54 |             return JsonSyntaxTree.fromNearlyParserResult(result, parsingContext);
55 |         }
56 |     }
57 | }


--------------------------------------------------------------------------------
/src/presets/languages/python/PythonSyntaxTree.ts:
--------------------------------------------------------------------------------
 1 | import { SyntaxTree } from "../../../core/languages/SyntaxTree";
 2 | import { PythonSyntaxTreeNode } from "./PythonSyntaxTreeNode";
 3 | import { PythonParserContext } from "./PythonParser";
 4 | import { FunctionCallNode } from "./nodes/FunctionCallNode";
 5 | import { ExpressionNode } from "./nodes/ExpressionNode";
 6 | import { StringNode } from "./nodes/StringNode";
 7 | import { BooleanNode } from "./nodes/BooleanNode";
 8 | import { NoneNode } from "./nodes/NoneNode";
 9 | import { NamedAccessNode } from "./nodes/NamedAccessNode";
10 | import { IndexedAccessNode } from "./nodes/IndexedAccessNode";
11 | import { ProgramNode } from "./nodes/ProgramNode";
12 | import { ArgumentListNode } from "./nodes/ArgumentListNode";
13 | import { PositionalArgumentNode } from "./nodes/PositionalArgumentNode";
14 | import { NamedArgumentNode } from "./nodes/NamedArgumentNode";
15 | import { IdentifierNode } from "./nodes/IdentifierNode";
16 | import { NumberNode } from "./nodes/NumberNode";
17 | 
18 | export const PYTHON_NODE_CLASSES = [
19 |     ProgramNode,
20 |     ExpressionNode,
21 |     IdentifierNode,
22 |     NamedAccessNode,
23 |     IndexedAccessNode,
24 |     FunctionCallNode,
25 |     ArgumentListNode,
26 |     PositionalArgumentNode,
27 |     NamedArgumentNode,
28 |     StringNode,
29 |     NumberNode,
30 |     BooleanNode,
31 |     NoneNode
32 | ] as const;
33 | 
34 | export function convertParserNode(
35 |     parserNode: any,
36 |     parserContext: PythonParserContext
37 | ) {
38 |     const parserNodeType = parserNode.type;
39 |     const nodeClass = PYTHON_NODE_CLASSES.find(nodeClass => nodeClass.type === parserNodeType);
40 |     if (!nodeClass) {
41 |         throw new Error(`Unknown Python syntax tree node type: ${parserNodeType}`);
42 |     }
43 | 
44 |     return nodeClass.fromNearlyParserResultNode(parserNode, parserContext);
45 | }
46 | 
47 | export class PythonSyntaxTree extends SyntaxTree<PythonSyntaxTreeNode> {
48 |     static fromNearlyParserResult(result: any, parserContext: PythonParserContext): PythonSyntaxTree {
49 |         const rootNode = ProgramNode.fromNearlyParserResultNode(result, parserContext);
50 |         return new PythonSyntaxTree(rootNode);
51 |     } 
52 | }
53 | 
54 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/form/form-elements/EditableText.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactElement } from "react";
 2 | import { EditableText as BlueprintEditableText } from "@blueprintjs/core";
 3 | import { FormEntryType, FormEntryValueOfType } from "../FormEntry";
 4 | import { FormElement, FormElementProps, FormElementValueChangeListener } from "./FormElement";
 5 | 
 6 | type SupportedEntryTypes = FormEntryType.String;
 7 | 
 8 | export interface EditableTextProps extends FormElementProps<SupportedEntryTypes> {
 9 |     defaultValue?: string;
10 |     multiline?: boolean;
11 | }
12 | 
13 | export class EditableText extends FormElement<SupportedEntryTypes, EditableTextProps> {
14 |     protected readonly supportedFormEntryTypes = [FormEntryType.String] as SupportedEntryTypes[];
15 | 
16 |     protected renderControlWithoutValue(
17 |         declareValueChange: FormElementValueChangeListener<SupportedEntryTypes>,
18 |         beginTransientState: () => void,
19 |         endTransientState: () => void
20 |     ): ReactElement | null {
21 |         const defaultValue = this.props.defaultValue;
22 |         return defaultValue !== undefined
23 |             ? this.renderControl(defaultValue, declareValueChange, beginTransientState, endTransientState)
24 |             : null;
25 |     }
26 |     
27 |     protected renderControl(
28 |         value: FormEntryValueOfType<SupportedEntryTypes>,
29 |         declareValueChange: FormElementValueChangeListener<SupportedEntryTypes>,
30 |         beginTransientState: () => void,
31 |         endTransientState: () => void
32 |     ): ReactElement {
33 |         return <BlueprintEditableText
34 |             defaultValue={value}
35 |             onChange={newValue => declareValueChange(newValue, this.supportedFormEntryTypes[0])}
36 |             onEdit={value => {
37 |                 beginTransientState();
38 |             }}
39 |             onConfirm={newValue => {
40 |                 // declareValueChange(newValue, this.supportedFormEntryTypes[0])
41 |                 endTransientState();
42 |             }}
43 |             onCancel={oldValue => {
44 |                 // declareValueChange(oldValue, this.supportedFormEntryTypes[0])
45 |                 endTransientState();
46 |             }}
47 |         />;
48 |     }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/presets/projections/runtime-value-tracer.ts:
--------------------------------------------------------------------------------
 1 | import { RegexPatternFinder } from "../../core/fragments/textual/RegexPatternFinder";
 2 | import { ProgrammableRuntimeRequestProvider } from "../../core/runtime/request-providers/ProgrammableRuntimeRequestProvider";
 3 | import { RuntimeRequest } from "../../core/runtime/RuntimeRequest";
 4 | import { SideRendererPosition } from "../renderers/side/SideRendererSettings";
 5 | import { ProjectionSpecification } from "../../core/projections/ProjectionSpecification";
 6 | import { ProgrammableForwardMapping } from "../../core/mappings/ProgrammableForwardMapping";
 7 | import { TextualFragment } from "../../core/fragments/textual/TextualFragment";
 8 | 
 9 | export const runtimeValueTracerSpecification: ProjectionSpecification<TextualFragment> = {
10 |     name: "Runtime value tracer",
11 | 
12 |     requirements: { languages: ["typescript"] },
13 | 
14 |     pattern: new RegexPatternFinder("/\\*\\s*trace\\s*:\\s*\\w+\\s*\\*/"),
15 | 
16 |     runtimeRequest: new ProgrammableRuntimeRequestProvider(({ fragment }) => {
17 |         const variableName = fragment.text
18 |             .slice(
19 |                 fragment.text.indexOf(":") + 1,
20 |                 fragment.text.length - 2
21 |             )
22 |             .trim();
23 |         
24 |         return [
25 |             RuntimeRequest.createForFragment(fragment, "variableValue", variableName)
26 |         ];
27 |     }),
28 | 
29 |     forwardMapping: new ProgrammableForwardMapping(({ runtimeResponses }) => {
30 |         return {
31 |             valueChanges: runtimeResponses.map(response => {
32 |                 const responseContentAsNumber = Number(response.content);
33 |                 return {
34 |                     value: Number.isNaN(responseContentAsNumber)
35 |                         ? response.content
36 |                         : responseContentAsNumber,
37 |                     timestamp: response.receptionTime
38 |                 };
39 |             })
40 |         };
41 |     }),
42 | 
43 |     userInterface: "value-history",
44 |     
45 |     renderer: {
46 |         name: "side",
47 |         settings: {
48 |             onlyShowWhenCursorIsInRange: false,
49 |             position: SideRendererPosition.RightSideOfCode,
50 |             positionOffset: 100
51 |         }
52 |     }
53 | };


--------------------------------------------------------------------------------
/src/core/templates/syntactic/TreePatternTemplate.ts:
--------------------------------------------------------------------------------
 1 | import { Document } from "../../documents/Document";
 2 | import { FragmentProvider } from "../../fragments/FragmentProvider";
 3 | import { FragmentType } from "../../fragments/FragmentType";
 4 | import { SyntacticFragment } from "../../fragments/syntactic/SyntacticFragment";
 5 | import { TreePatternFinder } from "../../fragments/syntactic/TreePatternFinder";
 6 | import { SyntaxTreePattern } from "../../languages/SyntaxTreePattern";
 7 | import { Template, deriveTemplateSettingsFromDefaults, TemplateSettings } from "../Template";
 8 | import { SyntacticTemplateSlot } from "./SyntacticTemplateSlot";
 9 | 
10 | export type TreePatternTemplateSlotProvider =
11 |     (fragment: SyntacticFragment, document: Document) => SyntacticTemplateSlot[];
12 | 
13 | export abstract class TreePatternTemplate extends Template<SyntacticTemplateSlot, SyntacticFragment, TemplateSettings> {
14 |     protected treePatternFinder: TreePatternFinder;
15 | 
16 |     constructor(partialSettings: Partial<TemplateSettings> = {}) {
17 |         super(partialSettings, deriveTemplateSettingsFromDefaults);
18 |         this.treePatternFinder = new TreePatternFinder(this.createSyntaxTreePattern());
19 |     }
20 |     protected abstract createSyntaxTreePattern(): SyntaxTreePattern;
21 | 
22 |     protected abstract provideSlotsForFragment(fragment: SyntacticFragment, document: Document): SyntacticTemplateSlot[];
23 | 
24 |     protected async provideFragmentsForDocument(document: Document): Promise<SyntacticFragment[]> {
25 |         const fragments = await this.treePatternFinder.provideFragmentsForDocument(document);
26 | 
27 |         this.fragmentsToKeysToSlots.clear();
28 |         for (let fragment of fragments) {
29 |             const slots = this.provideSlotsForFragment(fragment, document);
30 |             this.fragmentsToKeysToSlots.set(
31 |                 fragment,
32 |                 new Map(slots.map(slot => [slot.key, slot]))
33 |             );
34 |         }
35 | 
36 |         return fragments;
37 |     }
38 | 
39 |     protected getFragmentProvider(): FragmentProvider<SyntacticFragment> {
40 |         return {
41 |             type: FragmentType.Syntactic,
42 |             provideFragmentsForDocument: this.provideFragmentsForDocument.bind(this)
43 |         };
44 |     }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/presets/languages/typescript/TypescriptSyntaxTreeNode.ts:
--------------------------------------------------------------------------------
 1 | import { SyntaxTreeNode } from "../../../core/languages/SyntaxTreeNode";
 2 | import { ts } from "ts-morph";
 3 | import { Range } from "../../../core/documents/Range";
 4 | import { TypescriptParserContext } from "./TypescriptParser";
 5 | import { Document } from "../../../core/documents/Document";
 6 | 
 7 | export class TypescriptSyntaxTreeNode extends SyntaxTreeNode {
 8 |     readonly type: string;
 9 |     readonly range: Range;
10 |     readonly childNodes: TypescriptSyntaxTreeNode[];
11 |     readonly parserNode: ts.Node;
12 | 
13 |     constructor(
14 |         type: string,
15 |         range: Range,
16 |         childNodes: TypescriptSyntaxTreeNode[],
17 |         parserNode: ts.Node,
18 |         sourceDocument: Document
19 |     ) {
20 |         super(sourceDocument);
21 | 
22 |         this.type = type;
23 |         this.range  = range;
24 |         this.childNodes = childNodes;
25 |         this.parserNode = parserNode;
26 |     }
27 | 
28 |     get text(): string {
29 |         return this.parserNode.getText();
30 |     }
31 | 
32 |     protected static computeRangeFromParserNode(parserNode: ts.Node, parserContext: TypescriptParserContext): Range {
33 |         const startOffset = parserNode.getStart();
34 |         const endOffset = parserNode.getEnd();
35 | 
36 |         return new Range(
37 |             parserContext.offsetToPositionConverter(startOffset),
38 |             parserContext.offsetToPositionConverter(endOffset)
39 |         );
40 |     }
41 | 
42 |     static fromTsMorphNode(parserNode: ts.Node, parserContext: TypescriptParserContext): TypescriptSyntaxTreeNode {
43 |         // Recursively create TS syntax tree nodes for all the descendants.
44 |         const childNodes = parserNode.getChildren()
45 |             .map(childNode => TypescriptSyntaxTreeNode.fromTsMorphNode(childNode, parserContext));
46 | 
47 |         const nameOfKind = (kind: ts.SyntaxKind): string =>
48 |             (ts.SyntaxKind)[kind];
49 | 
50 |         const node = new TypescriptSyntaxTreeNode(
51 |             parserNode.kind ? nameOfKind(parserNode.kind) : "UNKNOWN",
52 |             TypescriptSyntaxTreeNode.computeRangeFromParserNode(parserNode, parserContext),
53 |             childNodes,
54 |             parserNode,
55 |             parserContext.sourceDocument
56 |         );
57 | 
58 |         return node;
59 |     }
60 | }
61 | 
62 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/regex-editor/RegexEditor.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import { Range } from "../../../core/documents/Range";
 3 | import { Projection } from "../../../core/projections/Projection";
 4 | import { UserInterface, UserInterfaceInput, UserInterfaceOutput } from "../../../core/user-interfaces/UserInterface";
 5 | import { ConfigurableUserInterfaceProvider } from "../../../core/user-interfaces/UserInterfaceProvider";
 6 | import { RegexEditorComponent } from "./RegexEditorComponent";
 7 | import { UserInterfaceSettings } from "../../../core/user-interfaces/UserInterfaceSettings";
 8 | 
 9 | export interface Input extends UserInterfaceInput {
10 |     regex: RegExp;
11 |     range?: Range;
12 | }
13 | 
14 | export interface Output extends UserInterfaceOutput {
15 |     regex: RegExp;
16 | }
17 | 
18 | export class RegexEditor extends UserInterface<Input, Output> {
19 |     readonly className = "regex-editor";
20 | 
21 |     private regex: RegExp;
22 |     private regexRange: Range | null;
23 | 
24 |     constructor(projection: Projection) {
25 |         super(projection);
26 | 
27 |         this.regex = RegExp("");
28 |         this.regexRange = null;
29 |     }
30 | 
31 |     setInput(newInput: Input): void {
32 |         this.regex = newInput.regex;
33 |         this.regexRange = newInput.range ?? null;
34 |     }
35 | 
36 |     createViewContent(): JSX.Element {
37 |         const props = {
38 |             regex: this.regex,
39 |             regexRange: this.regexRange,
40 |             onChange: (regexContent: string, regexFlags: string) => {
41 |                 this.regex = new RegExp(regexContent, regexFlags);
42 |                 this.declareModelChange();
43 |             }
44 |         };
45 | 
46 |         return <RegexEditorComponent {...props} />;
47 |     }
48 | 
49 |     protected get modelOutput(): Output {
50 |         return {
51 |             regex: this.regex
52 |         };
53 |     }
54 | 
55 |     protected processInput(input: Input): void {
56 |         // TODO: check input
57 |         this.setInput(input);
58 |     }
59 | 
60 |     static makeConfigurableProvider(): ConfigurableUserInterfaceProvider {
61 |         return (settings: Partial<UserInterfaceSettings> = {}) => {
62 |             return {
63 |                 provide: (projection: Projection) => {
64 |                     return new RegexEditor(projection);
65 |                 }
66 |             };  
67 |         };
68 |     }
69 | }


--------------------------------------------------------------------------------
/src/core/lorgnette/LorgnetteContext.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from "react";
 3 | import { Language } from "../languages/Language";
 4 | import { Document } from "../documents/Document";
 5 | import { ABSOLUTE_ORIGIN_POSITION, Position } from "../documents/Position";
 6 | import { EMPTY_RANGE, Range } from "../documents/Range";
 7 | import { ConfigurableRendererProvider } from "../renderers/RendererProvider";
 8 | import { ConfigurableUserInterfaceProvider } from "../user-interfaces/UserInterfaceProvider";
 9 | import { PLAIN_TEXT_LANGUAGE } from "../languages/plain-text";
10 | import { LorgnetteEnvironmentState } from "./LorgnetteEnvironment";
11 | import { ProjectionSpecification } from "../projections/ProjectionSpecification";
12 | 
13 | // Create the React context that will be provided by the Projection environment.
14 | // Note: the object contains default values; the actual values will be in
15 | // the Projection environment provider's state.
16 | export const LorgnetteContext = React.createContext<LorgnetteEnvironmentState>({
17 |     codeEditorCursorPosition: ABSOLUTE_ORIGIN_POSITION,
18 |     setCodeEditorCursorPosition: (position: Position) => {},
19 |   
20 |     codeEditorVisibleRange: EMPTY_RANGE,
21 |     setCodeEditorVisibleRange: (range: Range) => {},
22 |   
23 |     codeEditorHoveredRanges: [],
24 |     setCodeEditorHoveredRanges: (ranges: Range[]) => {},
25 |   
26 |     codeEditorSelectedRanges: [],
27 |     setCodeEditorSelectedRanges: (ranges: Range[]) => {},
28 |   
29 |     document: new Document(PLAIN_TEXT_LANGUAGE, ""),
30 |     setDocument: (document: Document) => {},
31 |     setDocumentContent: (content: string) => {},
32 |     
33 |     languages: [],
34 |     registerLanguage: (language: Language) => {},
35 |     unregisterLanguage: (name: string) => {},
36 | 
37 |     userInterfaceNamesToConfigurableProviders: new Map(),
38 |     registerUserInterface: (name: string, configurableProvider: ConfigurableUserInterfaceProvider) => {},
39 |     unregisterUserInterface: (name: string) => {},
40 |   
41 |     rendererNamesToConfigurableProviders: new Map(),
42 |     registerRenderer: (name: string, configurableProvider: ConfigurableRendererProvider) => {},
43 |     unregisterRenderer: (name: string) => {},
44 |   
45 |     projectionProviders: [],
46 |     registerProjection: (specification: ProjectionSpecification) => {},
47 |     unregisterProjection: (name: string) => {},
48 | 
49 |     projections: []
50 | });
51 | 
52 | LorgnetteContext.displayName = "Lorgnette context";
53 | 


--------------------------------------------------------------------------------
/src/presets/languages/markdown/MarkdownSyntaxTreeNode.ts:
--------------------------------------------------------------------------------
 1 | import { Document } from "../../../core/documents/Document";
 2 | import { Position } from "../../../core/documents/Position";
 3 | import { Range } from "../../../core/documents/Range";
 4 | import { SyntaxTreeNode } from "../../../core/languages/SyntaxTreeNode";
 5 | import { MarkdownParserContext } from "./MarkdownParser";
 6 | 
 7 | export interface ParserNodePosition {
 8 |     line: number;
 9 |     column: number;
10 |     offset: number;
11 | }
12 | 
13 | export interface ParserNodeRange {
14 |     start: ParserNodePosition;
15 |     end: ParserNodePosition;
16 | }
17 | 
18 | export interface ParserNode {
19 |     type: string;
20 |     position: ParserNodeRange;
21 |     children?: ParserNode[];
22 | }
23 | 
24 | export class MarkdownSyntaxTreeNode extends SyntaxTreeNode {
25 |     readonly type: string;
26 |     readonly range: Range;
27 |     readonly childNodes: MarkdownSyntaxTreeNode[];
28 |     readonly parserNode: ParserNode;
29 | 
30 |     constructor(
31 |         type: string,
32 |         range: Range,
33 |         childNodes: MarkdownSyntaxTreeNode[],
34 |         parserNode: ParserNode,
35 |         sourceDocument: Document
36 |     ) {
37 |         super(sourceDocument);
38 | 
39 |         this.type = type;
40 |         this.range  = range;
41 |         this.childNodes = childNodes;
42 |         this.parserNode = parserNode;
43 |     }
44 | 
45 |     static fromParserNode(parserNode: ParserNode, parserContext: MarkdownParserContext): MarkdownSyntaxTreeNode {
46 |         const type = parserNode.type;
47 |         const range = MarkdownSyntaxTreeNode.getRangeFromParserNode(parserNode);
48 |         // const text = parserContext.text.slice(range.start.offset, range.end.offset);
49 |         const childNodes = parserNode.children
50 |             ? parserNode.children.map(
51 |                 childParserNode => MarkdownSyntaxTreeNode.fromParserNode(childParserNode, parserContext)
52 |             )
53 |             : [];
54 | 
55 |         return new MarkdownSyntaxTreeNode(type, range, childNodes, parserNode, parserContext.sourceDocument);
56 |     }
57 | 
58 | 
59 |     private static getRangeFromParserNode(parserNode: ParserNode): Range {
60 |         const start = parserNode.position.start;
61 |         const end = parserNode.position.end;
62 | 
63 |         return new Range(
64 |             new Position(start.line - 1, start.column - 1, start.offset),
65 |             new Position(end.line - 1, end.column - 1, end.offset)
66 |         );
67 |     }
68 | }
69 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/form/form-elements/Button.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactElement } from "react";
 2 | import { Button as BlueprintButton } from "@blueprintjs/core";
 3 | import { FormEntryType, FormEntryValueOfType } from "../FormEntry";
 4 | import { AnyEntryTypeSymbol, ANY_ENTRY_TYPES, FormElement, FormElementProps, FormElementValueChangeListener } from "./FormElement";
 5 | import { evaluateCondition, ValueCondition } from "../../../../utilities/ValueCondition";
 6 | import { evaluate, Valuable } from "../../../../utilities/Valuable";
 7 | 
 8 | type SupportedEntryTypes = FormEntryType;
 9 | 
10 | export interface ButtonProps<T extends SupportedEntryTypes> extends FormElementProps<T> {
11 |     text: Valuable<string | ReactElement, FormEntryValueOfType<T> | null>;
12 |     valueWithType: Valuable<[FormEntryValueOfType<T>, T], FormEntryValueOfType<T> | null>;
13 |     activateOn?: ValueCondition<FormEntryValueOfType<T> | null>;
14 |     disableOn?: ValueCondition<FormEntryValueOfType<T> | null>;
15 |     showWithoutValue?: boolean;
16 | }
17 | 
18 | export class Button<T extends SupportedEntryTypes> extends FormElement<T, ButtonProps<T>> {
19 |     protected readonly supportedFormEntryTypes: AnyEntryTypeSymbol = ANY_ENTRY_TYPES;
20 | 
21 |     protected isButtonActive(value: FormEntryValueOfType<T> | null): boolean {
22 |         return evaluateCondition(
23 |             this.props.activateOn ?? (() => false),
24 |             value
25 |         );
26 |     }
27 | 
28 |     protected isButtonDisabled(value: FormEntryValueOfType<T> | null): boolean {
29 |         return evaluateCondition(
30 |             this.props.disableOn ?? (() => false),
31 |             value
32 |         );
33 |     }
34 | 
35 |     protected renderControlWithoutValue(
36 |         declareValueChange: FormElementValueChangeListener<T>
37 |     ): ReactElement | null {
38 |         return this.props.showWithoutValue
39 |             ? this.renderControl(null, declareValueChange)
40 |             : null;
41 |     }
42 | 
43 |     protected renderControl(
44 |         value: FormEntryValueOfType<T> | null,
45 |         declareValueChange: FormElementValueChangeListener<T>
46 |     ): ReactElement {
47 |         return <BlueprintButton
48 |             text={evaluate(this.props.text, value)}
49 |             active={this.isButtonActive(value)}
50 |             disabled={this.isButtonDisabled(value)}
51 |             style={this.props.style}
52 |             onClick={event => { declareValueChange(...evaluate(this.props.valueWithType, value));}}
53 |         />;
54 |     }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/presets/user-interfaces/regex-editor/RegulexIframe.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from "react";
 3 | import { SplitRegex } from "../../../utilities/SplitRegex";
 4 | 
 5 | type Props = {
 6 |     splitRegex: SplitRegex;
 7 |     htmlAttributes: Record<string, string>;
 8 | };
 9 | 
10 | export class RegulexIframe extends React.PureComponent<Props> {
11 |     private iframeContainerRef: React.RefObject<HTMLDivElement>;
12 | 
13 |     constructor(props: Props) {
14 |         super(props);
15 |         this.iframeContainerRef = React.createRef();
16 |     }
17 | 
18 |     private get url(): string {
19 |         const encodedRegexBody = encodeURIComponent(this.props.splitRegex.body);
20 |         const encodedRegexFlags = encodeURIComponent(this.props.splitRegex.flags);
21 | 
22 |         return `https://jex.im/regulex/#!embed=true&flags=${encodedRegexFlags}&re=${encodedRegexBody}`;
23 |     }
24 | 
25 |     private dynamicallyCreateIframe(): void {
26 |         const containerNode = this.iframeContainerRef.current;
27 |         const htmlAttributesAsText = Object.entries(this.props.htmlAttributes)
28 |             .map(([key, value]) => `${key}="${value.replace("\"", "\\\"")}"`)
29 |             .join("\n");
30 | 
31 |         if (containerNode) {
32 |             containerNode.innerHTML = `
33 |                 <iframe
34 |                     src="${this.url}"
35 |                     sandbox="allow-scripts"
36 |                     ${htmlAttributesAsText}
37 |                 ></iframe>
38 |             `;
39 |         }
40 |     }
41 | 
42 |     componentDidUpdate(previousProps: Props) {
43 |         if (previousProps.splitRegex.isEqualTo(this.props.splitRegex)) {
44 |             return;
45 |         }
46 | 
47 |         const containerNode = this.iframeContainerRef.current;
48 |         if (!containerNode) {
49 |             console.warn("The iframe cannot be (re)created: the ref. to the container does not exist.", containerNode);
50 |             return;
51 |         }
52 | 
53 |         this.dynamicallyCreateIframe();
54 |     }
55 | 
56 |     componentDidMount() {
57 |         const containerNode = this.iframeContainerRef.current;
58 |         if (!containerNode) {
59 |             console.warn("The iframe cannot be (re)created: the ref. to the container does not exist.", containerNode);
60 |             return;
61 |         }
62 | 
63 |         this.dynamicallyCreateIframe();
64 |     }
65 | 
66 |     render() {
67 |         return <div
68 |             ref={this.iframeContainerRef}
69 |             className="iframe-container"
70 |         />;
71 |     }
72 | }


--------------------------------------------------------------------------------
/src/presets/user-interfaces/color-picker/ColorPicker.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import { BLACK, Color } from "../../../utilities/Color";
 3 | import { RgbColorPicker } from "../../../utilities/components/color-pickers/RgbColorPicker";
 4 | import { Projection } from "../../../core/projections/Projection";
 5 | import { UserInterface, UserInterfaceOutput } from "../../../core/user-interfaces/UserInterface";
 6 | import { ConfigurableUserInterfaceProvider } from "../../../core/user-interfaces/UserInterfaceProvider";
 7 | import { UserInterfaceSettings } from "../../../core/user-interfaces/UserInterfaceSettings";
 8 | 
 9 | export interface Input extends UserInterfaceOutput {
10 |     color: Color
11 | }
12 | 
13 | export interface Output extends UserInterfaceOutput {
14 |     color: Color
15 | }
16 | 
17 | export class ColorPicker extends UserInterface<Input, Output> {
18 |     readonly className = "color-picker";
19 |     private color: Color;
20 | 
21 |     constructor(projection: Projection, color: Color = BLACK) {
22 |         super(projection);
23 |         this.color = color;
24 |     }
25 | 
26 |     protected get minDelayBetweenModelChangeNotifications(): number {
27 |         return 100; // ms
28 |     }
29 | 
30 |     setColor(newColor: Color): void {
31 |         this.color = newColor;
32 |     }
33 | 
34 |     createViewContent(): JSX.Element {
35 |         const onChange = (newColor: Color) => {
36 |             this.color = newColor;
37 |             this.declareModelChange();
38 |         };
39 | 
40 |         const onDragStart = () => {
41 |             // this.isCurrentlyUsed = true;
42 |             this.beginTransientState();
43 |         };
44 | 
45 |         const onDragEnd = () => {
46 |             // this.isCurrentlyUsed = false;
47 |             this.endTransientState();
48 |             this.declareModelChange(true);
49 |         };
50 | 
51 |         return <RgbColorPicker
52 |             color={this.color}
53 |             onChange={onChange}
54 |             onDragStart={onDragStart}
55 |             onDragEnd={onDragEnd}
56 |         />;
57 |     }
58 | 
59 |     protected get modelOutput(): Output {
60 |         return {
61 |             color: this.color
62 |         };
63 |     }
64 | 
65 |     protected processInput(input: Input): void {
66 |         // TODO: check input
67 |         this.setColor(input.color);
68 |     }
69 | 
70 |     static makeConfigurableProvider(): ConfigurableUserInterfaceProvider {
71 |         return (settings: Partial<UserInterfaceSettings> = {}) => {
72 |             return {
73 |                 provide: (projection: Projection) => {
74 |                     return new ColorPicker(projection);
75 |                 }
76 |             };  
77 |         };
78 |     }
79 | }


--------------------------------------------------------------------------------