pax_global_header00006660000000000000000000000064150630351750014517gustar00rootroot0000000000000052 comment=5799bb1a3e2efaea1bcb364739d6bae765bb5eaf code-input-js/000077500000000000000000000000001506303517500135445ustar00rootroot00000000000000code-input-js/.github/000077500000000000000000000000001506303517500151045ustar00rootroot00000000000000code-input-js/.github/workflows/000077500000000000000000000000001506303517500171415ustar00rootroot00000000000000code-input-js/.github/workflows/minify.yml000066400000000000000000000012031506303517500211530ustar00rootroot00000000000000name: Auto-minify on: push: branches: - main jobs: Minify: runs-on: ubuntu-latest steps: # Checks-out your repository under $GITHUB_WORKSPACE, so auto-minify job can access it - uses: actions/checkout@v2 - name: Auto Minify uses: nizarmah/auto-minify@v2.1 # Auto commits minified files to the repository # Ignore it if you don't want to commit the files to the repository - name: Auto committing minified files uses: stefanzweifel/git-auto-commit-action@v4 with: commit_message: "Auto Minified JS and CSS files" branch: ${{ github.ref }}code-input-js/.github/workflows/npm-publish.yml000066400000000000000000000010651506303517500221240ustar00rootroot00000000000000# This workflow will publish a package to GitHub Packages when a release is created # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages name: Node.js Package on: release: types: [created] jobs: publish-npm: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 22 registry-url: https://registry.npmjs.org/ - run: npm publish env: NODE_AUTH_TOKEN: ${{secrets.npm_token}} code-input-js/.gitignore000066400000000000000000000000311506303517500155260ustar00rootroot00000000000000.vscode debug.html debug/code-input-js/.npmignore000066400000000000000000000000631506303517500155420ustar00rootroot00000000000000.github/ tests/ CODE_OF_CONDUCT.md CONTRIBUTING.md code-input-js/CODE_OF_CONDUCT.md000066400000000000000000000123471506303517500163520ustar00rootroot00000000000000# Contributor Covenant Code of Conduct 🎉 This project is fuelled by open-source contributions, but to sustain this community we need to all follow the rules below. ## Our Pledge We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. ## Our Standards Examples of behavior that contributes to a positive environment for our community include: * Demonstrating empathy and kindness toward other people * Being respectful of differing opinions, viewpoints, and experiences * Giving and gracefully accepting constructive feedback * Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience * Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: * The use of sexualized language or imagery, and sexual attention or advances of any kind * Trolling, insulting or derogatory comments, and personal or political attacks * Public or private harassment * Publishing others' private information, such as a physical or email address, without their explicit permission * Other conduct which could reasonably be considered inappropriate in a professional setting ## Enforcement Responsibilities Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate. ## Scope This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at legal@webcoder49.dev. All complaints will be reviewed and investigated promptly and fairly. All community leaders are obligated to respect the privacy and security of the reporter of any incident. ## Enforcement Guidelines Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: ### 1. Correction **Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. **Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. ### 2. Warning **Community Impact**: A violation through a single incident or series of actions. **Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. ### 3. Temporary Ban **Community Impact**: A serious violation of community standards, including sustained inappropriate behavior. **Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. ### 4. Permanent Ban **Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. **Consequence**: A permanent ban from any sort of public interaction within the community. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity). [homepage]: https://www.contributor-covenant.org For answers to common questions about this code of conduct, see the FAQ at https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations. code-input-js/CONTRIBUTING.md000066400000000000000000000071311506303517500157770ustar00rootroot00000000000000# Contributing to `code-input` 🎉**Here at `code-input`, contributions of all sizes are more than welcome. Below are some scenarios where you could contribute and how to do so.** Contributions are generally accepted when they help achieve at least one of the aims below, but others will be considered: * The `code-input` element should act like a normal HTML `textarea` in all browsers, working with all of the normal attributes, events and other types of behaviour. * The `code-input` element should be easy to use with all popular syntax-highlighting libraries. * Any modifications of `code-input` that would be useful for the open-source community but are not core to this functionality should be available as optional plugins in the `plugins` folder. Here's where most feature contributions will go. We will generally *not* consider the following contributions: * Excess functionality and/or complexity in the main code-input files - these types of contributions should go in the plugin folder instead. * Issues that have been closed as not planned in the past (you can search the issue list to check), unless you bring a change that overcomes the reason they were not planned. This said, if you're not sure whether your change will be accepted, please ask in an issue. --- To keep this community productive and enjoyable, please [don't break our code of conduct](https://github.com/WebCoder49/code-input/blob/main/CODE_OF_CONDUCT.md). --- # Ways you could contribute: If you don't want to use GitHub, for all of these you can alternatively [get in touch via email so the maintainer can add your contribution for you](mailto:code-input-js@webcoder49.dev). ## 1. I've found a bug but don't know how / don't have time to fix it. If you think you've found a bug, please [submit an issue](https://github.com/WebCoder49/code-input/issues) with screenshots, how you found the bug, and copies of the console's logs if an error is in them. Please also mention the template and plugins you used (your `codeInput.registerTemplate(...)` snippet). We'd be more than happy to help you fix it. A demo using [CodePen](https://codepen.io/) would be incredibly useful. ## 2. I have implemented a feature / have thought of a potential feature for the library and think it could be useful for others. The best way to implement a feature is as a plugin like those in the `plugins` folder of `code-input`. If you do this, you could contribute it as in point 3 below. Otherwise, if you do not have the time needed / do not want to implement it, any potential plugins would be [welcome as an Issue](https://github.com/WebCoder49/code-input/issues) which specifies the uses and desired characteristics. ## 3. I want to contribute code that I need / have seen in the Issues. Firstly, thank you for doing this! This is probably the most time consuming way of contributing but is also the most rewarding for both you and me as a maintainer. Please first open an issue if one doesn't already exist, and assign yourself to it. Then, [make a fork of the repo and submit a pull request](https://docs.github.com/en/get-started/quickstart/contributing-to-projects). In the pull request, include the code updates for your feature / bug, and if you're adding a new feature make sure you comment your code so it's understandable to future contributors, and if you can, add unit tests for it in tests/tester.js. If you have any questions, just let me (@WebCoder49) know! If an issue is open but already assigned to someone, it is probably already being worked on - you could still suggest a method of fixing it in the comments but shouldn't open a pull request as it would waste your time. code-input-js/LICENSE000066400000000000000000000021021506303517500145440ustar00rootroot00000000000000MIT License Copyright (c) 2021-2025 Oliver Geer and contributors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. code-input-js/README.md000066400000000000000000000050071506303517500150250ustar00rootroot00000000000000# code-input ![Click to Switch](https://img.shields.io/static/v1?label=&message=Click%20to%20Switch:%20&color=grey&style=for-the-badge)[![Website and Demos](https://img.shields.io/static/v1?label=&message=Website&color=black&style=for-the-badge)](https://code-input-js.org)[![GitHub](https://img.shields.io/static/v1?label=&message=GitHub&color=navy&style=for-the-badge&logo=github)](https://github.com/WebCoder49/code-input)[![Yarn](https://img.shields.io/static/v1?label=&message=Yarn&color=purple&style=for-the-badge&logo=yarn)](https://yarnpkg.com/package?name=@webcoder49/code-input)[![NPM](https://img.shields.io/static/v1?label=&message=NPM&color=red&style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@webcoder49/code-input) [![View License](https://img.shields.io/github/license/webcoder49/code-input?style=for-the-badge)](LICENSE) [![View Releases](https://img.sHields.io/github/v/release/webcoder49/code-input?style=for-the-badge)](https://github.com/WebCoder49/code-input/releases) > **An editable <textarea> that supports *any* syntax highlighting algorithm, for code or something else. Also, added plugins.** > > Aiming to be more flexible, lightweight, modular, progressively enhanced and standards-based than the alternatives, we support HTML forms, the ` ``` ### Tutorials by Example #### Prism.js Code Editor (use **with vanilla HTML here** or [with ECMAScript Modules/Vue/Nuxt](modules-and-frameworks/prism)) {#playground-preset-prism} ``` code-input: Prism.js Code Editor ``` #### highlight.js Code Editor (use **with vanilla HTML here** or [with ECMAScript Modules/Vue/Nuxt](modules-and-frameworks/hljs)) {#playground-preset-hljs} ``` code-input: highlight.js Code Editor ``` #### Editor with Custom Highlighting Algorithm (use **with vanilla HTML here** or [with ECMAScript Modules/Vue/Nuxt](modules-and-frameworks/custom)) {#playground-preset-custom} ``` code-input: Editor with Custom Highlighting Algorithm ``` {{< /playground >}} Next, you can [style your `code-input`](interface/css) and use it in [JavaScript](interface/js) or [HTML5 Forms](interface/forms). ## Features
Choose Any Highlighter
Use the built in templates for [Prism.js](#playground-preset-prism) or [highlight.js](#playground-preset-hljs), or [pass in any function to highlight a normal HTML element](#playground-preset-custom), and `code-input.js` will do the editability for you. What will you create?
Extensible With Plugins
Want coding features like easy indentation and closing of brackets, tools like find and replace and go to line, or better integration like custom autocomplete popups and processing of selected highlighted tokens? [Try a selection of the easy-to-use plugins.](plugins) Plugin not available? [Make one yourself as a JavaScript class!](plugins/new)
HTML Form and JavaScript `textarea` Interface Support
A `code-input` element's just a textarea with fancy bits added - get good support with few overheads!
Lightweight
The use of modular plugins, and native features like the `textarea` wherever possible, makes code-input more lightweight than most web-based code editors while having many of their features, plus more customisability and form support. We have plans to make it even more so!
Widely Usable and Progressively Enhanced
Works on any modern browser independent of whether a framework is used, with the standardised web component API. Integrates well into modular setups and web frameworks with TypeScript definitions, an ECMAScript Module build and [tutorials](modules-and-frameworks). Falls back to a `textarea` element when there is insufficient JavaScript support. The fallback even works on Lynx.
## Alternatives Here at `code-input.js`, we love getting the library to work in different setups, or receiving bug reports; flexibility is in its nature! Nevertheless, if `code-input.js` doesn\'t suit you on a more fundamental level, and you want a fully-featured, packaged but likely heavier code editing component, and don\'t need compatibility with different highlighters, HTML forms or textarea APIs, we recommend something like [CodeMirror](https://codemirror.net/), [Ace](https://ace.c9.io/) or [Monaco](https://microsoft.github.io/monaco-editor/). ## Read Enough? **If you don't need web framework integration, get started with the commented tutorials by example on this page, for [Prism.js](#playground-preset-prism), [highlight.js](#playground-preset-hljs), or [another highlighter](#playground-preset-custom). If you're using ECMAScript modules or a web framework, start [here](modules-and-frameworks).** ## Contribute Bug Reports / Code / Docs {#contributing} 🎉 code-input.js is collaboratively developed by many people, which is what keeps it going strong. Many have reported bugs and suggestions, and [10 people (see them on GitHub)](https://github.com/WebCoder49/code-input/graphs/contributors) have contributed code or documentation directly. If you have found a bug, would like to help with the code or documentation, or have additional suggestions, for plugins or core functionality, [please look at GitHub](https://github.com/WebCoder49/code-input/tree/main/CONTRIBUTING.md) or [get in touch via email so I can add it for you](mailto:code-input-js@webcoder49.dev). **Found a security vulnerability? [Please use this email address](mailto:security@webcoder49.dev), after reading ([this page with an encryption key](https://oliver.geer.im/#email)).** *I'm looking into mirroring code-input.js onto Codeberg as well as GitHub for more flexibility and freedom - if you have ideas for this please get in touch!* code-input-js/docs/i18n/000077500000000000000000000000001506303517500152535ustar00rootroot00000000000000code-input-js/docs/i18n/_index.md000066400000000000000000000052141506303517500170450ustar00rootroot00000000000000+++ title = 'Internationalising code-input.js' +++ # Internationalising code-input.js > Contributors: 2025 Oliver Geer ## Languages code-input.js defaults to using English text for its interface, but when you want it in a different language you can provide the translated text: **The core of code-input.js** contains one message shown only when CSS is supported but JavaScript has not been used to register the element. Translate it by writing the following CSS rule, replacing the text with its localised version. ```css code-input:not(.code-input_registered)::after { content: "No highlighting. JavaScript support is disabled or insufficient, or codeInput.registerTemplate has not been called."!important; } ``` It is only present for debugging and explanatory purposes when highlighting cannot be seen, and should not contain important or specific information about the editor state; if you need such information, especially for screen reader users, add separate text to your application which disappears after registering the code-input without errors. **Plugins** sometimes come with user interface features (e.g. the find-and-replace dialog) which contain text to be translated. The text is provided as an extra argument to the plugin constructor containing translated strings or functions to produce them for each translation key, with the keys and their English values found in either the `code-input.d.ts` or the plugin's source code file. Here's an example: ```javascript // CC-BY; Attribution: Translated by Oliver Geer with some help from English Wiktionary let findAndReplaceTranslations = { start: "Buscar términos en su código.", none: "No hay sucesos", oneFound: "1 suceso encontrado.", matchIndex: (index, count) => `${index} de ${count} sucesos.`, error: (message) => `Error: ${message}`, infiniteLoopError: "Causa un ciclo infinito", closeDialog: "Cerrar el Diálogo y Regresar al Editor", findPlaceholder: "Buscar", findCaseSensitive: "Prestar atención a las minúsculas/mayúsculas", findRegExp: "Utilizar expresión regular de JavaScript", replaceTitle: "Reemplazar", replacePlaceholder: "Reemplazar con", findNext: "Buscar Suceso Próximo", findPrevious: "Buscar Suceso Previo", replaceActionShort: "Reemplazar", replaceAction: "Reemplazar este Suceso", replaceAllActionShort: "Reemplazar Todos", replaceAllAction: "Reemplazar Todos los Sucesos" }; // ... // passed when the plugin is constructed: new codeInput.plugins.FindAndReplace(true, true, findAndReplaceTranslations), ``` ## Other * code-input.js has supported text bidirectionality using the HTML `dir` attribute since version 2.5. code-input-js/docs/interface/000077500000000000000000000000001506303517500164345ustar00rootroot00000000000000code-input-js/docs/interface/_index.md000066400000000000000000000001471506303517500202260ustar00rootroot00000000000000+++ title = 'How `code-input.js` works with native HTML+CSS+JS features - swap out any `textarea`' +++ code-input-js/docs/interface/css/000077500000000000000000000000001506303517500172245ustar00rootroot00000000000000code-input-js/docs/interface/css/_index.md000066400000000000000000000022101506303517500210070ustar00rootroot00000000000000+++ title = 'Styling `code-input` elements with CSS' +++ # Styling `code-input` elements with CSS > Contributors: 2025 Oliver Geer `code-input` elements can be styled like `textarea` elements in most cases; however, there are some exceptions: * The CSS variable `--padding` should be used rather than the property `padding` (e.g. `...`), or `--padding-left`, `--padding-right`, `--padding-top` and `--padding-bottom` instead of the CSS properties of the same names. For technical reasons, the value must have a unit (i.e. `0px`, not `0`). * Background colours set on `code-input` elements will not work with highlighters that set background colours themselves - use `(code-input's selector) pre[class*="language-"]` for Prism.js or `.hljs` for highlight.js to target the highlighted element with higher specificity than the highlighter's theme. You may also set the `background-color` of the code-input element for its appearance when its template is unregistered / there is no JavaScript. * For now, elements on top of `code-input` elements should have a CSS `z-index` at least 3 greater than the `code-input` element. code-input-js/docs/interface/forms/000077500000000000000000000000001506303517500175625ustar00rootroot00000000000000code-input-js/docs/interface/forms/_index.md000066400000000000000000000014451506303517500213560ustar00rootroot00000000000000+++ title = '`code-input` in HTML5 Forms' +++ # `code-input` in HTML5 Forms > Contributors: 2025 Oliver Geer `code-input` elements support [HTML5 forms](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms#the_anatomy_of_a_form). Form-related HTML5 attributes and events on them will be passed to a `textarea` element inside them when they are registered, and whenever the attributes or events are later changed. This is a good time to make use of the fallback textarea which is used when JavaScript is disabled; the following code will send data to the HTML5 form correctly whether or not JavaScript is enabled: ```html
``` code-input-js/docs/interface/js/000077500000000000000000000000001506303517500170505ustar00rootroot00000000000000code-input-js/docs/interface/js/_index.md000066400000000000000000000012621506303517500206410ustar00rootroot00000000000000+++ title = '`code-input` vs the `textarea` in JavaScript' +++ # `code-input` vs the `textarea` in JavaScript > Contributors: 2025 Oliver Geer Once registered, `code-input` elements support the JavaScript properties and events used with a `textarea` element, because they are built around them. Try swapping out your `textarea` element in your JavaScript application for a `code-input`! If it doesn't work, [submit a bug report](https://github.com/WebCoder49/code-input/issues). If you want to replace a `textarea` with a `code-input` in an application that doesn't need JavaScript, [look here](../forms). We support HTML5 forms, and progressive enhancement so JavaScript isn't needed! code-input-js/docs/modules-and-frameworks/000077500000000000000000000000001506303517500210625ustar00rootroot00000000000000code-input-js/docs/modules-and-frameworks/_index.md000066400000000000000000000001171506303517500226510ustar00rootroot00000000000000+++ title = 'Using `code-input.js` with Module Systems and Web Frameworks' +++ code-input-js/docs/modules-and-frameworks/custom/000077500000000000000000000000001506303517500223745ustar00rootroot00000000000000code-input-js/docs/modules-and-frameworks/custom/_index.md000066400000000000000000000010301506303517500241560ustar00rootroot00000000000000+++ title = 'Using code-input.js with custom highlighting algorihms in projects which use modules or frameworks' +++ # Using code-input.js with custom highlighting algorithms in projects which use modules or frameworks > Contributors: 2025 Oliver Geer We plan to get documentation for this soon (contributions via a pull request are welcome!), but for now please use [the corresponding article for highlight.js](../hljs) and [the demo vanilla code for code-input and custom highlighting algorithms](../../#playground-preset-custom). code-input-js/docs/modules-and-frameworks/hljs/000077500000000000000000000000001506303517500220225ustar00rootroot00000000000000code-input-js/docs/modules-and-frameworks/hljs/_index.md000066400000000000000000000005601506303517500236130ustar00rootroot00000000000000+++ title = 'Using code-input.js with highlight.js in projects which use modules or frameworks' +++ # Using code-input.js with highlight.js in projects which use modules or frameworks > Contributors: 2025 Oliver Geer ## Quickstart with Frameworks * [Vue](vue) (with ESM) * [Nuxt](nuxt) (with ESM) ## Quickstart with Module Systems * [ECMAScript Modules (ESM)](esm) code-input-js/docs/modules-and-frameworks/hljs/esm/000077500000000000000000000000001506303517500226065ustar00rootroot00000000000000code-input-js/docs/modules-and-frameworks/hljs/esm/_index.md000066400000000000000000000102461506303517500244010ustar00rootroot00000000000000+++ title = 'How to use code-input and highlight.js with ECMAScript Modules (not framework-specific)' +++ # How to use code-input and highlight.js with ECMAScript Modules (not framework-specific) > Contributors: 2025 Oliver Geer These instructions will work anywhere [ECMAScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) are supported. If you want a tutorial specific to a web framework, please [look here](..). This is a client-side library so will not work in Node.js or similar environments. It is assumed that you have already researched and run an example frontend ECMAScript module (ESM) project using either a bundler like [esbuild](https://esbuild.github.io/) or [webpack](https://webpack.js.org), or newer browsers' direct ESM support (less browser compatibility but easier when debugging); setting them up is not described here. You can [learn about ESM from the very basics here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). ## Building The ECMAScript modules in version 2 of the code-input.js library need to be "built" from the source files, because the source files are not in the ESM format. For builds from package managers like Yarn and NPM, the ESM files have already been built and are in the `esm` directory. When the code is downloaded or cloned from `git` source, the ESM directory contains files to do the building but not the built modules yet; follow the instructions in `esm/README.md` to run the build. ## Usage Here's how to use code-input and highlight.js with ECMAScript modules. ```javascript // Access the registerTemplate function and CodeInput (extends HTMLElement), // Template (custom highlighter) and Plugin (abstract class) classes inside the // imported codeInput object. import codeInput from "@webcoder49/code-input/code-input.mjs"; // Alternatively, use: // import { registerTemplate, CodeInput, Template, Plugin } from "@webcoder49/code-input/code-input.mjs" // Templates must be imported separately to avoid redundant code being imported // Use any name for the default import, not just "Template" import Template from "@webcoder49/code-input/templates/hljs.mjs"; // Plugins must be imported separately to avoid redundant code being imported // See them all at https://code-input-js.org/plugins // Use any name for the default import, not just "Indent" import Indent from "@webcoder49/code-input/plugins/indent.mjs"; // As per https://highlightjs.org/usage // You can import and register (in onMounted below) whichever languages you will use, // or if you will use many import all, following the instructions at https://highlightjs.org/#usage. import hljs from 'highlight.js/lib/core'; import javascript from 'highlight.js/lib/languages/javascript'; // Set up the highlighting engine first hljs.registerLanguage('javascript', javascript); // Register using the imported objects codeInput.registerTemplate("code-editor", new Template(hljs, [new Indent()])); ``` Note the `.mjs` extensions on code-input.js import paths. They are needed, and also make the next part easier: ## Import Paths The import paths above assume a package manager and `package.json` export paths are being used. In some setups, this will not work. You have two options (replace `node_modules/@webcoder49/code-input` with the relative path to the library, if it is different): * use relative paths instead: assuming you are importing from your project's root directory and have installed the libraries with a typical JS package manager, replace `"@webcoder49/code-input/path/to/file.mjs"` with `"./node_modules/@webcoder49/code-input/esm/path/to/file.mjs"` (note the `esm` directory). Also replace `"@webcoder49/code-input/path/to/file.mjs"` with `"./node_modules/@highlightjs/cdn-assets/es/path/to/file.mjs"` (note the `es` directory) *If you're not using an import map yet, I recommend this option because import maps are not supported on as many browsers.* * If you're using an [import map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#importing_modules_using_import_maps), add the following to it: ```json { "imports": { "@webcoder49/code-input": "./node_modules/@webcoder49/code-input/esm/", } } ``` code-input-js/docs/modules-and-frameworks/hljs/nuxt/000077500000000000000000000000001506303517500230205ustar00rootroot00000000000000code-input-js/docs/modules-and-frameworks/hljs/nuxt/_index.md000066400000000000000000000177021506303517500246170ustar00rootroot00000000000000+++ title = 'How to use code-input and highlight.js with Nuxt' +++ # How to use code-input and highlight.js with Nuxt > Contributors: 2025 Paul Rosen, 2025 Oliver Geer; **code samples licensed [MIT/Expat](https://spdx.org/licenses/MIT)** [Vue](../vue) and Nuxt have some similarities, but there is one big difference in how they can use this library. In Nuxt there is server side rendering (SSR) that will attempt to create the final HTML before sending the page to the browser. This cannot use any browser-specific things so the `code-input` component must be excluded from rendering until hydration in the browser. ## 1. Create a Nuxt app First, create a Nuxt project. (If you already have a Nuxt project then you can skip this step). On a command line, use your package manager to do so, for example by typing one of these: ```bash yarn create nuxt syntax-highlighter # OR npm create nuxt@latest syntax-highlighter ``` At the time this tutorial was created, the output was the following: ```plaintext Need to install the following packages: create-nuxt@3.27.0 Ok to proceed? (y) y > npx > "create-nuxt" syntax-highlighter .d$b. i$$A$$L .d$b .$$F` `$$L.$$A$$. j$$' `4$$:` `$$. j$$' .4$: `$$. j$$` .$$: `4$L :$$:____.d$$: _____.:$$: `4$$$$$$$$P` .i$$$$$$$$P` ℹ Welcome to Nuxt! ℹ Creating a new project in syntax-highlighter. ✔ Which package manager would you like to use? npm â— Installing dependencies... > postinstall > nuxt prepare ✔ Types generated in .nuxt added 882 packages, and audited 884 packages in 5m 185 packages are looking for funding run `npm fund` for details found 0 vulnerabilities ✔ Installation completed. ✔ Initialize git repository? No ✔ Would you like to install any of the official modules? Yes ✔ Pick the modules to install: none ✨ Nuxt project has been created with the v4 template. Next steps: › cd syntax-highlighter › Start development server with npm run dev ``` And just like the above instructions mention, do the following: ```bash cd syntax-highlighter yarn run dev # OR npm run dev # or your package manager's equivalent command ``` You should be able to open your browser to the path that it prints out and see a working Nuxt app. If so, congratulations! Hit Ctrl-C in the command line to stop it. ## 2. Add dependencies > This tutorial will use `highlight.js` for the syntax highlighting. If you are using a different method then adjust as needed. Type these 2 commands: ```bash yarn add @webcoder49/code-input # OR npm install @webcoder49/code-input # or your package manager's equivalent command yarn add highlight.js # OR npm install highlight.js # or your package manager's equivalent command ``` In the file `nuxt.config.ts`, after the line `compatibilityDate`, add this so that Vue knows that `code-input` is not a Vue component: ```javascript vue: { compilerOptions: { isCustomElement: (tag) => tag === "code-input", }, }, ``` > You might want to replace the second file with your own theme, but you need the first file. ## 3. Initialize a code-input element Create a component with whatever name you want. Perhaps `app/components/CodeEditor.vue`. Read the following code then paste it into the file: ```html ``` ## 4. Using the component In the generated file `app.vue`, place the following line after the "NuxtRouteAnnouncer" line: ```html ``` Nuxt will have already imported it by default, so you don't need to import the component in JavaScript. Restart the server: ```bash yarn run dev # OR npm run dev # or your package manager's equivalent command ``` If all went well, you should see the following in the browser: ![An editable syntax-highlighted textarea added to the Nuxt starter page.](nuxt-demo-screenshot.png) ## Please Note * Hot module replacement (the updating of a running app when files are changed) will not work completely correctly when the `CodeEditor` component is changed but will work when files that use it are changed. This is only important when running a development server. code-input-js/docs/modules-and-frameworks/hljs/nuxt/nuxt-demo-screenshot.png000066400000000000000000000566531506303517500276400ustar00rootroot00000000000000‰PNG  IHDRÈíŬW®\iCCPICC Profile(‘u=HBa†ûÁ(¡†Š†§ (3hU )Ä’~–¸^M>®F´547dDKk4´»DÔÞMµÕ¸TÜÎÕJ-:px^Î9ßù´84¥2m@6W4"¡€kiyÅeÁŽ“F@Ó ÊÏI ßÚ•[l–^Y³. ÝtiÛ]ºÉŸü­oŠÎx¢ ‹¾KúteÁæo•Å[½†,%¼gq²ÆÇÇj|Z­Yˆ…¯„{ô”~5øÉÎfÖõ¯¬í‰\t^t@r9B¸ˆŠ.ÁÏ"3L1ýO¯Ú$bƒ4IRe‚_E†„ð 9tÜŒ {ñHNX·þ}ú§úaò@žzª{«÷PvB÷NÝz–ïÌÂÅ™Ò í粶J[amÜ[ã®2´ï›æë"؇áãÎ4ßʦùq­p^ù eyn‡pVeXIfMM*‡i’†D È íASCIIScreenshot7õ=eÖiTXtXML:com.adobe.xmp 493 968 Screenshot ž=5@IDATxíÝ œUy0ð3ç !  ‚¬*¨u׊(È"`U\PƒK­ZÛú}Ÿ¶î­»¶¢m­u­kkÕ*UPpß"‹;‚$Ad afîýÎó&7Þ 3sï$“d’ó?¿ßdîònçÏ…yÞsÎs†¾ò•¯tžô¤'%… @€Ô,GGGk®¿º @€ @€F Ç¿N @€¨Z ·Z­444T5‚Ê @€ @€C¬µ @€ PšdC¬µ @€¨] ™ƒ\;‚ú @€ @€<22b²v@€ @€Õ ÿþ÷¿O—_qyŠ@Y!@€ @€µ Gë‹yqZ¹re­êM€ @€ <ìáK .¼K‡Ûívóâczì]Þô @€ØšÎüá™V'Gkë Oèã  @€¨D —’,óTɧ­š @€ 0®À 7܆ÇãÚx‘ @€*X±bEºøâ‹S³rô"+ @€ @ F+¯¼²©v3囨«Fu&@€ @€ºn¿ýö ï¾ûî’tÕÝÔž @€U ŒŒŒ4õÏ£££UC¨< @€<<ññ´Çc›†Ö3©ZëâÓ¾’¾öÒ—­mÌû?í©é·½5ÍÙu—µ¯Ýrå•é{o|sºôß\ûÚS>ñŸiß#Hyxxíkëû Ô0>å”SÒW\‘N=õÔæPÏþóÓ¬Y³Ò#ñˆôœç<'ÍŸ?}O±Î~Ë—/Oïz×»ÒÅ_œº7„¾üå/¯³ÍÖüä¥-_ý“ó×Vq·GöÆ3Ö>Ÿî»ý z½—_~yÓƾûÝï¦g?ûÙM›êÝ÷¯xUºñ²%iöÜÓÓ?óéÞ·6ùã[¯¾&}åoþÏ:ç}Úg>•¶;w×&zrõ¦Óßúé 7¾.íö¨G­Ýì÷ç—~øöw6ÏñÿþOº÷ŽZû^<ØXß¹uNÒó$>‹÷¿ÿýÍ+Ûo¿}zÒ“ž”þâ/þ¢g   @€›W $°Î©ÓîLÛUDÁ%—\’Þýîw7ÁñÞ{ïÝð¦=DàÒ-‹-j‚â¯ýëÍÍ?þñ»omÐï“N:)ýêW¿J÷¿ÿýÓ _øÂæÆÇp ÛyûwNs÷Ú+íp¯{¥Û®½¦ü\»…Õ`j—ßÙw¾óé¥/}iŠ€ì ƒjþ4ö(#·ßž"€¼ý†ƾµÉŸ·fÏJ»<ðOšŸ‘òߪ¸®öw|wÜ|ÓšºÜ¸Î>³wرy=Ž·M HÇ–õ{žîó¸Aú·û·ééO{zjµZé _øBúýïß}Ûo @€Àfžî5cøÜ™gž™þð‡?¤ú§J~ðƒ›e¤"pŽsm® 9Îý›ßü¦ ”âæ‰Ê¶ÛnÛpGqDÚu×]›?â&ÚvK{=zïwÌÓšŸÛË°÷3Ž{gŠ alÙáž÷LOýä'Ê“vZzúÒÉÏ{þØMÖëù’%KÒë_ÿú¦÷ïÿþï›À¥÷@OyÊSRü\xá…é­o}kzÇ;Þ‘Ž; õn7ÕÇç•à nEд¹ÚßT¯y:·ßûñOñ3Zzî¿úW5‡÷X«ýŒ{²q^ü×ý×töÙg§ûÞ÷¾é-oyKŠ›sã•…ûïWFT|9í|¿ýÇ{{“¾¶]-qØ;ÞÞœóìOºæg?›–óÏÛ{¯µÇ™¿ÏÞkwl¬ï\÷øcÇS<òÈæå½öÞ+½÷½ïM?ùÉOÒn»í6vSÏ  @€›E [=óÐn/W ›Ýc=Òî»ï¾våL†7`xnôßzë­Î]‹^£xÿúë¯oæoˆævÛm×\û6Ûl3áaâ|7ß|sŠá»Qç~†ý®ÂóÆhéYº£Ìíî” ÜRnF¬ºå–t{±ˆm7z‰óûÛ®¹6­¼ù–&°{Îð‰Qáö‚¼à.ÁqïöyÈCÒ«^õªæ¥û·KÑ«¿!eáÂ…Íy7ô8r ö\ zMÿPFvÜqã)¦LTâ½èñ]Y¾{åKw—Í/^œÎ:ë¬ÃwÿñÿqÂà8vÜé>÷iöïþ¾ËÁ¶‚†gÏNó÷Ù§©Iܸ˜¨L÷wn¢óô¾~KùoT”ø~* @€™"0Ãܦ£W-‚N¯-Ã7#)WÃ1”9æ›Fï]ÌAŽù¥§vZ3¬îo|ãÚùÈ·Ýv[úä'?™~VzMâõøƒéÓŸþtÓ³óÓ~úÓŸ¦o~sõ|ØÃ;¬™K=qÝx-[¶¬™ï=…ݲçž{6óë¢;…E0¿#˜áÓQï(q;í´Sº±üaþž÷¼'ýüç?o^žä˜3ý°‡=lŸ8_ô„~üãO¿øÅ/šmãŸ*½1QÏè=ôú×`€¸nyúég>›ÎyÿÓ-W]Õô?êïþ.-¸oùC?Ö².×vÓï~—~vüÿ¦s>ðÍ÷:äqe^âëÓÎexñúÎ]žìÒ"¨9ÿ¿>±ö|±íƒ_ðéQ÷²ÔûyôèÅÐõ?ù“?IÏ|æ3';dóÞã÷¸ÁÎ駟ž¾öµ¯5¶}wš`ƒýöÛ¯ù¬âs‹^Åõ-(7C~ú©O¥ë/þM]yGš³Ë®ÍÐå•úÎ*Ÿ{”«JoدN<1ÝZ>ŸÖìmÓÂý÷O~ñ_¦mçÍkÞðìwý[Ó£»Ó}î~y 麟ÿ"m_Úüÿâùi—=¨Ù.þ¹¾Ì™þùg?›nþÝå¦ÃhšµãŽé£Ê̓áÒ>£D{üM™Ë½¬ôôßqÊf›Ý8 = ´Çõ™/×wñ—¾ÔÔãÎ[oKsË÷èaÿç%én÷¸Gs¾éþçÎò]¹øÔÓÒ7_õšµ‡Þóq§ƒÞðº´Ki+Ý6{gùÞ^~ÆÓyúH3d¸»ñÎ÷¿_zÂÞ—v)¹¢|øÃn~¿ímoKw»ÛÝšÇý³Ó¾û6oítï{¯³Éâ~,ÅœÞ'ì#Í맿åmé–«¯NGü£Íó‹þç3)æY?öuÿÐ<_V®ëœ÷ ýÓÅiÏò;¸|ç¶+kÌwËO>öñ´äû§§g~îøtá§>ÝÔùŠsÎm‚×ç}ý+ivùl§R¢-^úõo¤%ßû~ºþ7—¤öèÄ7v~ÀýÓ¬9sÖZNtž~ß¹hk¯|å+›!Ñ1ã>kn0Lt¼~¯ÇTœ(ñýT @€3E b=rô|ô£m‚šnåþáVÿr ­`s*%ÙèAŒrò‡gŸßûÞ÷ÒÝï~÷tÌ1Ç4÷¯ýëôïÿþïMл Fó˜Ç4Ánlz¾1ß5‚ïn‰¡ßÝ[ôVFoñCúÐf¨_lûŽW®.(ÿ×ýWpuÔQÍö1¤üóŸÿ|Š úÉO~òÚÝú]ÿìÒ»3h‰Ú¯½ìïšÍçî¹Gÿö[ßiæÆêñÇøŠË.KßÓ[Òµ%à:ðµ¯NÑ{tQ ¨øŽN‡¿ó©w¸å çl»è-ŽãG0þ€EÏJ÷:ðÑ隟þ,]ðߟlÎý¨Wü]Š¡£Q"ÈòÂ2xÐÛF€üÕ¯~uƒä{•¹·Q®*AëúÈ7-»ô!éšóž÷¦£þãƒiV ìbÀYÿü/Íußë Ç¦˜G|S¹tÓÒ¥ëŒ8¯´í«KP>¯{{~xsMK¾õ­´¢L'x\O;oÔçŸèÅ=óíoozr#P9«¿/óÀOÓ›ÒŸ•À³5…öÚçTÍÛ1ºá²o§ Ž÷xìcÒ~%aÜÊ ¶ó>üÑtæ?ÿk:ô¸JÄÆuýòÄ/¤ï¼î Í~@LJ+J@Ú^VÚÜ”‹ÿÜï~÷ë{ ó÷Ý'=ù£N÷xøºÿ]jßÉ쾜Žzï¿77ž~òŸÿÕkE 袷yÉw¿—æMýêä/•¤w[n@Ý/vÜÛ›9Þñ}ˆz½è̬M²µ¢$-\öƒ3Òþé¸øÞ‡Zî=&]~æ&í1¯ñ½;ñÏjãû<é‰i¿§®ºà‚Ò>.oóæfU܈¤Lö Ûßþö·ÍaÎ?ÿü ãûÿoXÐs#ak´  @`c G¯@ {ÝÐÃ’£5‚àHŠ=³ÑS8§ô\Domôè®O‰žâHêÙ¤c8sÌÑC–£w:oE ØEFÔR£Dnlﳞõ¬t衇¦Hþ a"1Í.»¬ÎÚ×?1$3^žðÈ>[zîÆ–8ß~ô£&Ø~ÙË^–/IÔ3z^>ò‘¤ÈŒw -ï–É®*r/zcžâ>?¼ÆŽëxÎsÓ¾ö„fÛËõÿª$RŠ@ŸrCh:KôŒÿô³Ç7ÞãÞúæ¦w<†P‡ïW^òKé7ÓCÿò…éÆ¥ËÒÏ?BTôÆ7”àx¿f>u܈ùÕI'¯½¤î’H5HiÍš•ö{êSî²iôìG¹qÉÒsõ»å²Ç÷éÚŸý¼ùÞYF¾|ç^ßÜÐxΗO]›+¶ùúß¾<󾤨Wo‰àø9§’îùÈG¤Åùh ÷¾?Èão¼üMp|ÌñŸiLbŸ¥%+|àã•è‰´Lö‹ÿf¾¸´Åøïïž°º} zÜñ¶‹i8‘"’ñPF=( @€™ #‹èt”L£6þйg™ëÁÈ£Êr#‘ëÀlz€§ÚSÁí‹^ô¢&èŒ@4žGÁR$ÝŠ!ÓÑ£=F-Ëuƒã¨O<žW†µFð××°×^{5éùÈG6××}aƒ”˜ãY˜£~qθ¦(;–á‘qœb¾´ôðuŸõ»þAÎٻͯxy³ÔRôìE ¿Û«îl~b^f ïÝn§ùÍðÞ¥ååH°uc¹žè‘¼©üQ½—ÓU¢÷oyÉ %–•Ù¦8GÙ¦¸ß³ôÈżÇkþË2yeŠÑq&ntÍšø§;ü2n‚L¥Äö‘ìe9£Xjì¹Ï}nÚgÍ\Ì©'¶ 1æsG@ÛÇ{Ý6}C齌€v§2ܽ;ü9ÞßíOÿ4~5kó`Í?1\ú€×¼fm¯ìœ»ïÚ¼ÓMš6¿ÜHˆ`ûê Î/=ÉÿÜeŒ÷–kJ¯a”RÝÇkÞŒeœ¢tß_órß_×\ôÓf›î{å¹ç5?ÝãÞ\†îOg‰,Ñ6£5FÄÍŸ(Ñ®#Þ³ôš_]’µE€zmÑqõ…¥û?óiA >»Ã®Ç^O·ÄÍ´ );Ý{ßf÷øL//7Äâú¢‡øÒ¯}#ÅPï˜ÞAðu¿üU3÷>zƒ{3DÇó(¿ýÖ·›ß½ÿ<á}ïi‚ãx-ÚÆc_ÿºææVï6“=Ž‘±üÚý˨…îy&Û~}Þ›ì;÷´§=-ý]™Ö1Q⳩œ/njÆ"ߟÿùŸ§}ìcSÙݶ @€"0sz»äo”3lÀAc.rd7íÎŽëŒÇÑ+WôèÆ|ßÆ{ƒã 8夻ÞY‚ÂöâÃÞóÅ0Áî|ÇÚ»=ò“]ÿØ`gÒ—7#ÈÝé>û¦èõê–¡<Ô 1cÅ|ÑX¾'æ#Æú®cK ÑnŒŽ}y½ŸÇ4·¯¸¡™;׶¶ •Ïh›9Û—×wh†G Ý)>QÂiª¥»ÏT½ºí£ûYLµ·¾÷:c¾i”¹¥Çk¢rÛš~ç1½u³K[‰`xU$•ê)÷zÌc× ª"ŽÒMPŸóÁe}ꟖµÄãFDü o·}Ú¿‰û” ëQn]sÎ…e~yoY¸fxñ­e:À %nd¬¼iõAü箳[\ÛªÛ¢»ÎŽ“<‰¹I´U¶‰ùÙ½AoÜ`³NÉ£7=¦„^í4Þ¡»m¤ÛfÆÛf×æí¹W³Y ‹^ú½ÓÓ}žôg%ÙÝHŠìÒWž·¸y/ný®ÏQv_sC¢yRþÙ®ä4ˆ¼ñ][p좵/ÅÐî±Ã»×¾9ÁƒkJïu”ÝKо±Jׯë¹1Ïy)¢Ä[ãG!@€lnáËÜÆMYÆûã+†BO4çw¢k‹€,z##ð‰Ä`(÷ëÕèž{¢cö{=ö^áèIŽ ½[âÉÖ£Ä|kƒÅî›àw.×sŽ÷/ó8ùÒÿ»NÒŸæÆBIµÍöS¢<Ñ¥G@k·Fç誕ëlAqôVÇ5ÅvÑÃ%†fFïz÷†Ç:;Mð$Ö/ŽCÕ§RbÎúûʼßø\bɨH½ü{•QS-;–^®(‘Lk¢²íš¹Ö1,··ÄüÙŽ#a×TK¬]|P:zÌ+^ZæÕÇpíøœ÷8øà2¿{§æ7—¹ÉÝLÅñBŒˆÒ}¿yÒçŸæןéþã?úl==owoöD¯lêé9À°·J ‰çîüÃíM’©Ö¶³×ö””÷o»öºu.$rD‰D{1jd}KÞf¸ p#éV,·Ó¢g;äH¶7„æì²s3/<αüW¿^çTQŸŽ#a×t—èu2ö¿1—ÿðÌæõéøg}¿sS=w|'cÞøkÊHŠ˜¦¢ @€f‚@‰ùr“ wS\LüQfooAǧ—ùݵj§rï³÷>éÒÒÓ?Ý¡Íã#êÁt¬Ó?ÝÞ‘øÝ쎷o÷µÞ„Ç2VñÓíŒ:\\æƒÆ9"›JØ=ö†þÞvþ¼=‡‘Å:züæ–^õèq‹ŸÈ@=ocÿ¨Þs¶¶™Õœ#†›FVç‘57"¸YqÉ¥ÍðÓHdÔMìÔöZn(ÃÆãÆG»ƒƒ{ì¸asÅ£D¶óõ)‘-zoo»öštóšàsìqæ­ ¼¯ýéEMP×}ÿº5YÑcÈôTJÖÝÙÀô¦ÃÊú¾Q"›s”Î%†Ö÷–«K¥(;íwßÞ—û>^x¿ý›`þ†ò][ºß—Þ×ã{kØFûŸjÉe$Èœ2§5z†¯-F«n»uõ!Ê÷ñæ’'àº2•!LgÏ›ÛÜعéòß5ˈÅÒfGB´V{K܉қ]¾÷ý©<ÞåO°v~ð®ypÚõAlãȽËV÷ØÇPð(—|íëë|æ¿?÷Üæõ˜ƒ?ÝånknDðÞ-¿ùòWšìÞÝçò»ßw.’"FRÂñÚÃTÏ»tM°p¹Ù£ @€fŠÀp7ÈÛd$‰@ö»ßýn3‡8æ‡~ÿûß_¯ÓÇ°æÇôØtnÉI²"ËjôˆÇå ÊüÌèEŠ!äÝùË1\;¶ùÊW¾’žøÄ'6K?E`Td7î ãþ ËÈÐâšcI“Ò]’ý°$ÆúÏ2 5Þ‹€øœsÎi€=âh¶‹znê2»dQÞûðÃÒ/¿xR:»dC~DIAsô>Fò®È`ý¾ •u½Ö¹´~[æY–?x£4zÅ";ðx‰¼®úÉù©½Ô¥W/æcFÐx÷âËHýè]ïnzöv}ðƒJöäKÊùß× ݽÌ.j”H K,uÜqÇ­s =ùTYR)J|VRâfF”nãú+l[z¤ð–·¦û–ÄN;ì¶{3$9–zÈ_½¸VY¤—–výã’UýÞåšW–áö–DRQøü?ŸÒi#1Ö5¥ýísäQM9ºrUº¼´»(»ö½ß1OO±ÄS$Q‹n~Õ+›ïÛ7^ùêôàòÇœéHÜåÀÒ3º!å7_ùj“;†éwçÇìèÁŽïyÜ`ˆÏ'Ç÷0rlh™ì;+¼öµ¯mNs‘#a׆”ø>ÆRO”ÇR{  @`&4ro`85ö¸8Æò+‡rH³\SôDÄkÇ–?Ì£g1–ý˜J‰žÚè5úë¿þëf‰©²×[Ô³¦lɱmüÄPñe~ »=Œ½ûÆãSÊú²Q"@‹¡¹ÑûÇ|ÉK^Ò$”‰u“»%2ç>ÿùÏo‚éÐ7u‰ 6’ úOok–͹ä«_[çþìƒïOCc‚ãØ †v—:è ¯O±&ìxòyþHY~ç#Mpügü@ Ï+½¾ö5e©w¦o¿öÖžo×bqPI>´v}æòN$D‹ ±r,‰YÆ'+q%>£¸qÙÑ7¤D¯W”õMÒûÞ½´›G¾üåM¦êX'¸["aÀQX …q ‡Ž 5Jô<X–8Û¡Üœ‰ÒýN”Á딘OÞ”5o,Øoÿfä_|îsMò¯îÆ1JàÞåfCwÛƒÞú–tnYƒ÷Ò’y=~¢ì°û½Ò¯~Õ¸Ÿc¼ËLÅzÎQþÒ—® ãó†7¤Ÿ|äÃége(w·ÄÍ}ÇÉZÜíEìþîn?ÞïñÚOÌ=~è‹_T†Pß–~üÞ÷5?±o€‡•%žb¤¸!óm»èe¥ç8Jd³Žµ¦cNpïüå7¿ùÍM©·”¡éq«;¼¿Ùi ÿt{ç÷ìéÝŒìñ 7ízͱxåË›Ñq“è'œØ¼½âÏýÊic–UóOv-kÚÀw_ÿÆf«ø>uämK°ü¤|(}éù/h¾auÄ»þ¥¹™r·}Mvø‰Þë÷‹¼ ñß븩Ùü74@Žñß„ø~FE… 0†Ê”ƒ{PzäŸ>rZ®'†]Æ|âøC-zÆËZÛÄrK1w8zbm$·Š¡Î°F ½ 14ŽÑM°ïG¦è(Ñ«Û=vüÇŠ!´±OÎqÌè1Žcõ–˜?Áx$ÛŠ?øö*oœ£û‡eëæ2g4¶ë–Ø.®«Û3Ü=_Ì©óÅPï½÷޻ɘûÄS¹þîyÆý]®çŽb=hÑËɯ¢D’£è­Šá¦‘h›5K ÅÔ›JáË–6kìF¯o¬÷C3{‰Hõ‡²lV7³uÔ?–ŠŠcõnI’"yS7Š°÷|q-q}×—åZ"QX#z£ç¯ ÆÛkKXÅòXq#$äèUŽLã½%Ü¿óï¤O|âͺבÙ6Ö¿Þò7ó7ÍR`ÝåÇ6äX±o|ÑsCŸ{3Vw¶·”ö™cýâ )á~kŸSôXÆzËã•Xç6’rÍ)ç›h›ñö›èµèýþCù®Åç=˜ã•˜ª#@bi³‰†ÀÒ~b8ùõ¥'12…çÖpÓc¾cùîF[‹v?íh×e¹§Æ½¼£#Î-ë _]FŠõÞ÷¬Œþ ,yôîw¿»ÉŸýCJÏz÷û=^=¦ãµ˜wã’%ýƘ{<öãóŽucIªñnhÝ~²çSùÎÅÈšÈÿ½‹õç7¤|«ÜHúà?˜â3:úè£7äPö%@€LIàÌ’¿åaXŠ¤ÊÝyQ†Ê;¾à…Ó wOà7ñb-ëW¼âÍ ‘xÿáxzÛÛÞÖlú| }ûÛßnGPCx×wýìæ kþùTé-à8nš<¸¬±7Džóœçônâñ ˆebq,«CË£5n@üþœsÓwßðÆ2´øtÀ«^ѼÞ[…ã?¾©¯E[zuY¿:Úš²®ÀT¿sqCäMozS3ŠæÉO~òºàYÌ;>ýôÓ›µÍ/^Üä£øïÿþïfhü»Û„ 0-“ÈÃÑÛí–³9Iâ.MÌCŽ@ø¬³Îj2[w7Dk1oü©O}j3~ºzýb-äÕC9ãóU @îªÏüß1þ»oxÓ].4æãîWæƒÇüû±åyÏ{^:¤Ï_*Ãáãs+ä±J©In8èw.²ƒGpyÖ'8Ž³ÿ®$<í´ÓšÑ;±ž||×7õJ wUð  @àzÿhá3PàŽ’*zŒ[†äþö[ßiÖŽùÀ{”};DVç1Cùg`¶ŠKŠ›L1=¢›‘~«¨”J @€U LÚƒsA§«§®J]•&@`£ D2¯}:²ùÙ¨'rðIbjBü( @€­Y O¶vðÖ\qu#@€ @€½%êpïs  @€ @€@•9–$R @€ @€@í9Ö nwɵ7õ'@€ @€@íùÖÛnK­ÜªÝAý  @€ @ r¬ ³®¼¨> @€¤\Jêt:( @€ @€@ÕÍ2O1Y!@€ @€5 4Iº¬…\sPw @€¼jÕªgMƒ @€T-OùÒ—R$êR @€ @€@ÍùC­¹þêN€ @€¼óÎ;[æIc @€ @€ê²5«o @€ @ ä˜œ[’ti  @€ P·@wÚºÔž @€ªÈ‹/® @€ÈK—,IŽdM @€êÈ .´rÝm@í  @€ @ äë—/ k  @€ P½@~Ö¢EÖA®¾ @€ @€<Ä€ @€HyddÄk  @€ªȹժ @€È¥XæI; @€ @€êòìY³ªG@€ @€r§Ó1Y; @€ @€êÊä–!ÖÕ7 @€ Ûí6 @€ P½@HÔ¥ @€ @€ššd½È57u'@€ @€È'žx¢$]Ú @€T/?üðê @€ @€¼Ë.»P @€ @€Õ Èb]}@€ @€!ЬƒÜîXêIs @€ @€ºòÈÈHjåVÝ jO€ @€Õ äŸüä'É2OÕ· @€¨^ _vÙe©ÓéT€ @€êÈóçÏO­–!Öu7µ'@€ @€|à 7¤ÑÑQ @€ @ j¼hÑ¢”s®Aå  @€ @€@ ‘ @€ @€U d ºªþüUž @€ÖäHÐe™'í @€jÈ‚ãÚ›€ú @€ @€@ä;V®L¹%I—æ@€ @€u äHÐÕiwêVP{ @€¨^ ·­\}#@€ @€eˆuŠäŽd @€ê(Ó#F¶rÝÍ@í  @€ @ ¯ZµJ€¬ @€ @€@õùÔÓN³rõÍ @€äÃ;Œ @€¨^ ÏÝqGC¬«o @€ @ çV‹ @€¨^ —b™§ê› @€È### @€ @€@õùüóÏ7¹úf€ @€ò²eË ±Ö @€ @ z¼ÓüùÕ# @€ @€ùúë¯O‘¨K!@€ @€5 äE‹¥v»]³º @€ @€”ÛŽ$] @€T/GGG«G@€ @€r«Õ¢@€ @€ªÈó«o @€ @ ¥|·»Ý-µ;’ti  @€ P·@3¹• ³®»¨= @€ä¡¡!ËE¢.… @€Ô,wÚi§šë¯î @€ @ È­’ «Ýnã @€ @€U dÁqÕŸ¿Ê @€ @€À&;WnIÒ¥E @€ @€@ÝyñâÅ©ÓîÔ­ ö @€ P½@¾ôÒK«G@€ @€ò‚ R§£YS @€ @€ºòŠ+¬ƒ\wP{ @€(ùØc k  @€ P½€u«o @€ @ ¬ï¤ @€ @€"GFF ±Ö @€ @ z\Jõ @€ @€@^¹j•ež´ @€¨^ ·GG«G@€ @€r§ ‘ @€ @€U äV™ƒÜéD˜¬ @€ @€zr[p\璘æ @€ °V YæI&ëµ @€ @€@¥ùÔSOMív»Òê«6 @€X-=ôPIº´ @€¨^ Ï;·z @€ @ ·Z-  @€ @ zÜ1ÿ¸úF€ @€R* ¬sjw$éÒ @€ @ n|ÞâÅ©• ³®»¨= @€ä¥K—ZæI; @€ @€êò R§Ó© @€Ô-—/_žd²®»¨= @€”$]‹Ž=6ŽŽ² @€ @€U äŽ#“µB€ @€jh"ã¡¡¡š Ô @€¤,A—V@€ @€ÊäHÐÕn·Y @€ @€ªòìY³ªPy @€ 9æç–$]š @€Ô-PXçÔiwêVP{ @€¨^ Yæ©z @€ P½@3¶Z&ëêÛ @€T/Ð,ódäêÛ @€T/O<ñÄ$@®¾ @€ @€@õù¨£Ž²rõÍ @€ä P @€ @€Õ ä‘‘C¬«o @€ @ Y @€¨] G‚.Ë<ÕÞ ÔŸ @€ò9çœC @€T//»ì2s«o @€ @ /\¸Ðkí€ @€ªÈË—/¯ @€ÈÏ~ö³SIeM‚ @€T-Ð,óÔn·«FPy @€ #8Ž¥ž @€ P³@­¹þêN€ @€<<<Œ‚ @€T/o»í¶ê @€ @€Ü*=ÈíŽ$]š @€Ô-ÐÌAnåVÝ jO€ @€Õ äÈ`m™§êÛ @€T/ЬƒÜétª‡@€ @€u äU+W¦VË뺛Ú @€ @€@>õ´Ó’µ5 @€¨] rÈ!©Œ³®ÝAý  @€ @ r¼ÓN;¥HÔ¥ @€ @€š²]5üêN€ @€] º,óÔåð› @€jÈtÕúÑ«7 @€ô ä .¸ å–$]½( @€ @€@}yéÒ¥©ÓîÔWs5&@€ @€=yþ¼y=O=$@€ @€u ä+V$™¬ëüðÕš @€þ(-Zdä?zxD€ @€• äÑv[€\釯Ú @€ ðG\Šuÿèá @€T*‡*­¸j @€ @€^<22bˆu¯ˆÇ @€ P¥@ž3gN•Wi @€ Ð+ÐÌA¶ÌS/‰Ç @€ P£@n—,Ö  @€¨] GïñÐT]µ7õ'@€ @€@í¹Õj%C¬koêO€ @€ùÎ;ï¤@€ @€ªÈ_øÂRÉÔU= @€¨[ uÔQI¢®ºÚ @€ @€@Jyþüù’ti  @€ P½@­ @€ÈÃÃà @€ @€@õydd¤z @€ @ _pÁ©Ýi“ @€ @€U äK/½4µr«j•'@€ @€yÁ‚–yÒ @€ @ z¼bÅŠÔétª‡@€ @€u äE‹¥VË뺛Ú @€ @€@ŽàØZÈ @€Ô.#8Î9×î þ @€ P¹@ UΠú @€ P»@– «ö& þ @€ yÕwZæI[ @€ @€êr»Ý® @€È1ÿ8·$éÒ @€ @ n&@î´;u+¨= @€T/Ûe™'… @€Ô.Sb-“uíÍ@ý  @€ @ Ÿ|ÒI%F¶²¦@€ @€u ä#Žú裓µknêN€ @€!çÌ™“Ê8k @€ @ j|öÙg§HÔ¥ @€ @€­UàÒK/í[µf™§¾[Ù€ @€l¡ŸtÒI}¯>|ðÁ–yêËd @€ØºÁñ«_ýê¾—Ÿ­Ü×È @€ ° ôdzgÏî[ƒósK’®¾R6 @€ @€-F`lp|ñÅ÷½ö|ùå—§N»ÓwC @€ @€-A`¼àx 9È?úѶ„ú¹F @€ ÐW`¢àx 9ÈÏxÆ3R§£¹¯²  @€ @`Æ |èCJ ÇœãÑÑÑÔû¼ßÅçm·ÝÖ:Èý”¼O€ @€[„ÀK_úÒµÁq\ðØç“Ub8"êHÔuæÏœl;ï @€ @€-Bàê«®^ç:Ç>_çÍž'íV+vøaz‘{P<$@€ @€­WàÊ+¯·rÖw—Å‹ @€ P›@¾å–[ô×ö©«/ @€ÜE ç2ÄZ!@€ @€µ äR,óT{+P @€H¹]²X+ @€ @ vÜ)±Ì“B€ @€jÈ-C¬kþüÕ @€ÖäO< @€¨^ yÔQ†XWß  @€ @€@ž7w®,ÖÚ @€T/üãëA®¾ @€ @€<22B @€T/|ÌcªG@€ @€r§Ý¦@€ @€ªÈ­ááÔ$Wß @€ @ v¼dÉ’”s®ÝAý  @€ @ r|Þ¹çZæ©òF ú @€ R~ú1ǵ @€¨^ Œ®Î†XWß  @€ @€@nµZ’ti @€ P½@Õƒ\}3@€ @€ÒWk @€ @ ämgÏA€ @€ª0¹ú&€ @€B ·Ûí444Dƒ @€T-#8 WÝTž @€Š@³2  @€ P»@³ÌSíêO€ @€òç?ÿùÔétH @€ @€ªòÑGmrÕM@å  @€ @ òœ9sH @€ @€êò9çœcˆuõÍ @€4ë c @€ @€µ ä8ÀäÚ[ú @€ @€€uµ @€ ¹sµ @€¨^ _vÙeÕ# @€ @€ùì³Ï6Y; @€ @€êò¢E‹ ±®¾ @€ @€Üjµ( @€ @€êr U€ @€êźîÏ_í  @€ @`@n·Ûz5 @€¨^ ßzÛmÕ# @€ @€’ti @€ @ äNb­ @€ @€Úrkx8Å[²v@€ @€Õ ävÉb­ @€ @€Úò£8 võ'@€ @€)·Z-s5 @€¨^ ·Ûík!+ @€ @ fü»ßýN€\s Pw @€hòyçž‹‚ @€T/~ÊSªG@€ @€ò6Ûl“:  @€ Pµ@nålrÕM@å  @€ @ òhÉb­ @€ @€Úr)†X×Þ ÔŸ @€RÞ~»í0 @€ @€êòÈȈ9ÈÕ7 @€ Ð ±Æ@€ @€j0¹ö þ @€ Ðä¶,Öš @€H¹Ó阃¬! @€ @€@õù„N°ÌSõÍ @€ä'>ñ‰ @€ @€@õyÇw4ĺúf€ @€òücC¬µ @€¨^ ŽŽêA®¾ @€ @€|ÀP @€ @€Õ äáááê @€ @€Ün·) @€ @€êòW\‘ÉÕ· @€¨^ Ÿyæ™)ç\= @€¨[ ?ó™Ï´ÌSÝm@í  @€ @ äÙ³g 5 @€¨^ YÙëêÛ @€T/[­–$]Õ7 @€  Y @€ @€E ß~Ç  @€ @€@õ¹ÓéT€ @€˜ƒ¬  @€ @€"Ûív‚A€ @€ªÈ «n*O€ @€E éA&A€ @€jÈ'ŸtRíêO€ @€R>ô°Ã’LÖZ @€Ô.w^¸ÐäÚ[ú @€ @€@Ê£%‹µB€ @€jÈ¥b]{+P @€HÙüc­€ @€”ežÎ;ïå”SÌA®½¨? @€¤|øá‡b­! @€ @€@õyþüùÕ# @€ @€‘¡Ëkí€ @€ªźú&€ @€B ¶Ûzµ @€¨^ /^¼¸z @€ @ /[¶Œ @€¨^@ëê› @€|ã 7¤v™‡¬ @€ @€šò1ÏxF*©¬k6Pw @€ òÐÐPY ¹ƒ‚ @€T-`äª?~•'@€ @€®@5ĺ«á7 @€T+[­–$]Õ~ü*N€ @€] °… Ç2O†Xo!Ÿ–Ë$@ :~Ak3´ºô÷–xí˜eKz_Zçq7¸`º[Ö'Økë=F÷X›ó÷gœÎ(ïÁ°9/c«<÷D=ôôhÞ[å'®R¨S`¸Õj¥HÒ%H®³¨53W` u¼Ä\1Ô:^@x¢ÒÜÆyúâ'v¼ç‹&z{³¼þö2dúÛŸ°Yνµž4n:DýxåÍoJäñ`¼F€[¤@o‘‹&@`kˆlÓý‚Öè)Ž`x¼Ò;ìz¼÷ãµn6ê³n[:Ñ&}_ŸlNsß7ÒÑ‹ÿüó·’ª¨¶Éz»µœlxó  »"Hä\ÝsŽ÷»_ ?Þ>ûµ‰z;7öyŸزò’%ÁÛ²«æê  °e 2äyâÉè®L¿à8ÎÓï\3±9꧹û)ûM€ *Ðd±Ž9È Ì Azd ~£6ý‚ÛAjço®sﾃ\sïö›âqô"ÇÜY… 0¨ÀðõË—§¡¡¡A··lDAsM%èà6æ÷ë)¯JMïñšL×ñxª™±Ç;æ¦~M®M->ýç»jdy:ý¶óÓe«~ŸîìŒLÿ fØ·NûÌÚ-2çaéà gØÕ¹lýÃÏ|Ö³È[ÿ笆l!ýzb{ƒÖA«Ô/¸è8½½ÔƒfÆŽžæ‰‡MtžùºeŸ6¦îÆ?vÇÿ}×Ӄ·½Ozñü§lüÎ3,¾ýWM½ÿrþÑ‚äò™¸ êÈzëù°Õ”™-0PïqÏÚŃ֦ܺ}lAõØ2Þkc·éàÝ~S<^äQbŽóìíöXçgªóž8êØ?½Ç™è½Ûô>ŽýJ>ö<½Ç{ÎÞ÷âñG-š0†²Ý¾û|Â|#zŽ#8~Äv÷p­c³¨oÔ;ê¯ @€À¦ÈíÑÑM{Fg#@€»LWb®»xÍ ƒ·½ûööw_43v,Q5“ʦ\ö)‚ÅD)”®îá>{ÍÓ·¿yâ¸ÛÅ1& `c§ÕAôøçyó›^™ÞôÆWŽ{ìÍýb «®-8îšG½£þ lZ\ÆW§N§³iÏêl °ŽÀ =¯ã­ëd’'ƒ·ÝÝ' ¦ã$ìêJmÚß|@:øàGOxÒ‰ón >ÑŽ358Žë­aÎñDŸ‹úO&ã=l<ÜÊ#KÒµñˆ™“ 4´zœ!Ï“õ®ï`GpÜo»Éè8k$¤Nw½Â {e²à1Ž¼±†Z¯ïUÿ`=2l¿y’žÞî|ëÞ뉡ד­ ½Ç  ðGóˆ6¹@¿ÞãA‚ÖA.z µ_pçdNs¿: r½SÝæq¥‡u²€o¼rªçØÜÛG/òdu;Ôz²›3yhõævv~¨W ·Z-C¬ëýüÕœÍ,0HÐÚoHó Uˆóô Zûõ ÷žgmYöÉÞ]6Éã.½öª¯¥§/ûL™SÆÀûdž/¿ò´tìåÿÛìÿWWœ”Yò±ô/×^Ž¬ @€ÀLÈ¥Ìôkt}Øê¦{Èód@ý‚Ô ™ãÜ/°ž‰½Èa=¬[zé7Ôz¢úÕ_7r[zïòND0éëgܶ$zó/Ó.ÃsÒkw>8Íkm›>{Ãé‚Û¯œt¿Þ7÷œ5/½q—ÃÒÿîñœôÞ{>9 §Vúü¥ïÞziïf @€À Èív¹Wj™§øѸ$¶f~AkÔ}ºz7¦c\c¿9ÒƒÔuº¯qÖÈ𼥗ɆZW·É|·ý–úÚ;¯û^ZØš“´íݧ\…¯ÞòëfŸ×”àø¹óšöš5¿yÞ}}¾záÁéYs˜î?{—tèœ}ÓAsöjv»jäæAv· lF|â‰'nÆÓ;5ê$1W¿žÙAÔ㼡x¿k^äAêüøÇ?ÞäÍçïÌT(ЯGuC†<÷rö›wÛnhpÇ$aWÔY®КþÒïF@÷Œ5 ­¾iôŽf®ïÓç> =l»ÝºUŸÒï£h¶_UÛÿ¸þ¬ôª…5ÏWŒ¬~}J+¿où™iÙªÓQ;Ü7=X€Û @`“ ä]vÙÅëMÎî„Ô*0HOêt­›rŽs|–ýz‘c›~7b›é.ývm ½ÈaÖo¨u-C«ßwý™%V'½bMP»>íiÖš^ç÷_ÿ£ôäî—ö\3ÄzVžzoôñ7^Ž¿ñÂf¨÷Ûvyüú\Ž} @` 4s7ñ9ŽU lÊ u`t:ñî½Èý‚䙘°ëŒ3ÎNñ³¥—3~8y~°Ì·ä3úuYÖiÅÈíéàß~4=ä’÷§ŸÜþûf·g-;>Eò­AÊ‚ÖöÍf¿»ó¦ô’•¢W:ÊNk^ož ðÏ×Ê\æw_wFÚöÎéC»=-m—·`/› @€ÀæhRX mîëp~lõ›*h¨—zçC§Ý;°ëàƒ=íõ)ì·æq\gÜØ2w÷3ßoÖÎé!ÛÝcíÏœ<«Ùe¿Ù ÓÜ’º[–¯Ér™®ok¯ê¾Üü¾o h£îîG¥ûÌZ¸ö½£·§Oßp~óüùóžæ¤Õt¼ð”ïß,ÉtüM¤kFnI߸õ7)—~„'ïx¿µûǃɎñ†«¿‘F:ít{{$ý¿+¿´v¿§íø€´hîƒÖ>÷€fž@>çœsÇ3ïsqEleýz§#1× Áq°nÌàtЄ]›ããÝçáNµWxk™s½1ÛO,ÍkGöéSÊzÈ9 ¥wìú„t¯mæ|Ú•‘fÛ+Ê0í_ÞqíÚŸkGnø6$@€Í#0üÛßþvóœÙY  P‰À ½ÇBÑ]Îi ¬ÕahõØkï׋Û³ì“éä=_4v×ú<²8Ç\ÜéšsC­'»¦‰Î3öz·´çÃC¹ôÏÛÒ.Ûõ @€À /_¾|aw˜H` wu°8ñ¼Ý‰Ž=Õ×é±`~SÈqíq®A®iªõœlûô& 'Ûw¼÷&:V7x/H^Ÿžß±çž,ÀŽ¡äqÞÉÎC­¿}ð c;éó‰ê;qÔ±éqÅv¼úNzPo @€&Ÿ÷¼ç¥v»=Ã.Ëå @`ëèöônîÚô[‚)®/‚ùMoN~kOåÚ&;VÉ‘,~"€ŒŸxÜ žÇ;Ï ó¤' |ã˜Ý 5~GP;^éµï½õy-Ž×[ßn½×çXö!@€›S ŽŽ¦œ›Õž6çu87¶J™pš¬ßPðéþ€6—Mô"ˆRßnt¿m#€ì7¹ÛóÛïXS °ûðgLa}äÉŽÕïš½O€¶Ü]æiK¹`×I€-I ;¿xs\sœûä=ÿ²ï¼ã¸¶A†‚OwéÕžîsv×íeí>ßß±„Ôt”A®i¡Õ½×ÒïfÀT²Z÷;Vïy§ëñ6CÃÓu¨-ò8µ×‹üÐ\4[¼@é<ÎÍ:È[|MT€3P`s«ƒã œkS÷Ï„jºz‘£.ßþæ‰gîW×û÷+ƒ­{œéjÇšN·±×:öù>³vK‹oÿÕØ—«xõŽú+ °i ±Þ´ÞÎF€@e‘¥ySÉÝ^ã©$¿Ú\½Çý2joì¦2Yà8ÕsGïjô$O5xŒíc¿Ø¿_™ÊÐê±Çšlxtw*C­7e|Èœ‡¥‹î¸¤º 9‚ã¨wÔ_!@€M+0ô…/~±sÌÓŸnò¦uw6*è¡ÓÙSÛ¾}àœ½JOñÞ÷÷ÒÇuMç5õ{¼ÇqqÃ`}—wŠäO•6#x›j™¬gvuïîÔ‡P÷…ÜM˜Ùž»kG}&ºÆ8æ Ù£#Ž!ÕãÍ…ÞÐzvë8Ö~åí—}iÊϯYžN¿íüt٪ߧ;;#SÞKÛ!†UGÏqÇ÷¶ç–öù¹^¶+¯¼2õ.y|öÙg7?ôùNè»hÑ–SWJ€ @€6@`¢Yúê @µ+ @€l=¹Óél=µQ @€ °ž¹Õj¥v»½ž»Û @€lùÎU«R¬…¬ @€ @€šò)§ž*@®¹¨; @€4ùðÃGA€ @€ªÈóæέ @€Èe|u’ÉZC @€ @€Úr+GŒ,IWí Aý  @€ P»@©Ý@ý  @€ @€@Ê^t‘!Ö @€T/—,YR= @€ çÍ›g²v@€ @€Õ äV¬¨ @€È‹Ž=Ödí€ @€ªÈíÑÑê @€ @€Ü)ÖAÖ @€ @ vÜÊÙëÚ[ú @€ @€@úÿÆÍÆÊIEND®B`‚code-input-js/docs/modules-and-frameworks/hljs/vue/000077500000000000000000000000001506303517500226215ustar00rootroot00000000000000code-input-js/docs/modules-and-frameworks/hljs/vue/_index.md000066400000000000000000000165471506303517500244260ustar00rootroot00000000000000+++ title = 'How to use code-input and highlight.js with Vue' +++ # How to use code-input and highlight.js with Vue > Contributors: 2025 Paul Rosen, 2025 Oliver Geer; **code samples licensed [MIT/Expat](https://spdx.org/licenses/MIT)** ## 1. Create a Vue app First, create a Vue project. (If you already have a Vue project then you can skip this step). On a command line, use your package manager to do so, for example by typing one of these: ```bash yarn create vue # OR npm create vue@latest ``` At the time this tutorial was created, the output was the following, after I named the project `syntax-highlighter` and checked "typescript" (to give the most specific type of code possible in the tutorial; you can use JavaScript just by reading the comments and emitting types from the tutorial's samples): ```plaintext Need to install the following packages: create-vue@3.18.0 Ok to proceed? (y) y > npx > "create-vue" ┌ Vue.js - The Progressive JavaScript Framework │ â—‡ Project name (target directory): │ syntax-highlighter │ â—‡ Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm) │ TypeScript │ â—‡ Select experimental features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm) │ none │ â—‡ Skip all example code and start with a blank Vue project? │ No Scaffolding project in /srv/app/projects/syntax-highlighter... │ â”” Done. Now run: cd syntax-highlighter npm install npm run dev | Optional: Initialize Git in your project directory with: git init && git add -A && git commit -m "initial commit" ``` And just like the above instructions mention, do the following: ```bash cd syntax-highlighter yarn install # OR npm install # or your package manager's equivalent command yarn run dev # OR npm run dev # or your package manager's equivalent command ``` You should be able to open your browser to the path that it prints out and see a working Vue app. If so, congratulations! Hit Ctrl-C in the command line to stop it. ## 2. Add dependencies > This tutorial will use `highlight.js` for the syntax highlighting. If you are using a different method then adjust as needed. Type this: ```bash yarn add @webcoder49/code-input # OR npm install @webcoder49/code-input # or your package manager's equivalent command yarn add highlight.js # OR npm install highlight.js # or your package manager's equivalent command ``` In the file `vite.config.ts`, change the line that contains `vue(),` to this: ```javascript vue({ template: { compilerOptions: { isCustomElement: (tag) => tag === 'code-input' } } }), ``` So that Vue knows that `code-input` is not a Vue component. ## 3. Initialize a code-input element Create a component with whatever name you want. Perhaps `CodeEditor.vue`. Read the following code then paste it into the file: ```html ``` ## 4. Using the component In the generated file `HelloWorld.vue`, place the following line after the "greetings" line: ```html ``` And put its import in the `

This uses both the auto-close brackets and indent plugins. Try typing some brackets / double quotes!

``` #### `Autocomplete`: Display a customisable popup next to the caret that can appear and disappear {#playground-preset-autocomplete} ```

Start typing some HTML tags to see the autocomplete in action. You can click an autocomplete suggestion, or press the Tab key to select the first.

``` #### `FindAndReplace`: Add an openable dialog to find and replace matches to a search term, including highlighting the matches {#playground-preset-find-and-replace} ```

When focused in the editor: Try Ctrl+F, or click to find. Try Ctrl+H, or click to replace.

# Hickory dickory dock Hickory dickory dock. The mouse ran up the clock. The clock struck one, The mouse ran down, Hickory dickory dock. ``` #### `GoToLine`: Add an openable dialog to go to a specific line and potentially column number {#playground-preset-go-to-line} ```

Try Ctrl+G when focused in the editor, or click

# Hickory dickory dock Hickory dickory dock. The mouse ran up the clock. The clock struck one, The mouse ran down, Hickory dickory dock. ``` #### `Indent`: Make the Tab key and newlines after brackets do what you expect {#playground-preset-indent} ```

Try Tab or Shift+Tab when selecting or editing text.

{ "hello": "world", 1: 2, "foo": { "bar": "baz" } } ``` #### `SelectTokenCallbacks`: Handle which highlighted tokens are selected in the `code-input` element, e.g. for visual effects {#playground-preset-select-token-callbacks} ```

Try selecting some code with a bracket. This is just one demo use of this very flexible plugin, which lets you use more features from your highlighter (here, Prism.js' match-braces plugin)!

function hello() { let data = { "array": [ "world" ] }; console.log(data["array"][0]); } ``` #### `SpecialChars`: Display a selection of characters as a colourful representation of their character codes {#playground-preset-special-chars} ``` ``` ### Plugins for highlight.js Only #### `Autodetect`: Auto-detect the programming language live {#playground-preset-autodetect} ```

Start typing code of any language. Detected language: . Inaccurate language detection should be reported to highlight.js, not code-input-js.

``` ### Plugins for Prism.js Only #### `PrismLineNumbers`: Add visible line numbers from Prism.js' plugin of the same name {#playground-preset-prism-line-numbers} ```

The lines are numbered!

# Hickory dickory dock Hickory dickory dock. The mouse ran up the clock. The clock struck one, The mouse ran down, Hickory dickory dock. ``` {{< /playground >}} ## Translating plugin text As shown above, some plugins contain user interfaces containing English text. If you provide translated versions, you can swap them out for different languages following [these instructions](../i18n#languages). code-input-js/docs/plugins/new/000077500000000000000000000000001506303517500167465ustar00rootroot00000000000000code-input-js/docs/plugins/new/_index.md000066400000000000000000000053311506303517500205400ustar00rootroot00000000000000+++ title = 'Creating your own code-input Plugin to add functionality' +++ # Creating your own code-input Plugin to add functionality If you're writing some code that depends on the code-input editor and isn't very useful independent of it, or integrates other code with code-input, writing a plugin's often the way to go. You can even choose to contribute it back to the code-input library! A very useful source of reference is the code-input.d.ts file in code-input.js' source code, which defines the public JavaScript interface of the code-input.js library including code-input elements. Start with this code, which is also available as the `test` plugin. Afterwards, construct and pass a `new TestPlugin()` into the array when you register a code-input.js template, like any other code-input plugin: ```javascript const TestPlugin = class extends codeInput.Plugin { instructions = { beforeHighlight: "before highlight", afterHighlight: "after highlight", beforeElementsAdded: "before elements added", afterElementsAdded: "after elements added", attributeChanged: (name, oldValue, newValue) => `${name}: '${oldValue}'>'${newValue}'` }; constructor(instructionTranslations = {}) { super(["testattr"]); // Array of observed attributes as parameter // instructionTranslations, instructions, and the addTranslations // call need not be present if this plugin uses no localisable // text. this.addTranslations(this.instructions, instructionTranslations); } /* Runs before code is highlighted; Params: codeInput element) */ beforeHighlight(codeInput) { console.log(codeInput, this.instructions.beforeHighlight); } /* Runs after code is highlighted; Params: codeInput element) */ afterHighlight(codeInput) { console.log(codeInput, this.instructions.afterHighlight); } /* Runs before elements are added into a `code-input`; Params: codeInput element) */ beforeElementsAdded(codeInput) { console.log(codeInput, this.instructions.beforeElementsAdded); } /* Runs after elements are added into a `code-input` (useful for adding events to the textarea); Params: codeInput element) */ afterElementsAdded(codeInput) { console.log(codeInput, this.instructions.afterElementsAdded); } /* Runs when an observed attribute of a `code-input` is changed (you must add the attribute name in the constructor); Params: codeInput element, name attribute name, oldValue previous value of attribute, newValue changed value of attribute) */ attributeChanged(codeInput, name, oldValue, newValue) { console.log(codeInput, this.instructions.attriibuteChanged(name, oldValue, newValue)); } }; ``` code-input-js/docs/theory/000077500000000000000000000000001506303517500160065ustar00rootroot00000000000000code-input-js/docs/theory/_index.md000066400000000000000000000011761506303517500176030ustar00rootroot00000000000000+++ title = 'How code-input.js works Behind The Scenes' +++ # How `code-input.js` works Behind The Scenes > Contributors: 2021 Oliver Geer Bearing in mind that it will teach you to make your own version of the core of code-input.js but you should use the library itself if you want more stability, please see [this CSS-Tricks article](https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code). It was written by the founder of the library just before development started, so doesn't contain all bugfixes but does contain the core theory and how to create a minimal `code-input` yourself. code-input-js/esm/000077500000000000000000000000001506303517500143305ustar00rootroot00000000000000code-input-js/esm/.gitignore000066400000000000000000000001201506303517500163110ustar00rootroot00000000000000# In Git, ignore ES modules code-input.mjs code-input.d.mts templates/ plugins/ code-input-js/esm/.npmignore000066400000000000000000000001311506303517500163220ustar00rootroot00000000000000# In NPM, ignore generator files and keep ES modules .gitignore generate.mjs generate.sh code-input-js/esm/README.md000066400000000000000000000043701506303517500156130ustar00rootroot00000000000000# Autogenerated ECMAScript Modules ## Using If you are using Yarn, NPM, or a similar package manager, the files should have been generated before being uploaded to the package repository, or on `pack` if the package manager is fetching from Git. Otherwise, after changing directory to the one containing this file: - If you have Node.js installed, run `node generate.mjs`. - If you don't have Node.js installed but are on a POSIX-like system with `bash`/`zsh`, run `sh ./generate.sh`. - If neither of the above are true, install Node.js or (slightly harder; look online) a POSIX/"Linux" compatible shell. ## Extra Information When code-input was started, it was written and tested only to be imported directly via a ` ``` code-input-js/plugins/auto-close-brackets.js000066400000000000000000000103671506303517500214410ustar00rootroot00000000000000/** * Automatically close pairs of brackets/quotes/other syntaxes in code, but also optionally choose the brackets this * is activated for. * Files: auto-close-brackets.js */ "use strict"; codeInput.plugins.AutoCloseBrackets = class extends codeInput.Plugin { bracketPairs = []; bracketsOpenedStack = []; // Each item [closing bracket string, opening bracket location] Innermost at right so can know which brackets should be ignored when retyped /** * Create an auto-close brackets plugin to pass into a template * @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}", '"': '"'}. All brackets must only be one character. */ constructor(bracketPairs={"(": ")", "[": "]", "{": "}", '"': '"'}) { super([]); // No observed attributes this.bracketPairs = bracketPairs; } /* Add keystroke events */ afterElementsAdded(codeInput) { codeInput.pluginData.autoCloseBrackets = { automatedKeypresses: false}; codeInput.textareaElement.addEventListener('keydown', (event) => { this.checkBackspace(codeInput, event); }); codeInput.textareaElement.addEventListener('beforeinput', (event) => { this.checkClosingBracket(codeInput, event); }); codeInput.textareaElement.addEventListener('input', (event) => { this.checkOpeningBracket(codeInput, event); }); } /* Deal with the ability to "retype" a closing bracket where one has already been placed. Runs before input so newly typing a closing bracket can be prevented.*/ checkClosingBracket(codeInput, event) { if(codeInput.pluginData.autoCloseBrackets.automatedKeypresses) return; if(event.data == codeInput.textareaElement.value[codeInput.textareaElement.selectionStart]) { // Check if a closing bracket is typed for(let openingBracket in this.bracketPairs) { let closingBracket = this.bracketPairs[openingBracket]; if(event.data == closingBracket) { // "Retype" a closing bracket, i.e. just move caret codeInput.textareaElement.selectionStart = codeInput.textareaElement.selectionEnd += 1; event.preventDefault(); break; } } } } /* Deal with the automatic creation of closing bracket when opening brackets are typed. Runs after input for consistency between browsers. */ checkOpeningBracket(codeInput, event) { if(codeInput.pluginData.autoCloseBrackets.automatedKeypresses) return; if(event.data in this.bracketPairs) { // Opening bracket typed; Create bracket pair let closingBracket = this.bracketPairs[event.data]; // Insert the closing bracket // automatedKeypresses property to prevent keypresses being captured // by this plugin during automated input as some browsers // (e.g. GNOME Web) do. codeInput.pluginData.autoCloseBrackets.automatedKeypresses = true; document.execCommand("insertText", false, closingBracket); codeInput.pluginData.autoCloseBrackets.automatedKeypresses = false; // Move caret before the inserted closing bracket codeInput.textareaElement.selectionStart = codeInput.textareaElement.selectionEnd -= 1; } } /* Deal with cases where a backspace deleting an opening bracket deletes the closing bracket straight after it as well */ checkBackspace(codeInput, event) { if(codeInput.pluginData.autoCloseBrackets.automatedKeypresses) return; if(event.key == "Backspace" && codeInput.textareaElement.selectionStart == codeInput.textareaElement.selectionEnd) { let closingBracket = this.bracketPairs[codeInput.textareaElement.value[codeInput.textareaElement.selectionStart-1]]; if(closingBracket != undefined && codeInput.textareaElement.value[codeInput.textareaElement.selectionStart] == closingBracket) { // Opening bracket being deleted so delete closing bracket as well codeInput.textareaElement.selectionEnd = codeInput.textareaElement.selectionStart + 1; codeInput.textareaElement.selectionStart -= 1; } } } } code-input-js/plugins/auto-close-brackets.min.js000066400000000000000000000031161506303517500222150ustar00rootroot00000000000000"use strict";codeInput.plugins.AutoCloseBrackets=class extends codeInput.Plugin{bracketPairs=[];bracketsOpenedStack=[];constructor(a={"(":")","[":"]","{":"}",'"':"\""}){super([]),this.bracketPairs=a}afterElementsAdded(a){a.pluginData.autoCloseBrackets={automatedKeypresses:!1},a.textareaElement.addEventListener("keydown",b=>{this.checkBackspace(a,b)}),a.textareaElement.addEventListener("beforeinput",b=>{this.checkClosingBracket(a,b)}),a.textareaElement.addEventListener("input",b=>{this.checkOpeningBracket(a,b)})}checkClosingBracket(a,b){if(!a.pluginData.autoCloseBrackets.automatedKeypresses&&b.data==a.textareaElement.value[a.textareaElement.selectionStart])for(let c in this.bracketPairs){let d=this.bracketPairs[c];if(b.data==d){a.textareaElement.selectionStart=a.textareaElement.selectionEnd+=1,b.preventDefault();break}}}checkOpeningBracket(a,b){if(!a.pluginData.autoCloseBrackets.automatedKeypresses&&b.data in this.bracketPairs){let c=this.bracketPairs[b.data];a.pluginData.autoCloseBrackets.automatedKeypresses=!0,document.execCommand("insertText",!1,c),a.pluginData.autoCloseBrackets.automatedKeypresses=!1,a.textareaElement.selectionStart=a.textareaElement.selectionEnd-=1}}checkBackspace(a,b){if(!a.pluginData.autoCloseBrackets.automatedKeypresses&&"Backspace"==b.key&&a.textareaElement.selectionStart==a.textareaElement.selectionEnd){let b=this.bracketPairs[a.textareaElement.value[a.textareaElement.selectionStart-1]];null!=b&&a.textareaElement.value[a.textareaElement.selectionStart]==b&&(a.textareaElement.selectionEnd=a.textareaElement.selectionStart+1,a.textareaElement.selectionStart-=1)}}};code-input-js/plugins/autocomplete.css000066400000000000000000000006251506303517500204430ustar00rootroot00000000000000/** * Display a popup under the caret using the text in the code-input element. This works well with autocomplete suggestions. * Files: autocomplete.js / autocomplete.css */ code-input .code-input_autocomplete_popup { display: block; position: absolute; margin-top: 1em; /* Popup shows under the caret */ z-index: 100; } code-input .code-input_autocomplete_testpos { opacity: 0; }code-input-js/plugins/autocomplete.js000066400000000000000000000107071506303517500202710ustar00rootroot00000000000000/** * Display a popup under the caret using the text in the code-input element. This works well with autocomplete suggestions. * Files: autocomplete.js / autocomplete.css */ "use strict"; codeInput.plugins.Autocomplete = class extends codeInput.Plugin { /** * Pass in a function to create a plugin that displays the popup that takes in (popup element, textarea, textarea.selectionEnd). * @param {(popupElement: HTMLElement, textarea: HTMLTextAreaElement, selectionEnd: number) => void} updatePopupCallback a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd). */ constructor(updatePopupCallback) { super([]); // No observed attributes this.updatePopupCallback = updatePopupCallback; } /* When a key is pressed, or scrolling occurs, update the popup position */ updatePopup(codeInput, onlyScrolled) { let textarea = codeInput.textareaElement; let caretCoords = this.getCaretCoordinates(codeInput, textarea, textarea.selectionEnd, onlyScrolled); let popupElem = codeInput.querySelector(".code-input_autocomplete_popup"); popupElem.style.top = caretCoords.top + "px"; popupElem.style.left = caretCoords.left + "px"; if(!onlyScrolled) { this.updatePopupCallback(popupElem, textarea, textarea.selectionEnd, textarea.selectionStart); } } /* Create the popup element */ afterElementsAdded(codeInput) { let popupElem = document.createElement("div"); popupElem.classList.add("code-input_autocomplete_popup"); codeInput.appendChild(popupElem); let testPosPre = document.createElement("pre"); testPosPre.setAttribute("aria-hidden", true); // Hide for screen readers if(codeInput.templateObject.preElementStyled) { testPosPre.classList.add("code-input_autocomplete_testpos"); codeInput.appendChild(testPosPre); // Styled like first pre, but first pre found to update } else { let testPosCode = document.createElement("code"); testPosCode.classList.add("code-input_autocomplete_testpos"); testPosPre.appendChild(testPosCode); codeInput.appendChild(testPosPre); // Styled like first pre, but first pre found to update } let textarea = codeInput.textareaElement; textarea.addEventListener("input", () => { this.updatePopup(codeInput, false)}); textarea.addEventListener("selectionchange", () => { this.updatePopup(codeInput, false)}); } /** * Return the coordinates of the caret in a code-input * @param {codeInput.CodeInput} codeInput * @param {HTMLElement} textarea * @param {Number} charIndex * @param {boolean} onlyScrolled True if no edits have been made to the text and the caret hasn't been repositioned * @returns {Object} {"top": CSS top value in pixels, "left": CSS left value in pixels} */ getCaretCoordinates(codeInput, textarea, charIndex, onlyScrolled) { let afterSpan; if(onlyScrolled) { // No edits to text; don't update element - span at index 1 is after span let spans = codeInput.querySelector(".code-input_autocomplete_testpos").querySelectorAll("span"); if(spans.length < 2) { // Hasn't saved text in test pre to find pos // Need to regenerate text in test pre return this.getCaretCoordinates(codeInput, textarea, charIndex, false); } afterSpan = spans[1]; } else { /* Inspired by https://github.com/component/textarea-caret-position */ let testPosElem = codeInput.querySelector(".code-input_autocomplete_testpos"); let beforeSpan = document.createElement("span"); beforeSpan.textContent = textarea.value.substring(0, charIndex); afterSpan = document.createElement("span"); afterSpan.textContent = "."; // Placeholder // Clear test pre - https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild while (testPosElem.firstChild) { testPosElem.removeChild(testPosElem.firstChild); } testPosElem.appendChild(beforeSpan); testPosElem.appendChild(afterSpan); } return {"top": afterSpan.offsetTop - textarea.scrollTop, "left": afterSpan.offsetLeft - textarea.scrollLeft}; } updatePopupCallback = function() {}; } code-input-js/plugins/autocomplete.min.css000066400000000000000000000002331506303517500212200ustar00rootroot00000000000000code-input .code-input_autocomplete_popup{display:block;position:absolute;margin-top:1em;z-index:100}code-input .code-input_autocomplete_testpos{opacity:0}code-input-js/plugins/autocomplete.min.js000066400000000000000000000027431506303517500210540ustar00rootroot00000000000000"use strict";codeInput.plugins.Autocomplete=class extends codeInput.Plugin{constructor(a){super([]),this.updatePopupCallback=a}updatePopup(a,b){let c=a.textareaElement,d=this.getCaretCoordinates(a,c,c.selectionEnd,b),e=a.querySelector(".code-input_autocomplete_popup");e.style.top=d.top+"px",e.style.left=d.left+"px",b||this.updatePopupCallback(e,c,c.selectionEnd,c.selectionStart)}afterElementsAdded(a){let b=document.createElement("div");b.classList.add("code-input_autocomplete_popup"),a.appendChild(b);let c=document.createElement("pre");if(c.setAttribute("aria-hidden",!0),a.templateObject.preElementStyled)c.classList.add("code-input_autocomplete_testpos"),a.appendChild(c);else{let b=document.createElement("code");b.classList.add("code-input_autocomplete_testpos"),c.appendChild(b),a.appendChild(c)}let d=a.textareaElement;d.addEventListener("input",()=>{this.updatePopup(a,!1)}),d.addEventListener("selectionchange",()=>{this.updatePopup(a,!1)})}getCaretCoordinates(a,b,c,d){let e;if(d){let d=a.querySelector(".code-input_autocomplete_testpos").querySelectorAll("span");if(2>d.length)return this.getCaretCoordinates(a,b,c,!1);e=d[1]}else{let d=a.querySelector(".code-input_autocomplete_testpos"),f=document.createElement("span");for(f.textContent=b.value.substring(0,c),e=document.createElement("span"),e.textContent=".";d.firstChild;)d.removeChild(d.firstChild);d.appendChild(f),d.appendChild(e)}return{top:e.offsetTop-b.scrollTop,left:e.offsetLeft-b.scrollLeft}}updatePopupCallback=function(){}};code-input-js/plugins/autodetect.js000066400000000000000000000021561506303517500177300ustar00rootroot00000000000000/** * Autodetect the language live and change the `lang` attribute using the syntax highlighter's * autodetect capabilities. Works with highlight.js only. * Files: autodetect.js */ "use strict"; codeInput.plugins.Autodetect = class extends codeInput.Plugin { constructor() { super([]); // No observed attributes } /* Remove previous language class */ beforeHighlight(codeInput) { let resultElement = codeInput.codeElement; resultElement.className = ""; // CODE resultElement.parentElement.className = ""; // PRE } /* Get new language class and set `language` attribute */ afterHighlight(codeInput) { let langClass = codeInput.codeElement.className || codeInput.preElement.className; let lang = langClass.match(/lang(\w|-)*/i)[0]; // Get word starting with lang...; Get outer bracket lang = lang.match(/(?<=-)(\w|-)*/i)[0]; if(lang == "undefined") { codeInput.removeAttribute("language"); codeInput.removeAttribute("lang"); } else { codeInput.setAttribute("language", lang); } } } code-input-js/plugins/autodetect.min.js000066400000000000000000000006401506303517500205060ustar00rootroot00000000000000"use strict";codeInput.plugins.Autodetect=class extends codeInput.Plugin{constructor(){super([])}beforeHighlight(a){let b=a.codeElement;b.className="",b.parentElement.className=""}afterHighlight(a){let b=a.codeElement.className||a.preElement.className,c=b.match(/lang(\w|-)*/i)[0];c=c.match(/(?<=-)(\w|-)*/i)[0],"undefined"==c?(a.removeAttribute("language"),a.removeAttribute("lang")):a.setAttribute("language",c)}};code-input-js/plugins/find-and-replace.css000066400000000000000000000065371506303517500210430ustar00rootroot00000000000000/* Find functionality matches */ .code-input_find-and-replace_find-match { color: inherit; text-shadow: none!important; background-color: #ffff00!important; } .code-input_find-and-replace_find-match-focused, .code-input_find-and-replace_find-match-focused * { background-color: #ff8800!important; color: black!important; } .code-input_find-and-replace_start-newline::before { content: "⤶"; } /* Find-and-replace dialog */ @keyframes code-input_find-and-replace_roll-in { 0% {opacity: 0; transform: translateY(-34px);} 100% {opacity: 1; transform: translateY(0px);} } @keyframes code-input_find-and-replace_roll-out { 0% {opacity: 1;top: 0;} 100% {opacity: 0;top: -34px;} } .code-input_find-and-replace_dialog { position: absolute; top: 0; right: 14px; padding: 6px; padding-top: 8px; border: solid 1px #00000044; background-color: white; border-radius: 6px; box-shadow: 0 .2em 1em .2em rgba(0, 0, 0, 0.16); } .code-input_find-and-replace_dialog:not(.code-input_find-and-replace_hidden-dialog) { animation: code-input_find-and-replace_roll-in .2s; opacity: 1; pointer-events: all; } .code-input_find-and-replace_dialog.code-input_find-and-replace_hidden-dialog { animation: code-input_find-and-replace_roll-out .2s; opacity: 0; pointer-events: none; } .code-input_find-and-replace_dialog input::placeholder { font-size: 80%; } .code-input_find-and-replace_dialog input { position: relative; width: 240px; height: 32px; top: -3px; font-size: large; color: #000000aa; border: 0; } .code-input_find-and-replace_dialog input.code-input_find-and-replace_error { color: #ff0000aa; } .code-input_find-and-replace_dialog button, .code-input_find-and-replace_dialog input[type="checkbox"] { display: inline-block; line-height: 24px; font-size: 22px; cursor: pointer; appearance: none; width: min-content; margin: 5px; padding: 5px; border: 0; background-color: #dddddd; text-align: center; color: black; vertical-align: top; } .code-input_find-and-replace_dialog input[type="checkbox"].code-input_find-and-replace_case-sensitive-checkbox::before { content: "Aa"; } .code-input_find-and-replace_dialog input[type="checkbox"].code-input_find-and-replace_reg-exp-checkbox::before { content: ".*"; } .code-input_find-and-replace_dialog button:hover, .code-input_find-and-replace_dialog input[type="checkbox"]:hover { background-color: #bbbbbb; } .code-input_find-and-replace_dialog input[type="checkbox"]:checked { background-color: #222222; color: white; } .code-input_find-and-replace_match-description { display: block; /* So not on same line as other */ color: #444444; } .code-input_find-and-replace_dialog details summary, .code-input_find-and-replace_dialog button { cursor: pointer; } .code-input_find-and-replace_dialog button.code-input_find-and-replace_button-hidden { opacity: 0; pointer-events: none; } /* Cancel icon */ .code-input_find-and-replace_dialog span { display: block; float: right; margin: 5px; padding: 5px; width: 24px; line-height: 24px; font-family: system-ui; font-size: 22px; font-weight: 500; text-align: center; border-radius: 50%; color: black; opacity: 0.6; } .code-input_find-and-replace_dialog span:before { content: "\00d7"; } .code-input_find-and-replace_dialog span:hover { opacity: .8; background-color: #00000018; } code-input-js/plugins/find-and-replace.js000066400000000000000000001133771506303517500206700ustar00rootroot00000000000000/** * Add Find-and-Replace (Ctrl+F for find, Ctrl+H for replace by default) functionality to the code editor. * Files: find-and-replace.js / find-and-replace.css */ "use strict"; codeInput.plugins.FindAndReplace = class extends codeInput.Plugin { useCtrlF = false; useCtrlH = false; findMatchesOnValueChange = true; // Needed so the program can insert text to the find value and thus add it to Ctrl+Z without highlighting matches. instructions = { start: "Search for matches in your code.", none: "No matches", oneFound: "1 match found.", matchIndex: (index, count) => `${index} of ${count} matches.`, error: (message) => `Error: ${message}`, infiniteLoopError: "Causes an infinite loop", closeDialog: "Close Dialog and Return to Editor", findPlaceholder: "Find", findCaseSensitive: "Match Case Sensitive", findRegExp: "Use JavaScript Regular Expression", replaceTitle: "Replace", replacePlaceholder: "Replace with", findNext: "Find Next Occurrence", findPrevious: "Find Previous Occurrence", replaceActionShort: "Replace", replaceAction: "Replace This Occurrence", replaceAllActionShort: "Replace All", replaceAllAction: "Replace All Occurrences" }; /** * Create a find-and-replace command plugin to pass into a template * @param {boolean} useCtrlF Should Ctrl+F be overriden for find-and-replace find functionality? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, false)`. * @param {boolean} useCtrlH Should Ctrl+H be overriden for find-and-replace replace functionality? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, true)`. * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the find-and-replace.js source code for the English text and available keys. */ constructor(useCtrlF = true, useCtrlH = true, instructionTranslations = {}) { super([]); // No observed attributes this.useCtrlF = useCtrlF; this.useCtrlH = useCtrlH; this.addTranslations(this.instructions, instructionTranslations); } /* Add keystroke events */ afterElementsAdded(codeInput) { const textarea = codeInput.textareaElement; if(this.useCtrlF) { textarea.addEventListener('keydown', (event) => { this.checkCtrlF(codeInput, event); }); } if(this.useCtrlH) { textarea.addEventListener('keydown', (event) => { this.checkCtrlH(codeInput, event); }); } } /* After highlight, retry match highlighting */ afterHighlight(codeInput) { if(codeInput.pluginData.findAndReplace != undefined && codeInput.pluginData.findAndReplace.dialog != undefined) { if(!codeInput.pluginData.findAndReplace.dialog.classList.contains("code-input_find-and-replace_hidden-dialog")) { // Code updated and dialog open - re-highlight find matches codeInput.pluginData.findAndReplace.dialog.findMatchState.rehighlightMatches(); this.updateMatchDescription(codeInput.pluginData.findAndReplace.dialog); if(codeInput.pluginData.findAndReplace.dialog.findMatchState.numMatches == 0) { // No more matches after editing codeInput.pluginData.findAndReplace.dialog.findInput.classList.add('code-input_find-and-replace_error'); } } } } /* Get a Regular Expression to match a specific piece of text, by escaping the text: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions */ text2RegExp(string, caseSensitive, stringIsRegexp) { // "i" flag means case-"i"nsensitive return new RegExp(stringIsRegexp ? string : string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), caseSensitive ? "g" : "gi"); // $& means the whole matched string } /* Update the dialog description to show the find matches */ updateMatchDescription(dialog) { // 1-indexed if(dialog.findInput.value.length == 0) { dialog.matchDescription.textContent = this.instructions.start; } else if(dialog.findMatchState.numMatches <= 0) { dialog.matchDescription.textContent = this.instructions.none; } else if(dialog.findMatchState.numMatches == 1) { dialog.matchDescription.textContent = this.instructions.oneFound; } else { dialog.matchDescription.textContent = this.instructions.matchIndex(dialog.findMatchState.focusedMatchID+1, dialog.findMatchState.numMatches); } } /* Called with a find input keyup event to find all matches in the code and focus the next match if Enter is pressed */ updateFindMatches(dialog) { // Update matches for find functionality; debounce it to prevent delay with single-character search let oldValue = dialog.findInput.value; setTimeout(() => { if(oldValue == dialog.findInput.value) { // Stopped typing dialog.findMatchState.clearMatches(); if(oldValue.length > 0) { try { dialog.findMatchState.updateMatches(this.text2RegExp(dialog.findInput.value, dialog.findCaseSensitiveCheckbox.checked, dialog.findRegExpCheckbox.checked)); } catch (err) { if(err instanceof SyntaxError) { // Syntax error due to malformed RegExp dialog.findInput.classList.add('code-input_find-and-replace_error'); // Only show last part of error message let messageParts = err.message.split(": "); dialog.matchDescription.textContent = this.instructions.error(messageParts[messageParts.length-1]); // Show only last part of error. return; } else { throw err; } } if(dialog.findMatchState.numMatches > 0) { dialog.findInput.classList.remove('code-input_find-and-replace_error'); } else { // No matches - error dialog.findInput.classList.add('code-input_find-and-replace_error'); } } this.updateMatchDescription(dialog); } }, 100); } /* Deal with Enter being pressed in the find field */ checkFindPrompt(dialog, codeInput, event) { if (event.key == 'Enter') { // Find next match dialog.findMatchState.nextMatch(); this.updateMatchDescription(dialog); } } /* Deal with Enter being pressed in the replace field */ checkReplacePrompt(dialog, codeInput, event) { if (event.key == 'Enter') { // Replace focused match dialog.findMatchState.replaceOnce(dialog.replaceInput.value); dialog.replaceInput.focus(); this.updateMatchDescription(dialog); } } /* Called with a dialog box keyup event to close and clear the dialog box */ cancelPrompt(dialog, codeInput, event) { event.preventDefault(); // Add current value of find/replace to Ctrl+Z stack. this.findMatchesOnValueChange = false; dialog.findInput.focus(); dialog.findInput.selectionStart = 0; dialog.findInput.selectionEnd = dialog.findInput.value.length; document.execCommand("insertText", false, dialog.findInput.value); this.findMatchesOnValueChange = true; // Reset original selection in code-input dialog.textarea.focus(); dialog.setAttribute("inert", true); // Hide from keyboard navigation when closed. dialog.setAttribute("tabindex", -1); // Hide from keyboard navigation when closed. dialog.setAttribute("aria-hidden", true); // Hide from screen reader when closed. if(dialog.findMatchState.numMatches > 0) { // Select focused match codeInput.textareaElement.selectionStart = dialog.findMatchState.matchStartIndexes[dialog.findMatchState.focusedMatchID]; codeInput.textareaElement.selectionEnd = dialog.findMatchState.matchEndIndexes[dialog.findMatchState.focusedMatchID]; } else { // Select text selected before codeInput.textareaElement.selectionStart = dialog.selectionStart; codeInput.textareaElement.selectionEnd = dialog.selectionEnd; } dialog.findMatchState.clearMatches(); // Remove dialog after animation dialog.classList.add('code-input_find-and-replace_hidden-dialog'); } /** * Show a find-and-replace dialog. * @param {codeInput.CodeInput} codeInputElement the `` element. * @param {boolean} replacePartExpanded whether the replace part of the find-and-replace dialog should be expanded */ showPrompt(codeInputElement, replacePartExpanded) { let dialog; if(codeInputElement.pluginData.findAndReplace == undefined || codeInputElement.pluginData.findAndReplace.dialog == undefined) { const textarea = codeInputElement.textareaElement; dialog = document.createElement('div'); const findInput = document.createElement('input'); const findCaseSensitiveCheckbox = document.createElement('input'); const findRegExpCheckbox = document.createElement('input'); // TODO in next major version: use more semantic HTML element than code const matchDescription = document.createElement('code'); matchDescription.setAttribute("aria-live", "assertive"); // Screen reader must read the number of matches found. const replaceInput = document.createElement('input'); const replaceDropdown = document.createElement('details'); const replaceSummary = document.createElement('summary'); const buttonContainer = document.createElement('div'); const findNextButton = document.createElement('button'); const findPreviousButton = document.createElement('button'); const replaceButton = document.createElement('button'); const replaceAllButton = document.createElement('button'); // TODO: Make a button element (semantic HTML for accessibility) in next major version const cancel = document.createElement('span'); cancel.setAttribute("role", "button"); cancel.setAttribute("aria-label", this.instructions.closeDialog); cancel.setAttribute("tabindex", 0); // Visible to keyboard navigation cancel.setAttribute("title", this.instructions.closeDialog); buttonContainer.appendChild(findNextButton); buttonContainer.appendChild(findPreviousButton); buttonContainer.appendChild(replaceButton); buttonContainer.appendChild(replaceAllButton); buttonContainer.appendChild(cancel); dialog.appendChild(buttonContainer); dialog.appendChild(findInput); dialog.appendChild(findRegExpCheckbox); dialog.appendChild(findCaseSensitiveCheckbox); dialog.appendChild(matchDescription); replaceDropdown.appendChild(replaceSummary); replaceDropdown.appendChild(replaceInput); dialog.appendChild(replaceDropdown); dialog.className = 'code-input_find-and-replace_dialog'; findInput.spellcheck = false; findInput.placeholder = this.instructions.findPlaceholder; findCaseSensitiveCheckbox.setAttribute("type", "checkbox"); findCaseSensitiveCheckbox.title = this.instructions.findCaseSensitive; findCaseSensitiveCheckbox.classList.add("code-input_find-and-replace_case-sensitive-checkbox"); findRegExpCheckbox.setAttribute("type", "checkbox"); findRegExpCheckbox.title = this.instructions.findRegExp; findRegExpCheckbox.classList.add("code-input_find-and-replace_reg-exp-checkbox"); matchDescription.textContent = this.instructions.start; matchDescription.classList.add("code-input_find-and-replace_match-description"); replaceSummary.innerText = this.instructions.replaceTitle; replaceInput.spellcheck = false; replaceInput.placeholder = this.instructions.replacePlaceholder; findNextButton.innerText = "↓"; findNextButton.title = this.instructions.findNext; findNextButton.setAttribute("aria-label", this.instructions.findNext); findPreviousButton.innerText = "↑"; findPreviousButton.title = this.instructions.findPrevious; findNextButton.setAttribute("aria-label", this.instructions.findPrevious); replaceButton.className = 'code-input_find-and-replace_button-hidden'; replaceButton.innerText = this.instructions.replaceActionShort; replaceButton.title = this.instructions.replaceAction; replaceButton.addEventListener("focus", () => { // Show replace section replaceDropdown.setAttribute("open", true); }); replaceAllButton.className = 'code-input_find-and-replace_button-hidden'; replaceAllButton.innerText = this.instructions.replaceAllActionShort; replaceAllButton.title = this.instructions.replaceAllAction; replaceAllButton.addEventListener("focus", () => { // Show replace section replaceDropdown.setAttribute("open", true); }); findNextButton.addEventListener("click", (event) => { // Stop form submit event.preventDefault(); dialog.findMatchState.nextMatch(); this.updateMatchDescription(dialog); }); findPreviousButton.addEventListener("click", () => { // Stop form submit event.preventDefault(); dialog.findMatchState.previousMatch(); this.updateMatchDescription(dialog); }); replaceButton.addEventListener("click", (event) => { // Stop form submit event.preventDefault(); dialog.findMatchState.replaceOnce(replaceInput.value); dialog.focus(); }); replaceAllButton.addEventListener("click", (event) => { // Stop form submit event.preventDefault(); dialog.findMatchState.replaceAll(replaceInput.value); replaceAllButton.focus(); }); replaceDropdown.addEventListener("toggle", () => { // When replace dropdown opened show replace buttons replaceButton.classList.toggle("code-input_find-and-replace_button-hidden"); replaceAllButton.classList.toggle("code-input_find-and-replace_button-hidden"); }); // To store the state of find-and-replace functionality dialog.findMatchState = new codeInput.plugins.FindAndReplace.FindMatchState(codeInputElement); dialog.codeInput = codeInputElement; dialog.textarea = textarea; dialog.findInput = findInput; dialog.findCaseSensitiveCheckbox = findCaseSensitiveCheckbox; dialog.findRegExpCheckbox = findRegExpCheckbox; dialog.matchDescription = matchDescription; dialog.replaceInput = replaceInput; dialog.replaceDropdown = replaceDropdown; if(this.checkCtrlH) { findInput.addEventListener('keydown', (event) => { /* Open replace part on Ctrl+H */ if (event.ctrlKey && event.key == 'h') { event.preventDefault(); replaceDropdown.setAttribute("open", true); } }); } findInput.addEventListener('keypress', (event) => { /* Stop enter from submitting form */ if (event.key == 'Enter') event.preventDefault(); }); replaceInput.addEventListener('keypress', (event) => { /* Stop enter from submitting form */ if (event.key == 'Enter') event.preventDefault(); }); replaceInput.addEventListener('input', (event) => { // Ctrl+Z can trigger this. If the dialog/replace dropdown aren't open, open them! if(dialog.classList.contains("code-input_find-and-replace_hidden-dialog")) { // Show prompt this.showPrompt(dialog.codeInput, true); } else if(!dialog.replaceDropdown.hasAttribute("open")) { // Open dropdown dialog.replaceDropdown.setAttribute("open", true); } }); dialog.addEventListener('keyup', (event) => { /* Close prompt on Enter pressed */ if (event.key == 'Escape') this.cancelPrompt(dialog, codeInputElement, event); }); findInput.addEventListener('keyup', (event) => { this.checkFindPrompt(dialog, codeInputElement, event); }); findInput.addEventListener('input', (event) => { if(this.findMatchesOnValueChange) this.updateFindMatches(dialog); // Ctrl+Z can trigger this. If the dialog isn't open, open it! if(dialog.classList.contains("code-input_find-and-replace_hidden-dialog")) { this.showPrompt(dialog.codeInput, false); } }); findCaseSensitiveCheckbox.addEventListener('click', (event) => { this.updateFindMatches(dialog); }); findRegExpCheckbox.addEventListener('click', (event) => { this.updateFindMatches(dialog); }); replaceInput.addEventListener('keyup', (event) => { this.checkReplacePrompt(dialog, codeInputElement, event); replaceInput.focus(); }); cancel.addEventListener('click', (event) => { this.cancelPrompt(dialog, codeInputElement, event); }); cancel.addEventListener('keypress', (event) => { if (event.key == "Space" || event.key == "Enter") this.cancelPrompt(dialog, codeInputElement, event); }); codeInputElement.dialogContainerElement.appendChild(dialog); codeInputElement.pluginData.findAndReplace = {dialog: dialog}; findInput.focus(); if(replacePartExpanded) { replaceDropdown.setAttribute("open", true); } // Save selection position dialog.selectionStart = codeInputElement.textareaElement.selectionStart; dialog.selectionEnd = codeInputElement.textareaElement.selectionEnd; if(dialog.selectionStart < dialog.selectionEnd) { // Copy selected text to Find input let textToFind = codeInputElement.textareaElement.value.substring(dialog.selectionStart, dialog.selectionEnd); dialog.findInput.focus(); dialog.findInput.selectionStart = 0; dialog.findInput.selectionEnd = dialog.findInput.value.length; document.execCommand("insertText", false, textToFind); } } else { dialog = codeInputElement.pluginData.findAndReplace.dialog; // Re-open dialog dialog.classList.remove("code-input_find-and-replace_hidden-dialog"); dialog.removeAttribute("inert"); // Show to keyboard navigation when open. dialog.setAttribute("tabindex", 0); // Show to keyboard navigation when open. dialog.removeAttribute("aria-hidden"); // Show to screen reader when open. dialog.findInput.focus(); if(replacePartExpanded) { dialog.replaceDropdown.setAttribute("open", true); } else { dialog.replaceDropdown.removeAttribute("open"); } } // Save selection position dialog.selectionStart = codeInputElement.textareaElement.selectionStart; dialog.selectionEnd = codeInputElement.textareaElement.selectionEnd; if(dialog.selectionStart < dialog.selectionEnd) { // Copy selected text to Find input let textToFind = codeInputElement.textareaElement.value.substring(dialog.selectionStart, dialog.selectionEnd); dialog.findInput.focus(); dialog.findInput.selectionStart = 0; dialog.findInput.selectionEnd = dialog.findInput.value.length; document.execCommand("insertText", false, textToFind); } // Highlight matches this.updateFindMatches(dialog); } /* Event handler for keydown event that makes Ctrl+F open find dialog */ checkCtrlF(codeInput, event) { if (event.ctrlKey && event.key == 'f') { event.preventDefault(); this.showPrompt(codeInput, false); } } /* Event handler for keydown event that makes Ctrl+H open find+replace dialog */ checkCtrlH(codeInput, event) { if (event.ctrlKey && event.key == 'h') { event.preventDefault(); this.showPrompt(codeInput, true); } } } // Number of matches to highlight at once, for efficiency reasons const CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE = 500; /* This class stores the state of find and replace in a specific code-input element */ codeInput.plugins.FindAndReplace.FindMatchState = class { codeInput = null; lastValue = null; // of codeInput, so know when to update matches lastSearchRegexp = null; // to be able to update matches numMatches = 0; focusedMatchID = 0; matchStartIndexes = []; // For each match in order matchEndIndexes = []; // For each match in order focusedMatchStartIndex = 0; matchBlocksHighlighted = []; // Each block represents a CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE number of matches (up to it for the last), and is highlighted separately to prevent excessive delay. constructor(codeInputElement) { this.focusedMatchStartIndex = codeInputElement.textareaElement.selectionStart; this.codeInput = codeInputElement; } /* Clear the find matches, often to prepare for new matches to be added. */ clearMatches() { // Delete match information saved here this.numMatches = 0; this.matchStartIndexes = []; this.matchEndIndexes = []; // Remove generated spans to hold matches let tempSpans = this.codeInput.codeElement.querySelectorAll(".code-input_find-and-replace_temporary-span"); for(let i = 0; i < tempSpans.length; i++) { // Replace with textContent as Text node tempSpans[i].parentElement.replaceChild(new Text(tempSpans[i].textContent), tempSpans[i]); } // Remove old matches let oldMatches = this.codeInput.codeElement.querySelectorAll(".code-input_find-and-replace_find-match"); for(let i = 0; i < oldMatches.length; i++) { oldMatches[i].removeAttribute("data-code-input_find-and-replace_match-id"); // No match ID oldMatches[i].classList.remove("code-input_find-and-replace_find-match"); // No highlighting oldMatches[i].classList.remove("code-input_find-and-replace_find-match-focused"); // No focused highlighting } } /* Refresh the matches of find functionality with a new search term Regular Expression. */ updateMatches(searchRegexp) { this.lastSearchRegexp = searchRegexp; this.lastValue = this.codeInput.value; // Add matches let matchID = 0; let match; // Search result this.matchStartIndexes = []; this.matchEndIndexes = []; this.matchBlocksHighlighted = []; // Make all match blocks be not highlighted except for currently focused let focusedMatchBlock = Math.floor(this.focusedMatchID / CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE); for(let i = 0; i < focusedMatchBlock; i++) { this.matchBlocksHighlighted.push(false); } this.matchBlocksHighlighted.push(true); while ((match = searchRegexp.exec(this.codeInput.value)) !== null) { let matchText = match[0]; if(matchText.length == 0) { throw SyntaxError(this.instructions.infiniteLoopError); } // Add next match block if needed let currentMatchBlock = Math.floor(matchID / CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE); if(this.matchBlocksHighlighted.length < currentMatchBlock) { this.matchBlocksHighlighted.push(false); } if(this.matchBlocksHighlighted[currentMatchBlock]) { this.highlightMatch(matchID, this.codeInput.codeElement, match.index, match.index + matchText.length); } this.matchStartIndexes.push(match.index); this.matchEndIndexes.push(match.index + matchText.length); matchID++; } this.numMatches = matchID; if(this.numMatches > 0) { this.focusMatch(); } } /* Highlight all currently found matches again if there are any matches */ rehighlightMatches() { this.updateMatches(this.lastSearchRegexp); this.focusMatch(); } /* Replace one match with the replacementText given */ replaceOnce(replacementText) { if(this.numMatches > 0 && replacementText != this.codeInput.value.substring(0, this.matchStartIndexes[this.focusedMatchID], this.matchEndIndexes[this.focusedMatchID])) { // Go to next match this.focusedMatchStartIndex += replacementText.length; // Select the match this.codeInput.handleEventsFromTextarea = false; this.codeInput.textareaElement.focus(); this.codeInput.textareaElement.selectionStart = this.matchStartIndexes[this.focusedMatchID]; this.codeInput.textareaElement.selectionEnd = this.matchEndIndexes[this.focusedMatchID]; // Replace it with the replacement text document.execCommand("insertText", false, replacementText); this.codeInput.handleEventsFromTextarea = true; } } /* Replace all matches with the replacementText given */ replaceAll(replacementText) { const replacementNumChars = replacementText.length; let numCharsAdded = 0; // So can adjust match positions for(let i = 0; i < this.numMatches; i++) { // Replace each match // Select the match, taking into account characters added before this.codeInput.handleEventsFromTextarea = false; this.codeInput.textareaElement.focus(); this.codeInput.textareaElement.selectionStart = this.matchStartIndexes[i] + numCharsAdded; this.codeInput.textareaElement.selectionEnd = this.matchEndIndexes[i] + numCharsAdded; numCharsAdded += replacementNumChars - (this.matchEndIndexes[i] - this.matchStartIndexes[i]); // Replace it with the replacement text document.execCommand("insertText", false, replacementText); this.codeInput.handleEventsFromTextarea = true; } } /* Focus on the next match found in the find results */ nextMatch() { this.focusMatch((this.focusedMatchID + 1) % this.numMatches); } /* Focus on the previous match found in the find results */ previousMatch() { this.focusMatch((this.focusedMatchID + this.numMatches - 1) % this.numMatches); } /* Change the focused match to the match with ID matchID. */ focusMatch(matchID = undefined) { if(matchID === undefined) { // Focus on first match after focusedMatchStartIndex matchID = 0; while(matchID < this.matchStartIndexes.length && this.matchStartIndexes[matchID] < this.focusedMatchStartIndex) { matchID++; } if(matchID >= this.matchStartIndexes.length) { // After last match, move back to first match matchID = 0; } } // Save focusedMatchStartIndex so if code changed match stays at same place this.focusedMatchStartIndex = this.matchStartIndexes[matchID]; this.focusedMatchID = matchID; // Delete old focus let oldFocused = this.codeInput.codeElement.querySelectorAll(".code-input_find-and-replace_find-match-focused"); for(let i = 0; i < oldFocused.length; i++) { oldFocused[i].classList.remove("code-input_find-and-replace_find-match-focused"); } // Highlight match block if needed let highlightedMatchBlock = Math.floor(matchID / CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE); if(!this.matchBlocksHighlighted[highlightedMatchBlock]) { this.matchBlocksHighlighted[highlightedMatchBlock] = true; for(let i = CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE*highlightedMatchBlock; i < CODE_INPUT_FIND_AND_REPLACE_MATCH_BLOCK_SIZE*(highlightedMatchBlock+1); i++) { // Highlight match this.highlightMatch(i, this.codeInput.codeElement, this.matchStartIndexes[i], this.matchEndIndexes[i]) } } // Add new focus let newFocused = this.codeInput.codeElement.querySelectorAll(`.code-input_find-and-replace_find-match[data-code-input_find-and-replace_match-id="${matchID}"]`); for(let i = 0; i < newFocused.length; i++) { newFocused[i].classList.add("code-input_find-and-replace_find-match-focused"); } if(newFocused.length > 0) { this.codeInput.scrollTo(newFocused[0].offsetLeft - this.codeInput.offsetWidth / 2, newFocused[0].offsetTop - this.codeInput.offsetHeight / 2); // So focused match in centre of screen } } /* Highlight a match from the find functionality given its start and end indexes in the text. Start from the currentElement. Use the matchID in the class name of the match so different matches can be identified. */ highlightMatch(matchID, currentElement, startIndex, endIndex) { const lines = currentElement.textContent.substring(startIndex, endIndex).split("\n"); let lineStartIndex = startIndex; for(let i = 0; i < lines.length; i++) { if(i == 0) { this.highlightMatchNewlineOnlyAtStart(matchID, currentElement, lineStartIndex, lineStartIndex+lines[i].length); } else { // Include previous newline character too this.highlightMatchNewlineOnlyAtStart(matchID, currentElement, lineStartIndex-1, lineStartIndex+lines[i].length); } lineStartIndex += lines[i].length + 1; // +1 for newline character } } /* Same as highlightMatch, but assumes any newlines in the match are at the startIndex (for simpler code). */ highlightMatchNewlineOnlyAtStart(matchID, currentElement, startIndex, endIndex) { for(let i = 0; i < currentElement.childNodes.length; i++) { let childElement = currentElement.childNodes[i]; let childText = childElement.textContent; let noInnerElements = false; if(childElement.nodeType == 3) { // Text node if(i + 1 < currentElement.childNodes.length && currentElement.childNodes[i+1].nodeType == 3) { // Can merge with next text node currentElement.childNodes[i+1].textContent = childElement.textContent + currentElement.childNodes[i+1].textContent; // Merge textContent with next node currentElement.removeChild(childElement); // Delete this node i--; // As an element removed continue; // Move to next node } // Text node - replace with span noInnerElements = true; let replacementElement = document.createElement("span"); replacementElement.textContent = childText; replacementElement.classList.add("code-input_find-and-replace_temporary-span"); // Can remove span later currentElement.replaceChild(replacementElement, childElement); childElement = replacementElement; } if(startIndex <= 0) { // Started highlight if(childText.length >= endIndex) { // Match ends in childElement if(noInnerElements) { // Text node - highlight first part let startSpan = document.createElement("span"); startSpan.classList.add("code-input_find-and-replace_find-match"); // Highlighted startSpan.setAttribute("data-code-input_find-and-replace_match-id", matchID); startSpan.classList.add("code-input_find-and-replace_temporary-span"); // Can remove span later startSpan.textContent = childText.substring(0, endIndex); if(startSpan.textContent[0] == "\n") { // Newline at start - make clear startSpan.classList.add("code-input_find-and-replace_start-newline"); } let endText = childText.substring(endIndex); childElement.textContent = endText; childElement.insertAdjacentElement('beforebegin', startSpan); i++; // An extra element has been added return; } else { this.highlightMatchNewlineOnlyAtStart(matchID, childElement, 0, endIndex); } // Match ended - nothing to do after backtracking return; } else { // Match goes through child element childElement.classList.add("code-input_find-and-replace_find-match"); // Highlighted childElement.setAttribute("data-code-input_find-and-replace_match-id", matchID); if(childElement.textContent[0] == "\n") { // Newline at start - make clear childElement.classList.add("code-input_find-and-replace_start-newline"); } } } else if(childText.length > startIndex) { // Match starts in childElement if(noInnerElements) { if(childText.length > endIndex) { // Match starts and ends in childElement - highlight middle part // Text node - highlight last part let startSpan = document.createElement("span"); startSpan.classList.add("code-input_find-and-replace_temporary-span"); // Can remove span later startSpan.textContent = childText.substring(0, startIndex); let middleText = childText.substring(startIndex, endIndex); childElement.textContent = middleText; childElement.classList.add("code-input_find-and-replace_find-match"); // Highlighted childElement.setAttribute("data-code-input_find-and-replace_match-id", matchID); if(childElement.textContent[0] == "\n") { // Newline at start - make clear childElement.classList.add("code-input_find-and-replace_start-newline"); } let endSpan = document.createElement("span"); endSpan.classList.add("code-input_find-and-replace_temporary-span"); // Can remove span later endSpan.textContent = childText.substring(endIndex); childElement.insertAdjacentElement('beforebegin', startSpan); childElement.insertAdjacentElement('afterend', endSpan); i++; // 2 extra elements have been added } else { // Text node - highlight last part let startText = childText.substring(0, startIndex); childElement.textContent = startText; let endSpan = document.createElement("span"); endSpan.classList.add("code-input_find-and-replace_find-match"); // Highlighted endSpan.setAttribute("data-code-input_find-and-replace_match-id", matchID); endSpan.classList.add("code-input_find-and-replace_temporary-span"); // Can remove span later endSpan.textContent = childText.substring(startIndex); if(endSpan.textContent[0] == "\n") { // Newline at start - make clear endSpan.classList.add("code-input_find-and-replace_start-newline"); } childElement.insertAdjacentElement('afterend', endSpan); i++; // An extra element has been added } } else { this.highlightMatchNewlineOnlyAtStart(matchID, childElement, startIndex, endIndex); } if(childText.length > endIndex) { // Match completely in childElement - nothing to do after backtracking return; } } // Make indexes skip the element startIndex -= childText.length; endIndex -= childText.length; } } } code-input-js/plugins/find-and-replace.min.css000066400000000000000000000054301506303517500216140ustar00rootroot00000000000000.code-input_find-and-replace_find-match{color:inherit;text-shadow:none!important;background-color:#ff0!important}.code-input_find-and-replace_find-match-focused,.code-input_find-and-replace_find-match-focused *{background-color:#f80!important;color:#000!important}.code-input_find-and-replace_start-newline::before{content:"⤶"}@keyframes code-input_find-and-replace_roll-in{0%{opacity:0;transform:translateY(-34px)}100%{opacity:1;transform:translateY(0)}}@keyframes code-input_find-and-replace_roll-out{0%{opacity:1;top:0}100%{opacity:0;top:-34px}}.code-input_find-and-replace_dialog{position:absolute;top:0;right:14px;padding:6px;padding-top:8px;border:solid 1px #00000044;background-color:#fff;border-radius:6px;box-shadow:0 .2em 1em .2em rgba(0,0,0,.16)}.code-input_find-and-replace_dialog:not(.code-input_find-and-replace_hidden-dialog){animation:code-input_find-and-replace_roll-in .2s;opacity:1;pointer-events:all}.code-input_find-and-replace_dialog.code-input_find-and-replace_hidden-dialog{animation:code-input_find-and-replace_roll-out .2s;opacity:0;pointer-events:none}.code-input_find-and-replace_dialog input::placeholder{font-size:80%}.code-input_find-and-replace_dialog input{position:relative;width:240px;height:32px;top:-3px;font-size:large;color:#000000aa;border:0}.code-input_find-and-replace_dialog input.code-input_find-and-replace_error{color:#ff0000aa}.code-input_find-and-replace_dialog button,.code-input_find-and-replace_dialog input[type=checkbox]{display:inline-block;line-height:24px;font-size:22px;cursor:pointer;appearance:none;width:min-content;margin:5px;padding:5px;border:0;background-color:#ddd;text-align:center;color:#000;vertical-align:top}.code-input_find-and-replace_dialog input[type=checkbox].code-input_find-and-replace_case-sensitive-checkbox::before{content:"Aa"}.code-input_find-and-replace_dialog input[type=checkbox].code-input_find-and-replace_reg-exp-checkbox::before{content:".*"}.code-input_find-and-replace_dialog button:hover,.code-input_find-and-replace_dialog input[type=checkbox]:hover{background-color:#bbb}.code-input_find-and-replace_dialog input[type=checkbox]:checked{background-color:#222;color:#fff}.code-input_find-and-replace_match-description{display:block;color:#444}.code-input_find-and-replace_dialog button,.code-input_find-and-replace_dialog details summary{cursor:pointer}.code-input_find-and-replace_dialog button.code-input_find-and-replace_button-hidden{opacity:0;pointer-events:none}.code-input_find-and-replace_dialog span{display:block;float:right;margin:5px;padding:5px;width:24px;line-height:24px;font-family:system-ui;font-size:22px;font-weight:500;text-align:center;border-radius:50%;color:#000;opacity:.6}.code-input_find-and-replace_dialog span:before{content:"\00d7"}.code-input_find-and-replace_dialog span:hover{opacity:.8;background-color:#00000018}code-input-js/plugins/find-and-replace.min.js000066400000000000000000000372771506303517500214560ustar00rootroot00000000000000"use strict";codeInput.plugins.FindAndReplace=class extends codeInput.Plugin{useCtrlF=!1;useCtrlH=!1;findMatchesOnValueChange=!0;instructions={start:"Search for matches in your code.",none:"No matches",oneFound:"1 match found.",matchIndex:(a,b)=>`${a} of ${b} matches.`,error:a=>`Error: ${a}`,infiniteLoopError:"Causes an infinite loop",closeDialog:"Close Dialog and Return to Editor",findPlaceholder:"Find",findCaseSensitive:"Match Case Sensitive",findRegExp:"Use JavaScript Regular Expression",replaceTitle:"Replace",replacePlaceholder:"Replace with",findNext:"Find Next Occurrence",findPrevious:"Find Previous Occurrence",replaceActionShort:"Replace",replaceAction:"Replace This Occurrence",replaceAllActionShort:"Replace All",replaceAllAction:"Replace All Occurrences"};constructor(a=!0,b=!0,c={}){super([]),this.useCtrlF=a,this.useCtrlH=b,this.addTranslations(this.instructions,c)}afterElementsAdded(a){const b=a.textareaElement;this.useCtrlF&&b.addEventListener("keydown",b=>{this.checkCtrlF(a,b)}),this.useCtrlH&&b.addEventListener("keydown",b=>{this.checkCtrlH(a,b)})}afterHighlight(a){a.pluginData.findAndReplace==null||a.pluginData.findAndReplace.dialog==null||a.pluginData.findAndReplace.dialog.classList.contains("code-input_find-and-replace_hidden-dialog")||(a.pluginData.findAndReplace.dialog.findMatchState.rehighlightMatches(),this.updateMatchDescription(a.pluginData.findAndReplace.dialog),0==a.pluginData.findAndReplace.dialog.findMatchState.numMatches&&a.pluginData.findAndReplace.dialog.findInput.classList.add("code-input_find-and-replace_error"))}text2RegExp(a,b,c){return new RegExp(c?a:a.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),b?"g":"gi")}updateMatchDescription(a){a.matchDescription.textContent=0==a.findInput.value.length?this.instructions.start:0>=a.findMatchState.numMatches?this.instructions.none:1==a.findMatchState.numMatches?this.instructions.oneFound:this.instructions.matchIndex(a.findMatchState.focusedMatchID+1,a.findMatchState.numMatches)}updateFindMatches(a){let b=a.findInput.value;setTimeout(()=>{if(b==a.findInput.value){if(a.findMatchState.clearMatches(),0{j.setAttribute("open",!0)}),p.className="code-input_find-and-replace_button-hidden",p.innerText=this.instructions.replaceAllActionShort,p.title=this.instructions.replaceAllAction,p.addEventListener("focus",()=>{j.setAttribute("open",!0)}),m.addEventListener("click",a=>{a.preventDefault(),c.findMatchState.nextMatch(),this.updateMatchDescription(c)}),n.addEventListener("click",()=>{event.preventDefault(),c.findMatchState.previousMatch(),this.updateMatchDescription(c)}),o.addEventListener("click",a=>{a.preventDefault(),c.findMatchState.replaceOnce(i.value),c.focus()}),p.addEventListener("click",a=>{a.preventDefault(),c.findMatchState.replaceAll(i.value),p.focus()}),j.addEventListener("toggle",()=>{o.classList.toggle("code-input_find-and-replace_button-hidden"),p.classList.toggle("code-input_find-and-replace_button-hidden")}),c.findMatchState=new codeInput.plugins.FindAndReplace.FindMatchState(a),c.codeInput=a,c.textarea=d,c.findInput=e,c.findCaseSensitiveCheckbox=f,c.findRegExpCheckbox=g,c.matchDescription=h,c.replaceInput=i,c.replaceDropdown=j,this.checkCtrlH&&e.addEventListener("keydown",a=>{a.ctrlKey&&"h"==a.key&&(a.preventDefault(),j.setAttribute("open",!0))}),e.addEventListener("keypress",a=>{"Enter"==a.key&&a.preventDefault()}),i.addEventListener("keypress",a=>{"Enter"==a.key&&a.preventDefault()}),i.addEventListener("input",()=>{c.classList.contains("code-input_find-and-replace_hidden-dialog")?this.showPrompt(c.codeInput,!0):!c.replaceDropdown.hasAttribute("open")&&c.replaceDropdown.setAttribute("open",!0)}),c.addEventListener("keyup",b=>{"Escape"==b.key&&this.cancelPrompt(c,a,b)}),e.addEventListener("keyup",b=>{this.checkFindPrompt(c,a,b)}),e.addEventListener("input",()=>{this.findMatchesOnValueChange&&this.updateFindMatches(c),c.classList.contains("code-input_find-and-replace_hidden-dialog")&&this.showPrompt(c.codeInput,!1)}),f.addEventListener("click",()=>{this.updateFindMatches(c)}),g.addEventListener("click",()=>{this.updateFindMatches(c)}),i.addEventListener("keyup",b=>{this.checkReplacePrompt(c,a,b),i.focus()}),q.addEventListener("click",b=>{this.cancelPrompt(c,a,b)}),q.addEventListener("keypress",b=>{("Space"==b.key||"Enter"==b.key)&&this.cancelPrompt(c,a,b)}),a.dialogContainerElement.appendChild(c),a.pluginData.findAndReplace={dialog:c},e.focus(),b&&j.setAttribute("open",!0),c.selectionStart=a.textareaElement.selectionStart,c.selectionEnd=a.textareaElement.selectionEnd,c.selectionStart=this.matchStartIndexes.length&&(a=0)}this.focusedMatchStartIndex=this.matchStartIndexes[a],this.focusedMatchID=a;let b=this.codeInput.codeElement.querySelectorAll(".code-input_find-and-replace_find-match-focused");for(let c=0;c=c){if(g.length>=d){if(h){let b=document.createElement("span");b.classList.add("code-input_find-and-replace_find-match"),b.setAttribute("data-code-input_find-and-replace_match-id",a),b.classList.add("code-input_find-and-replace_temporary-span"),b.textContent=g.substring(0,d),"\n"==b.textContent[0]&&b.classList.add("code-input_find-and-replace_start-newline");let c=g.substring(d);return f.textContent=c,f.insertAdjacentElement("beforebegin",b),void e++}return void this.highlightMatchNewlineOnlyAtStart(a,f,0,d)}f.classList.add("code-input_find-and-replace_find-match"),f.setAttribute("data-code-input_find-and-replace_match-id",a),"\n"==f.textContent[0]&&f.classList.add("code-input_find-and-replace_start-newline")}else if(g.length>c){if(!h)this.highlightMatchNewlineOnlyAtStart(a,f,c,d);else if(g.length>d){let b=document.createElement("span");b.classList.add("code-input_find-and-replace_temporary-span"),b.textContent=g.substring(0,c);let h=g.substring(c,d);f.textContent=h,f.classList.add("code-input_find-and-replace_find-match"),f.setAttribute("data-code-input_find-and-replace_match-id",a),"\n"==f.textContent[0]&&f.classList.add("code-input_find-and-replace_start-newline");let i=document.createElement("span");i.classList.add("code-input_find-and-replace_temporary-span"),i.textContent=g.substring(d),f.insertAdjacentElement("beforebegin",b),f.insertAdjacentElement("afterend",i),e++}else{let b=g.substring(0,c);f.textContent=b;let d=document.createElement("span");d.classList.add("code-input_find-and-replace_find-match"),d.setAttribute("data-code-input_find-and-replace_match-id",a),d.classList.add("code-input_find-and-replace_temporary-span"),d.textContent=g.substring(c),"\n"==d.textContent[0]&&d.classList.add("code-input_find-and-replace_start-newline"),f.insertAdjacentElement("afterend",d),e++}if(g.length>d)return}c-=g.length,d-=g.length}}};code-input-js/plugins/go-to-line.css000066400000000000000000000035641506303517500177210ustar00rootroot00000000000000@keyframes code-input_go-to-line_roll-in { 0% {opacity: 0; transform: translateY(-34px);} 100% {opacity: 1; transform: translateY(0px);} } @keyframes code-input_go-to-line_roll-out { 0% {opacity: 1; transform: translateY(0px);} 100% {opacity: 0; transform: translateY(-34px);} } .code-input_go-to-line_dialog { position: absolute; top: 0; right: 14px; padding: 6px; padding-top: 8px; border: solid 1px #00000044; background-color: white; border-radius: 6px; box-shadow: 0 .2em 1em .2em rgba(0, 0, 0, 0.16); } .code-input_go-to-line_dialog:not(.code-input_go-to-line_hidden-dialog) { animation: code-input_go-to-line_roll-in .2s; opacity: 1; pointer-events: all; } .code-input_go-to-line_dialog.code-input_go-to-line_hidden-dialog { animation: code-input_go-to-line_roll-out .2s; opacity: 0; pointer-events: none; } .code-input_go-to-line_dialog input::placeholder { font-size: 80%; } .code-input_go-to-line_dialog input { position: relative; width: 240px; height: 32px; top: -3px; font-size: large; color: #000000aa; border: 0; } .code-input_go-to-line_dialog input.code-input_go-to-line_error { color: #ff0000aa; } /* Cancel icon */ .code-input_go-to-line_dialog span { display: inline-block; width: 24px; line-height: 24px; font-family: system-ui; font-size: 22px; font-weight: 500; text-align: center; border-radius: 50%; color: black; opacity: 0.6; vertical-align: top; } .code-input_go-to-line_dialog span:before { content: "\00d7"; } .code-input_go-to-line_dialog span:hover { opacity: .8; background-color: #00000018; } /* For backwards compatibility, p element on the same level as buttons rather than buttons being nested inside other element like in FindAndReplace. */ .code-input_go-to-line_dialog p { font-family: monospace; width: 264px; margin: 0; overflow: hidden; white-space: wrap; } code-input-js/plugins/go-to-line.js000066400000000000000000000236711506303517500175460ustar00rootroot00000000000000/** * Add basic Go-To-Line (Ctrl+G by default) functionality to the code editor. * Files: go-to-line.js / go-to-line.css */ "use strict"; codeInput.plugins.GoToLine = class extends codeInput.Plugin { useCtrlG = false; instructions = { closeDialog: "Close Dialog and Return to Editor", input: "Line:Column / Line no. then Enter", guidanceFormat: "Wrong format. Enter a line number (e.g. 1) or a line number then colon then column number (e.g. 1:3).", guidanceLineRange: (current, max) => `Line number (currently ${current}) should be between 1 and ${max} inclusive.`, guidanceColumnRange: (line, current, max) => `On line ${line}, column number (currently ${current}) should be between 1 and ${max} inclusive.`, guidanceValidLine: (line) => `Press Enter to go to line ${line}.`, guidanceValidColumn: (line, column) => `Press Enter to go to line ${line}, column ${column}.`, }; /** * Create a go-to-line command plugin to pass into a template * @param {boolean} useCtrlG Should Ctrl+G be overriden for go-to-line functionality? Either way, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element)`. * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the available keys and English text. */ constructor(useCtrlG = true, instructionTranslations = {}) { super([]); // No observed attributes this.useCtrlG = useCtrlG; this.addTranslations(this.instructions, instructionTranslations); } /* Add keystroke events */ afterElementsAdded(codeInput) { const textarea = codeInput.textareaElement; if(this.useCtrlG) { textarea.addEventListener('keydown', (event) => { this.checkCtrlG(codeInput, event); }); } } /* Called with a dialog box keyup event to check the validity of the line number entered and submit the dialog if Enter is pressed */ checkPrompt(dialog, event) { if (event.key == 'Escape') return this.cancelPrompt(dialog, event); // Line number(:column number) const lines = dialog.textarea.value.split('\n'); const maxLineNo = lines.length; const lineNo = Number(dialog.input.value.split(':')[0]); let columnNo = 0; // Means go to start of indented line let maxColumnNo = 1; const querySplitByColons = dialog.input.value.split(':'); // Invalid format if(querySplitByColons.length > 2 || !/^[0-9:]*$/.test(dialog.input.value)) { dialog.guidance.textContent = this.instructions.guidanceFormat; return dialog.input.classList.add('code-input_go-to-line_error'); } // Number(s) present if (dialog.input.value) { if (lineNo < 1 || lineNo > maxLineNo) { // Out-of-range line number dialog.guidance.textContent = this.instructions.guidanceLineRange(lineNo, maxLineNo); return dialog.input.classList.add('code-input_go-to-line_error'); } else { // Check if line:column - if so calculate column number if(querySplitByColons.length >= 2) { columnNo = Number(querySplitByColons[1]); maxColumnNo = lines[lineNo-1].length+1; // column 1 always works since at start of line } if(columnNo < 0 || columnNo > maxColumnNo) { dialog.guidance.textContent = this.instructions.guidanceColumnRange(lineNo, columnNo, maxColumnNo); return dialog.input.classList.add('code-input_go-to-line_error'); } else { if(columnNo === 0) { // No column specified, or 0 which for backwards compatibility acts // like none selected dialog.guidance.textContent = this.instructions.guidanceValidLine(lineNo); } else { dialog.guidance.textContent = this.instructions.guidanceValidColumn(lineNo, columnNo); } dialog.input.classList.remove('code-input_go-to-line_error'); } } } else { // No value dialog.guidance.textContent = ""; } if (event.key == 'Enter') { this.goTo(dialog.textarea, lineNo, columnNo); this.cancelPrompt(dialog, event); } } /* Called with a dialog box keyup event to close and clear the dialog box */ cancelPrompt(dialog, event) { event.preventDefault(); dialog.codeInput.handleEventsFromTextarea = false; dialog.textarea.focus(); dialog.codeInput.handleEventsFromTextarea = true; dialog.setAttribute("inert", true); // Hide from keyboard navigation when closed. dialog.setAttribute("tabindex", -1); // Hide from keyboard navigation when closed. dialog.setAttribute("aria-hidden", true); // Hide from screen reader when closed. // Remove dialog after animation dialog.classList.add('code-input_go-to-line_hidden-dialog'); dialog.input.value = ""; } /** * Show a search-like dialog prompting line number. * @param {codeInput.CodeInput} codeInput the `` element. */ showPrompt(codeInput) { if(codeInput.pluginData.goToLine == undefined || codeInput.pluginData.goToLine.dialog == undefined) { const textarea = codeInput.textareaElement; const dialog = document.createElement('div'); const input = document.createElement('input'); // TODO: Make a button element (semantic HTML for accessibility) in next major version const cancel = document.createElement('span'); cancel.setAttribute("role", "button"); cancel.setAttribute("aria-label", this.instructions.closeDialog); cancel.setAttribute("tabindex", 0); // Visible to keyboard navigation cancel.setAttribute("title", this.instructions.closeDialog); const guidance = document.createElement('p'); guidance.setAttribute("aria-live", "assertive"); // Screen reader must read the status message. guidance.textContent = ""; dialog.appendChild(input); dialog.appendChild(cancel); dialog.appendChild(guidance); dialog.className = 'code-input_go-to-line_dialog'; input.spellcheck = false; input.placeholder = this.instructions.input; dialog.codeInput = codeInput; dialog.textarea = textarea; dialog.input = input; dialog.guidance = guidance; input.addEventListener('keypress', (event) => { /* Stop enter from submitting form */ if (event.key == 'Enter') event.preventDefault(); }); input.addEventListener('keyup', (event) => { return this.checkPrompt(dialog, event); }); cancel.addEventListener('click', (event) => { this.cancelPrompt(dialog, event); }); cancel.addEventListener('keypress', (event) => { if (event.key == "Space" || event.key == "Enter") this.cancelPrompt(dialog, event); }); codeInput.dialogContainerElement.appendChild(dialog); codeInput.pluginData.goToLine = {dialog: dialog}; input.focus(); } else { codeInput.pluginData.goToLine.dialog.classList.remove("code-input_go-to-line_hidden-dialog"); codeInput.pluginData.goToLine.dialog.removeAttribute("inert"); // Show to keyboard navigation when open. codeInput.pluginData.goToLine.dialog.setAttribute("tabindex", 0); // Show to keyboard navigation when open. codeInput.pluginData.goToLine.dialog.removeAttribute("aria-hidden"); // Show to screen reader when open. codeInput.pluginData.goToLine.dialog.input.focus(); } } /* Set the cursor on the first non-space char of textarea's nth line, or to the columnNo-numbered character in the line if it's not 0; and scroll it into view */ goTo(textarea, lineNo, columnNo = 0) { let fontSize; let lineHeight; let scrollAmount; let topPadding; let cursorPos = -1; let lines = textarea.value.split('\n'); if (lineNo > 0 && lineNo <= lines.length) { if (textarea.computedStyleMap) { fontSize = textarea.computedStyleMap().get('font-size').value; lineHeight = fontSize * textarea.computedStyleMap().get('line-height').value; } else { fontSize = document.defaultView.getComputedStyle(textarea, null).getPropertyValue('font-size').split('px')[0]; lineHeight = document.defaultView.getComputedStyle(textarea, null).getPropertyValue('line-height').split('px')[0]; } // scroll amount and initial top padding (3 lines above, if possible) scrollAmount = (lineNo > 3 ? lineNo - 3 : 1) * lineHeight; topPadding = (lineHeight - fontSize) / 2; if (lineNo > 1) { // cursor positon just after n - 1 full lines cursorPos = lines.slice(0, lineNo - 1).join('\n').length; } // scan first non-space char in nth line if (columnNo == 0) { do cursorPos++; while (textarea.value[cursorPos] != '\n' && /\s/.test(textarea.value[cursorPos])); } else { cursorPos += 1 + columnNo - 1; } textarea.scrollTop = scrollAmount - topPadding; textarea.setSelectionRange(cursorPos, cursorPos); textarea.click(); } } /* Event handler for keydown event that makes Ctrl+G open go to line dialog */ checkCtrlG(codeInput, event) { if (event.ctrlKey && event.key == 'g') { event.preventDefault(); this.showPrompt(codeInput); } } } code-input-js/plugins/go-to-line.min.css000066400000000000000000000026701506303517500205000ustar00rootroot00000000000000@keyframes code-input_go-to-line_roll-in{0%{opacity:0;transform:translateY(-34px)}100%{opacity:1;transform:translateY(0)}}@keyframes code-input_go-to-line_roll-out{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-34px)}}.code-input_go-to-line_dialog{position:absolute;top:0;right:14px;padding:6px;padding-top:8px;border:solid 1px #00000044;background-color:#fff;border-radius:6px;box-shadow:0 .2em 1em .2em rgba(0,0,0,.16)}.code-input_go-to-line_dialog:not(.code-input_go-to-line_hidden-dialog){animation:code-input_go-to-line_roll-in .2s;opacity:1;pointer-events:all}.code-input_go-to-line_dialog.code-input_go-to-line_hidden-dialog{animation:code-input_go-to-line_roll-out .2s;opacity:0;pointer-events:none}.code-input_go-to-line_dialog input::placeholder{font-size:80%}.code-input_go-to-line_dialog input{position:relative;width:240px;height:32px;top:-3px;font-size:large;color:#000000aa;border:0}.code-input_go-to-line_dialog input.code-input_go-to-line_error{color:#ff0000aa}.code-input_go-to-line_dialog span{display:inline-block;width:24px;line-height:24px;font-family:system-ui;font-size:22px;font-weight:500;text-align:center;border-radius:50%;color:#000;opacity:.6;vertical-align:top}.code-input_go-to-line_dialog span:before{content:"\00d7"}.code-input_go-to-line_dialog span:hover{opacity:.8;background-color:#00000018}.code-input_go-to-line_dialog p{font-family:monospace;width:264px;margin:0;overflow:hidden;white-space:wrap}code-input-js/plugins/go-to-line.min.js000066400000000000000000000100031506303517500203110ustar00rootroot00000000000000"use strict";codeInput.plugins.GoToLine=class extends codeInput.Plugin{useCtrlG=!1;instructions={closeDialog:"Close Dialog and Return to Editor",input:"Line:Column / Line no. then Enter",guidanceFormat:"Wrong format. Enter a line number (e.g. 1) or a line number then colon then column number (e.g. 1:3).",guidanceLineRange:(a,b)=>`Line number (currently ${a}) should be between 1 and ${b} inclusive.`,guidanceColumnRange:(a,b,c)=>`On line ${a}, column number (currently ${b}) should be between 1 and ${c} inclusive.`,guidanceValidLine:a=>`Press Enter to go to line ${a}.`,guidanceValidColumn:(a,b)=>`Press Enter to go to line ${a}, column ${b}.`};constructor(a=!0,b={}){super([]),this.useCtrlG=a,this.addTranslations(this.instructions,b)}afterElementsAdded(a){const b=a.textareaElement;this.useCtrlG&&b.addEventListener("keydown",b=>{this.checkCtrlG(a,b)})}checkPrompt(a,b){if("Escape"==b.key)return this.cancelPrompt(a,b);const c=a.textarea.value.split("\n"),d=c.length,e=+a.input.value.split(":")[0];let f=0,g=1;const h=a.input.value.split(":");if(2e||e>d)return a.guidance.textContent=this.instructions.guidanceLineRange(e,d),a.input.classList.add("code-input_go-to-line_error");if(2<=h.length&&(f=+h[1],g=c[e-1].length+1),0>f||f>g)return a.guidance.textContent=this.instructions.guidanceColumnRange(e,f,g),a.input.classList.add("code-input_go-to-line_error");a.guidance.textContent=0===f?this.instructions.guidanceValidLine(e):this.instructions.guidanceValidColumn(e,f),a.input.classList.remove("code-input_go-to-line_error")}else a.guidance.textContent="";"Enter"==b.key&&(this.goTo(a.textarea,e,f),this.cancelPrompt(a,b))}cancelPrompt(a,b){b.preventDefault(),a.codeInput.handleEventsFromTextarea=!1,a.textarea.focus(),a.codeInput.handleEventsFromTextarea=!0,a.setAttribute("inert",!0),a.setAttribute("tabindex",-1),a.setAttribute("aria-hidden",!0),a.classList.add("code-input_go-to-line_hidden-dialog"),a.input.value=""}showPrompt(a){if(a.pluginData.goToLine==null||a.pluginData.goToLine.dialog==null){const b=a.textareaElement,c=document.createElement("div"),d=document.createElement("input"),e=document.createElement("span");e.setAttribute("role","button"),e.setAttribute("aria-label",this.instructions.closeDialog),e.setAttribute("tabindex",0),e.setAttribute("title",this.instructions.closeDialog);const f=document.createElement("p");f.setAttribute("aria-live","assertive"),f.textContent="",c.appendChild(d),c.appendChild(e),c.appendChild(f),c.className="code-input_go-to-line_dialog",d.spellcheck=!1,d.placeholder=this.instructions.input,c.codeInput=a,c.textarea=b,c.input=d,c.guidance=f,d.addEventListener("keypress",a=>{"Enter"==a.key&&a.preventDefault()}),d.addEventListener("keyup",a=>this.checkPrompt(c,a)),e.addEventListener("click",a=>{this.cancelPrompt(c,a)}),e.addEventListener("keypress",a=>{("Space"==a.key||"Enter"==a.key)&&this.cancelPrompt(c,a)}),a.dialogContainerElement.appendChild(c),a.pluginData.goToLine={dialog:c},d.focus()}else a.pluginData.goToLine.dialog.classList.remove("code-input_go-to-line_hidden-dialog"),a.pluginData.goToLine.dialog.removeAttribute("inert"),a.pluginData.goToLine.dialog.setAttribute("tabindex",0),a.pluginData.goToLine.dialog.removeAttribute("aria-hidden"),a.pluginData.goToLine.dialog.input.focus()}goTo(a,b,c=0){let d,e,f,g,h=-1,i=a.value.split("\n");if(0 { if(this.escTabToChangeFocus) codeInput.setKeyboardNavInstructions(this.instructions.tabForIndentation, true); }) textarea.addEventListener('keydown', (event) => { this.checkTab(codeInput, event); this.checkBackspace(codeInput, event); }); textarea.addEventListener('beforeinput', (event) => { this.checkEnter(codeInput, event); this.checkCloseBracket(codeInput, event); }); // Get the width of the indentation in pixels let testIndentationWidthPre = document.createElement("pre"); testIndentationWidthPre.setAttribute("aria-hidden", "true"); // Hide for screen readers let testIndentationWidthSpan = document.createElement("span"); if(codeInput.templateObject.preElementStyled) { testIndentationWidthPre.appendChild(testIndentationWidthSpan); testIndentationWidthPre.classList.add("code-input_autocomplete_test-indentation-width"); codeInput.appendChild(testIndentationWidthPre); // Styled like first pre, but first pre found to update } else { let testIndentationWidthCode = document.createElement("code"); testIndentationWidthCode.appendChild(testIndentationWidthSpan); testIndentationWidthCode.classList.add("code-input_autocomplete_test-indentation-width"); testIndentationWidthPre.appendChild(testIndentationWidthCode); codeInput.appendChild(testIndentationWidthPre); // Styled like first pre, but first pre found to update } testIndentationWidthSpan.innerHTML = codeInput.escapeHtml(this.indentation); let indentationWidthPx = testIndentationWidthSpan.offsetWidth; codeInput.removeChild(testIndentationWidthPre); codeInput.pluginData.indent = {automatedKeypresses: false, indentationWidthPx: indentationWidthPx}; } /* Deal with the Tab key causing indentation, and Tab+Selection indenting / Shift+Tab+Selection unindenting lines, and the mechanism through which Tab can be used to switch focus instead (accessibility). */ checkTab(codeInput, event) { if(codeInput.pluginData.indent.automatedKeypresses) return; if(!this.tabIndentationEnabled) return; if(this.escTabToChangeFocus) { // Accessibility - allow Tab for keyboard navigation when Esc pressed right before it. if(event.key == "Escape") { this.escJustPressed = true; codeInput.setKeyboardNavInstructions(this.instructions.tabForNavigation, false); return; } else if(event.key != "Tab") { if(event.key == "Shift") { return; // Shift+Tab after Esc should still be keyboard navigation } codeInput.setKeyboardNavInstructions(this.instructions.tabForIndentation, false); this.escJustPressed = false; return; } if(!this.enableTabIndentation || this.escJustPressed) { codeInput.setKeyboardNavInstructions("", false); this.escJustPressed = false; return; } } else if(event.key != "Tab") { return; } let inputElement = codeInput.textareaElement; event.preventDefault(); // stop normal if(!event.shiftKey && inputElement.selectionStart == inputElement.selectionEnd) { // Just place a tab/spaces here. // automatedKeypresses property to prevent keypresses being captured // by this plugin during automated input as some browsers // (e.g. GNOME Web) do. codeInput.pluginData.indent.automatedKeypresses = true; document.execCommand("insertText", false, this.indentation); codeInput.pluginData.indent.automatedKeypresses = false; } else { let lines = inputElement.value.split("\n"); let letterI = 0; let selectionStartI = inputElement.selectionStart; // where cursor moves after tab - moving forward by 1 indent let selectionEndI = inputElement.selectionEnd; // where cursor moves after tab - moving forward by 1 indent for (let i = 0; i < lines.length; i++) { if((selectionStartI <= letterI+lines[i].length && selectionEndI >= letterI + 1) || (selectionStartI == selectionEndI && selectionStartI <= letterI+lines[i].length+1 && selectionEndI >= letterI)) { // + 1 so newlines counted // Starts before or at last char and ends after or at first char if(event.shiftKey) { if(lines[i].substring(0, this.indentationNumChars) == this.indentation) { // Remove first indent inputElement.selectionStart = letterI; inputElement.selectionEnd = letterI+this.indentationNumChars; document.execCommand("delete", false, ""); // Change selection if(selectionStartI > letterI) { // Indented outside selection selectionStartI = Math.max(selectionStartI - this.indentationNumChars, letterI); // Don't move to before indent } selectionEndI -= this.indentationNumChars; letterI -= this.indentationNumChars; } } else { // Add tab at start inputElement.selectionStart = letterI; inputElement.selectionEnd = letterI; // automatedKeypresses property to prevent keypresses being captured // by this plugin during automated input as some browsers // (e.g. GNOME Web) do. codeInput.pluginData.indent.f = true; document.execCommand("insertText", false, this.indentation); codeInput.pluginData.indent.automatedKeypresses = false; // Change selection if(selectionStartI > letterI) { // Indented outside selection selectionStartI += this.indentationNumChars; } selectionEndI += this.indentationNumChars; letterI += this.indentationNumChars; } } letterI += lines[i].length+1; // newline counted } // move cursor inputElement.selectionStart = selectionStartI; inputElement.selectionEnd = selectionEndI; // move scroll position to follow code const textDirection = getComputedStyle(codeInput).direction; if(textDirection == "rtl") { if(event.shiftKey) { // Scroll right codeInput.scrollBy(codeInput.pluginData.indent.indentationWidthPx, 0); } else { // Scroll left codeInput.scrollBy(-codeInput.pluginData.indent.indentationWidthPx, 0); } } else { if(event.shiftKey) { // Scroll left codeInput.scrollBy(-codeInput.pluginData.indent.indentationWidthPx, 0); } else { // Scroll right codeInput.scrollBy(codeInput.pluginData.indent.indentationWidthPx, 0); } } } codeInput.value = inputElement.value; } /* Deal with new lines retaining indentation */ checkEnter(codeInput, event) { if(codeInput.pluginData.indent.automatedKeypresses) return; if(event.inputType != "insertLineBreak" && event.data != "\n") { return; } event.preventDefault(); // Stop normal \n only let inputElement = codeInput.textareaElement; let lines = inputElement.value.split("\n"); let letterI = 0; let currentLineI = lines.length - 1; let newLine = ""; let numberIndents = 0; // find the index of the line our cursor is currently on for (let i = 0; i < lines.length; i++) { letterI += lines[i].length + 1; if(inputElement.selectionEnd < letterI) { currentLineI = i; break; } } // count the number of indents the current line starts with (up to our cursor position in the line) let cursorPosInLine = lines[currentLineI].length - (letterI - inputElement.selectionEnd) + 1; for (let i = 0; i < cursorPosInLine; i += this.indentationNumChars) { if (lines[currentLineI].substring(i, i+this.indentationNumChars) == this.indentation) { numberIndents++; } else { break; } } // determine the text before and after the cursor and chop the current line at the new line break let textAfterCursor = ""; if (cursorPosInLine != lines[currentLineI].length) { textAfterCursor = lines[currentLineI].substring(cursorPosInLine); lines[currentLineI] = lines[currentLineI].substring(0, cursorPosInLine); } let bracketThreeLinesTriggered = false; let furtherIndentation = ""; if(this.bracketPairs != null) { for(let openingBracket in this.bracketPairs) { if(lines[currentLineI][lines[currentLineI].length-1] == openingBracket) { let closingBracket = this.bracketPairs[openingBracket]; if(textAfterCursor.length > 0 && textAfterCursor[0] == closingBracket) { // Create new line and then put textAfterCursor on yet another line: // { // |CARET| // } bracketThreeLinesTriggered = true; for (let i = 0; i < numberIndents+1; i++) { furtherIndentation += this.indentation; } } else { // Just create new line: // { // |CARET| numberIndents++; } break; } else { // Check whether brackets cause unindent let closingBracket = this.bracketPairs[openingBracket]; if(textAfterCursor.length > 0 && textAfterCursor[0] == closingBracket) { numberIndents--; break; } } } } // insert our indents and any text from the previous line that might have been after the line break // negative indents shouldn't exist and would only break future calculations. if(numberIndents < 0) { numberIndents = 0; } for (let i = 0; i < numberIndents; i++) { newLine += this.indentation; } // save the current cursor position let selectionStartI = inputElement.selectionStart; // automatedKeypresses property to prevent keypresses being captured // by this plugin during automated input as some browsers // (e.g. GNOME Web) do. codeInput.pluginData.indent.automatedKeypresses = true; if(bracketThreeLinesTriggered) { document.execCommand("insertText", false, "\n" + furtherIndentation); // Write indented line numberIndents += 1; // Reflects the new indent } document.execCommand("insertText", false, "\n" + newLine); // Write new line, including auto-indentation codeInput.pluginData.indent.automatedKeypresses = false; // move cursor to new position inputElement.selectionStart = selectionStartI + numberIndents*this.indentationNumChars + 1; // count the indent level and the newline character inputElement.selectionEnd = inputElement.selectionStart; // Scroll down to cursor if necessary let paddingTop = Number(getComputedStyle(inputElement).paddingTop.replace("px", "")); let lineHeight = Number(getComputedStyle(inputElement).lineHeight.replace("px", "")); let inputHeight = Number(getComputedStyle(codeInput).height.replace("px", "")); if(currentLineI*lineHeight + lineHeight*2 + paddingTop >= inputElement.scrollTop + inputHeight) { // Cursor too far down codeInput.scrollBy(0, Number(getComputedStyle(inputElement).lineHeight.replace("px", ""))); } codeInput.value = inputElement.value; } /* Deal with one 'tab' of spaces-based-indentation being deleted by each backspace, rather than one space */ checkBackspace(codeInput, event) { if(codeInput.pluginData.indent.automatedKeypresses) return; if(event.key != "Backspace" || this.indentationNumChars == 1) { return; // Normal backspace when indentation of 1 } let inputElement = codeInput.textareaElement; if(inputElement.selectionStart == inputElement.selectionEnd && codeInput.value.substring(inputElement.selectionStart - this.indentationNumChars, inputElement.selectionStart) == this.indentation) { // Indentation before cursor = delete it inputElement.selectionStart -= this.indentationNumChars; event.preventDefault(); document.execCommand("delete", false, ""); } } /* Deal with the typing of closing brackets causing a decrease in indentation */ checkCloseBracket(codeInput, event) { if(codeInput.textareaElement.selectionStart != codeInput.textareaElement.selectionEnd) { return; } for(let openingBracket in this.bracketPairs) { let closingBracket = this.bracketPairs[openingBracket]; if(event.data == closingBracket) { // Closing bracket unindents line if(codeInput.value.substring(codeInput.textareaElement.selectionStart - this.indentationNumChars, codeInput.textareaElement.selectionStart) == this.indentation) { // Indentation before cursor = delete it codeInput.textareaElement.selectionStart -= this.indentationNumChars; // document.execCommand("delete", false, ""); // event.preventDefault(); } } } } } code-input-js/plugins/indent.min.js000066400000000000000000000127001506303517500176260ustar00rootroot00000000000000"use strict";codeInput.plugins.Indent=class extends codeInput.Plugin{bracketPairs={};indentation="\t";indentationNumChars=1;tabIndentationEnabled=!0;escTabToChangeFocus=!0;escJustPressed=!1;instructions={tabForIndentation:"Tab and Shift-Tab currently for indentation. Press Esc to enable keyboard navigation.",tabForNavigation:"Tab and Shift-Tab currently for keyboard navigation. Type to return to indentation."};constructor(a=!1,b=4,c={"(":")","[":"]","{":"}"},d=!0,e={}){if(super([]),this.bracketPairs=c,a){this.indentation="";for(let a=0;a{this.escTabToChangeFocus&&a.setKeyboardNavInstructions(this.instructions.tabForIndentation,!0)}),b.addEventListener("keydown",b=>{this.checkTab(a,b),this.checkEnter(a,b),this.checkBackspace(a,b)}),b.addEventListener("beforeinput",b=>{this.checkCloseBracket(a,b)});let c=document.createElement("pre");c.setAttribute("aria-hidden","true");let d=document.createElement("span");if(a.templateObject.preElementStyled)c.appendChild(d),c.classList.add("code-input_autocomplete_test-indentation-width"),a.appendChild(c);else{let b=document.createElement("code");b.appendChild(d),b.classList.add("code-input_autocomplete_test-indentation-width"),c.appendChild(b),a.appendChild(c)}d.innerHTML=a.escapeHtml(this.indentation);let e=d.offsetWidth;a.removeChild(c),a.pluginData.indent={automatedKeypresses:!1,indentationWidthPx:e}}checkTab(a,b){var c=Math.max;if(!a.pluginData.indent.automatedKeypresses&&this.tabIndentationEnabled){if(this.escTabToChangeFocus){if("Escape"==b.key)return this.escJustPressed=!0,void a.setKeyboardNavInstructions(this.instructions.tabForNavigation,!1);if("Tab"!=b.key)return"Shift"==b.key?void 0:(a.setKeyboardNavInstructions(this.instructions.tabForIndentation,!1),void(this.escJustPressed=!1));if(!this.enableTabIndentation||this.escJustPressed)return a.setKeyboardNavInstructions("",!1),void(this.escJustPressed=!1)}else if("Tab"!=b.key)return;let d=a.textareaElement;if(b.preventDefault(),!b.shiftKey&&d.selectionStart==d.selectionEnd)a.pluginData.indent.automatedKeypresses=!0,document.execCommand("insertText",!1,this.indentation),a.pluginData.indent.automatedKeypresses=!1;else{let e=d.value.split("\n"),f=0,g=d.selectionStart,h=d.selectionEnd;for(let j=0;j=f+1||g==h&&g<=f+e[j].length+1&&h>=f)&&(b.shiftKey?e[j].substring(0,this.indentationNumChars)==this.indentation&&(d.selectionStart=f,d.selectionEnd=f+this.indentationNumChars,document.execCommand("delete",!1,""),g>f&&(g=c(g-this.indentationNumChars,f)),h-=this.indentationNumChars,f-=this.indentationNumChars):(d.selectionStart=f,d.selectionEnd=f,a.pluginData.indent.f=!0,document.execCommand("insertText",!1,this.indentation),a.pluginData.indent.automatedKeypresses=!1,g>f&&(g+=this.indentationNumChars),h+=this.indentationNumChars,f+=this.indentationNumChars)),f+=e[j].length+1;d.selectionStart=g,d.selectionEnd=h;const i=getComputedStyle(a).direction;"rtl"==i?b.shiftKey?a.scrollBy(a.pluginData.indent.indentationWidthPx,0):a.scrollBy(-a.pluginData.indent.indentationWidthPx,0):b.shiftKey?a.scrollBy(-a.pluginData.indent.indentationWidthPx,0):a.scrollBy(a.pluginData.indent.indentationWidthPx,0)}a.value=d.value}}checkEnter(a,b){if(a.pluginData.indent.automatedKeypresses)return;if("Enter"!=b.key)return;b.preventDefault();let c=a.textareaElement,d=c.value.split("\n"),e=0,f=d.length-1,g="",h=0;for(let g=0;gh&&(h=0);for(let c=0;c=c.scrollTop+q&&a.scrollBy(0,+getComputedStyle(c).lineHeight.replace("px","")),a.value=c.value}checkBackspace(a,b){if(!a.pluginData.indent.automatedKeypresses&&"Backspace"==b.key&&1!=this.indentationNumChars){let c=a.textareaElement;c.selectionStart==c.selectionEnd&&a.value.substring(c.selectionStart-this.indentationNumChars,c.selectionStart)==this.indentation&&(c.selectionStart-=this.indentationNumChars,b.preventDefault(),document.execCommand("delete",!1,""))}}checkCloseBracket(a,b){if(a.textareaElement.selectionStart==a.textareaElement.selectionEnd)for(let c in this.bracketPairs){let d=this.bracketPairs[c];b.data==d&&a.value.substring(a.textareaElement.selectionStart-this.indentationNumChars,a.textareaElement.selectionStart)==this.indentation&&(a.textareaElement.selectionStart-=this.indentationNumChars)}}};code-input-js/plugins/prism-line-numbers.css000066400000000000000000000035771506303517500215030ustar00rootroot00000000000000/** * Allows code-input elements to be used with the Prism.js line-numbers plugin, as long as the code-input element * or a parent element of it has the CSS class `line-numbers`. * https://prismjs.com/plugins/line-numbers/ * Files: prism-line-numbers.css */ /* Update padding to match line-numbers plugin */ code-input.line-numbers textarea, code-input.line-numbers.code-input_pre-element-styled pre, code-input.line-numbers:not(.code-input_pre-element-styled) pre code, .line-numbers code-input textarea, .line-numbers code-input.code-input_pre-element-styled pre, .line-numbers code-input:not(.code-input_pre-element-styled) pre code { padding-left: max(3.8em, var(--padding-left, 16px))!important; } /* Ensure pre code/textarea just wide enough to give 100% width with line numbers */ code-input.line-numbers, .line-numbers code-input { grid-template-columns: calc(100% - max(0em, calc(3.8em - var(--padding-left, 16px)))); } /* Despite the above, keep dialog container full width */ code-input.line-numbers .code-input_dialog-container, .line-numbers code-input .code-input_dialog-container { width: calc(100% + max(0em, calc(3.8em - var(--padding-left, 16px)))); } /* Override Prism styles so there's no display:inline, relatively-positioned code element which breaks offsetTop, used in FindAndReplace, in Firefox. */ code-input pre[class*=language-].line-numbers>code { position: static; } /* Line numbers now positioned relative to the pre element not the code element. */ code-input .line-numbers .line-numbers-rows { left: max(0em, calc(var(--padding-left, 16px) - 3.8em)); top: var(--padding-top); } /* Things with padding when instructions are present */ code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused) .line-numbers .line-numbers-rows { top: calc(var(--padding-top) + 3em); } code-input-js/plugins/prism-line-numbers.min.css000066400000000000000000000021111506303517500222440ustar00rootroot00000000000000.line-numbers code-input textarea,.line-numbers code-input.code-input_pre-element-styled pre,.line-numbers code-input:not(.code-input_pre-element-styled) pre code,code-input.line-numbers textarea,code-input.line-numbers.code-input_pre-element-styled pre,code-input.line-numbers:not(.code-input_pre-element-styled) pre code{padding-left:max(3.8em,var(--padding-left,16px))!important}.line-numbers code-input,code-input.line-numbers{grid-template-columns:calc(100% - max(0em,calc(3.8em - var(--padding-left,16px))))}.line-numbers code-input .code-input_dialog-container,code-input.line-numbers .code-input_dialog-container{width:calc(100% + max(0em,calc(3.8em - var(--padding-left,16px))))}code-input pre[class*=language-].line-numbers>code{position:static}code-input .line-numbers .line-numbers-rows{left:max(0,calc(var(--padding-left,16px) - 3.8em));top:var(--padding-top)}code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused) .line-numbers .line-numbers-rows{top:calc(var(--padding-top) + 3em)}code-input-js/plugins/select-token-callbacks.js000066400000000000000000000441701506303517500221030ustar00rootroot00000000000000/** * Make tokens in the 
 element that are included within the selected text of the 
 * gain a CSS class while selected, or trigger JavaScript callbacks.
 * Files: select-token-callbacks.js
 */
"use strict";

codeInput.plugins.SelectTokenCallbacks = class extends codeInput.Plugin {
    /**
     * Set up the behaviour of tokens text-selected in the `` element, and the exact definition of a token being text-selected.
     * 
     * All parameters are optional. If you provide no arguments to the constructor, this will dynamically apply the "code-input_select-token-callbacks_selected" class to selected tokens only, for you to style via CSS.
     * 
     * @param {codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks} tokenSelectorCallbacks What to do with text-selected tokens. See docstrings for the TokenSelectorCallbacks class.
     * @param {boolean} onlyCaretNotSelection If true, tokens will only be marked as selected when no text is selected but rather the caret is inside them (start of selection == end of selection). Default false.
     * @param {boolean} caretAtStartIsSelected Whether the caret or text selection's end being just before the first character of a token means said token is selected. Default true.
     * @param {boolean} caretAtEndIsSelected Whether the caret or text selection's start being just after the last character of a token means said token is selected. Default true.
     * @param {boolean} createSubTokens Whether temporary `` elements should be created inside partially-selected tokens containing just the selected text and given the selected class. Default false.
     * @param {boolean} partiallySelectedTokensAreSelected Whether tokens for which only some of their text is selected should be treated as selected. Default true.
     * @param {boolean} parentTokensAreSelected Whether all parent tokens of selected tokens should be treated as selected. Default true.
     */
    constructor(tokenSelectorCallbacks = codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation(), onlyCaretNotSelection = false, caretAtStartIsSelected = true, caretAtEndIsSelected = true, createSubTokens = false, partiallySelectedTokensAreSelected = true, parentTokensAreSelected = true) {
        super([]); // No observed attributes

        this.tokenSelectorCallbacks = tokenSelectorCallbacks;
        this.onlyCaretNotSelection = onlyCaretNotSelection;
        this.caretAtStartIsSelected = caretAtStartIsSelected;
        this.caretAtEndIsSelected = caretAtEndIsSelected;
        this.createSubTokens = createSubTokens;
        this.partiallySelectedTokensAreSelected = partiallySelectedTokensAreSelected;
        this.parentTokensAreSelected = parentTokensAreSelected;
    }
    /* Runs after code is highlighted; Params: codeInput element) */
    afterHighlight(codeInputElement) {
        this.syncSelection(codeInputElement);
    }
    /* Runs after elements are added into a `code-input` (useful for adding events to the textarea); Params: codeInput element) */
    afterElementsAdded(codeInputElement) {
        codeInputElement.pluginData.selectTokenCallbacks = {};
        codeInputElement.pluginData.selectTokenCallbacks.lastSelectionStart = codeInputElement.textareaElement.selectionStart;
        codeInputElement.pluginData.selectTokenCallbacks.lastSelectionEnd = codeInputElement.textareaElement.selectionEnd;
        codeInputElement.pluginData.selectTokenCallbacks.selectedTokenState = new codeInput.plugins.SelectTokenCallbacks.SelectedTokenState(codeInputElement.codeElement, this.tokenSelectorCallbacks, this.onlyCaretNotSelection, this.caretAtStartIsSelected, this.caretAtEndIsSelected, this.createSubTokens, this.partiallySelectedTokensAreSelected, this.parentTokensAreSelected);
        this.syncSelection(codeInputElement);

        // As of 2024-08, the selectionchange event is only supported on Firefox.
        codeInputElement.textareaElement.addEventListener("selectionchange", () => {
            this.checkSelectionChanged(codeInputElement)
        });
        // When selectionchange has complete support, the listeners below can be deleted.
        codeInputElement.textareaElement.addEventListener("select", () => {
            this.checkSelectionChanged(codeInputElement)
        });
        codeInputElement.textareaElement.addEventListener("keypress", () => {
            this.checkSelectionChanged(codeInputElement)
        });
        codeInputElement.textareaElement.addEventListener("mousedown", () => {
            this.checkSelectionChanged(codeInputElement)
        });
    }
    /* If the text selection has changed, run syncSelection. */
    checkSelectionChanged(codeInputElement) {
        if(
            codeInputElement.textareaElement.selectionStart != codeInputElement.pluginData.selectTokenCallbacks.lastSelectionStart
            || codeInputElement.textareaElement.selectionEnd != codeInputElement.pluginData.selectTokenCallbacks.lastSelectionEnd
        ) {
            this.syncSelection(codeInputElement);
            codeInputElement.pluginData.selectTokenCallbacks.lastSelectionStart = codeInputElement.textareaElement.selectionStart;
            codeInputElement.pluginData.selectTokenCallbacks.lastSelectionEnd = codeInputElement.textareaElement.selectionEnd;
        }
    }
    /* Update which elements have the code-input_selected class. */
    syncSelection(codeInputElement) {
        codeInputElement.pluginData.selectTokenCallbacks.selectedTokenState.updateSelection(codeInputElement.textareaElement.selectionStart, codeInputElement.textareaElement.selectionEnd)
    }
}

/**
 * A data structure specifying what should be done with tokens when they are selected, and also allows for previously selected
 * tokens to be dealt with each time the selection changes. See the constructor and the createClassSynchronisation static method.
 */
codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks = class {
    /**
     * Pass any callbacks you want to customise the behaviour of selected tokens via JavaScript.
     * 
     * (If the behaviour you want is just differently styling selected tokens _via CSS_, you should probably use the createClassSynchronisation static method.) 
     * @param {(token: HTMLElement) => void} tokenSelectedCallback Runs multiple times when the text selection inside the code-input changes, each time inputting a single (part of the highlighted `
`) token element that is selected in the new text selection.
     * @param {(tokenContainer: HTMLElement) => void} selectChangedCallback Each time the text selection inside the code-input changes, runs once before any tokenSelectedCallback calls, inputting the highlighted `
`'s `` element that contains all token elements.
     */
    constructor(tokenSelectedCallback, selectChangedCallback) {
        this.tokenSelectedCallback = tokenSelectedCallback;
        this.selectChangedCallback = selectChangedCallback;
    }

    /**
     * Use preset callbacks which ensure all tokens in the selected text range in the ``, and only such tokens, are given a certain CSS class.
     * 
     * (If the behaviour you want requires more complex behaviour or JavaScript, you should use TokenSelectorCallbacks' constructor.) 
     * 
     * @param {string} selectedClass The CSS class that will be present on tokens only when they are part of the selected text in the `` element. Defaults to "code-input_select-token-callbacks_selected".
     * @returns A new TokenSelectorCallbacks instance that encodes this behaviour.
     */
    static createClassSynchronisation(selectedClass = "code-input_select-token-callbacks_selected") {
        return new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(
            (token) => {
                token.classList.add(selectedClass);
            },
            (tokenContainer) => {
                // Remove selected class
                let selectedClassTokens = tokenContainer.getElementsByClassName(selectedClass);
                // Use it like a queue, because as elements have their class name removed they are live-removed from the collection.
                while(selectedClassTokens.length > 0) {
                    selectedClassTokens[0].classList.remove(selectedClass);
                }
            }
        );
    }
}

/* Manages a single  element's selected tokens, and calling the correct functions on the selected tokens */
codeInput.plugins.SelectTokenCallbacks.SelectedTokenState = class {
    constructor(codeElement, tokenSelectorCallbacks, onlyCaretNotSelection, caretAtStartIsSelected, caretAtEndIsSelected, createSubTokens, partiallySelectedTokensAreSelected, parentTokensAreSelected) {
        this.tokenContainer = codeElement;
        this.tokenSelectorCallbacks = tokenSelectorCallbacks;
        this.onlyCaretNotSelection = onlyCaretNotSelection;
        this.caretAtStartIsSelected = caretAtStartIsSelected;
        this.caretAtEndIsSelected = caretAtEndIsSelected;
        this.createSubTokens = createSubTokens;
        this.partiallySelectedTokensAreSelected = partiallySelectedTokensAreSelected;
        this.parentTokensAreSelected = parentTokensAreSelected;
    }

    /* Change the selected region to a new range from selectionStart to selectionEnd and run
    the callbacks. */
    updateSelection(selectionStart, selectionEnd) {
        this.selectChanged()
        if(!this.onlyCaretNotSelection || selectionStart == selectionEnd) { // Only deal with selected text if onlyCaretNotSelection is false.
            this.updateSelectedTokens(this.tokenContainer, selectionStart, selectionEnd)
        }
    }
    /* Runs when the text selection has changed, before any updateSelectedTokens call. */
    selectChanged() {
        if(this.createSubTokens) {
            // Remove generated spans to hold selected partial tokens
            let tempSpans = this.tokenContainer.getElementsByClassName("code-input_select-token-callbacks_temporary-span");
            while(tempSpans.length > 0) {
                // Replace with textContent as Text node
                // Use it like a queue, because as elements have their class name removed they are live-removed from the collection.
                tempSpans[0].parentElement.replaceChild(new Text(tempSpans[0].textContent), tempSpans[0]);
            }
        }

        this.tokenSelectorCallbacks.selectChangedCallback(this.tokenContainer);
    }

    /* Do the desired behaviour for selection to all tokens (elements in the currentElement)
    from startIndex to endIndex in the text. Start from the currentElement as this function is recursive.
    This code is similar to codeInput.plugins.FindAndReplace.FindMatchState.highlightMatch*/
    updateSelectedTokens(currentElement, startIndex, endIndex) {
        if(endIndex < 0 || endIndex == 0 && !this.caretAtStartIsSelected) {
            return; // Nothing selected
        }
        if(this.parentTokensAreSelected && currentElement !== this.tokenContainer) {
            this.tokenSelectorCallbacks.tokenSelectedCallback(currentElement); // Parent elements also marked with class / have callback called
        }
        for(let i = 0; i < currentElement.childNodes.length; i++) {
            let childElement = currentElement.childNodes[i];
            let childText = childElement.textContent;

            let noInnerElements = false;
            if(childElement.nodeType == 3) {
                // Text node
                if(this.createSubTokens) {
                    // Replace with token
                    if(i + 1 < currentElement.childNodes.length && currentElement.childNodes[i+1].nodeType == 3) {
                        // Can merge with next text node
                        currentElement.childNodes[i+1].textContent = childElement.textContent + currentElement.childNodes[i+1].textContent; // Merge textContent with next node
                        currentElement.removeChild(childElement); // Delete this node
                        i--; // As an element removed
                        continue; // Move to next node
                    }
                    noInnerElements = true;
    
                    let replacementElement = document.createElement("span");
                    replacementElement.textContent = childText;
                    replacementElement.classList.add("code-input_select-token-callbacks_temporary-span"); // Can remove span later
                    
                    currentElement.replaceChild(replacementElement, childElement);
                    childElement = replacementElement;
                } else {
                    // Skip text node
                    // Make indexes skip the element
                    startIndex -= childText.length;
                    endIndex -= childText.length;
                    continue;
                }
            }

            if(startIndex <= 0) {
                // Started selection
                if(childText.length > endIndex) {
                    // Selection ends in childElement
                    if(this.partiallySelectedTokensAreSelected) {
                        if(noInnerElements) {
                            if(this.createSubTokens && startIndex != endIndex) { // Subtoken to create
                                // Text node - add selection class to first part
                                let startSpan = document.createElement("span");
                                this.tokenSelectorCallbacks.tokenSelectedCallback(startSpan); // Selected
                                startSpan.classList.add("code-input_select-token-callbacks_temporary-span"); // Can remove span later
                                startSpan.textContent = childText.substring(0, endIndex);

                                let endText = childText.substring(endIndex);
                                childElement.textContent = endText;
                                
                                childElement.insertAdjacentElement('beforebegin', startSpan);
                                i++; // An extra element has been added
                            }
                            if(this.parentTokensAreSelected || !this.createSubTokens) {
                                this.tokenSelectorCallbacks.tokenSelectedCallback(childElement); // Selected                                
                            }
                        } else {
                            this.updateSelectedTokens(childElement, 0, endIndex);
                        }
                    }

                    // Match ended - nothing to do after backtracking
                    return;
                } else {
                    // Match goes through child element
                    this.tokenSelectorCallbacks.tokenSelectedCallback(childElement); // Selected
                }
            } else if(this.caretAtEndIsSelected && childText.length >= startIndex || childText.length > startIndex) {
                // Match starts in childElement
                if(this.partiallySelectedTokensAreSelected) {
                    if(noInnerElements) {
                        if(this.createSubTokens && startIndex != endIndex) { // Subtoken to create
                            if(childText.length > endIndex) {
                                // Match starts and ends in childElement - selection middle part
                                let startSpan = document.createElement("span");
                                startSpan.classList.add("code-input_select-token-callbacks_temporary-span"); // Can remove span later
                                startSpan.textContent = childText.substring(0, startIndex);
    
                                let middleText = childText.substring(startIndex, endIndex);
                                childElement.textContent = middleText;
                                this.tokenSelectorCallbacks.tokenSelectedCallback(childElement); // Selection
    
                                let endSpan = document.createElement("span");
                                endSpan.classList.add("code-input_select-token-callbacks_temporary-span"); // Can remove span later
                                endSpan.textContent = childText.substring(endIndex);
                                
                                childElement.insertAdjacentElement('beforebegin', startSpan);
                                childElement.insertAdjacentElement('afterend', endSpan);
                                i++; // 2 extra elements have been added
                            } else {
                                // Match starts in element - highlight last part
                                let startText = childText.substring(0, startIndex);
                                childElement.textContent = startText;
    
                                let endSpan = document.createElement("span");
                                this.tokenSelectorCallbacks.tokenSelectedCallback(endSpan); // Selected
                                endSpan.classList.add("code-input_select-token-callbacks_temporary-span"); // Can remove span later
                                endSpan.textContent = childText.substring(startIndex);
    
                                childElement.insertAdjacentElement('afterend', endSpan);
                                i++; // An extra element has been added
                            }
                        }
                        if(this.parentTokensAreSelected || !this.createSubTokens) {
                            this.tokenSelectorCallbacks.tokenSelectedCallback(childElement); // Selected                                
                        }
                    } else {
                        this.updateSelectedTokens(childElement, startIndex, endIndex);
                    }
                }
                
                if(this.caretAtStartIsSelected) {
                    if(childText.length > endIndex) {
                        // Match completely in childElement - nothing to do after backtracking
                        return;
                    }
                } else if(childText.length >= endIndex) {
                    // Match completely in childElement - nothing to do after backtracking
                    return;
                }
            }

            // Make indexes skip the element
            startIndex -= childText.length;
            endIndex -= childText.length;
        }
    }
}
code-input-js/plugins/select-token-callbacks.min.js000066400000000000000000000125261506303517500226650ustar00rootroot00000000000000"use strict";codeInput.plugins.SelectTokenCallbacks=class extends codeInput.Plugin{constructor(a=codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation(),b=!1,c=!0,d=!0,e=!1,f=!0,g=!0){super([]),this.tokenSelectorCallbacks=a,this.onlyCaretNotSelection=b,this.caretAtStartIsSelected=c,this.caretAtEndIsSelected=d,this.createSubTokens=e,this.partiallySelectedTokensAreSelected=f,this.parentTokensAreSelected=g}afterHighlight(a){this.syncSelection(a)}afterElementsAdded(a){a.pluginData.selectTokenCallbacks={},a.pluginData.selectTokenCallbacks.lastSelectionStart=a.textareaElement.selectionStart,a.pluginData.selectTokenCallbacks.lastSelectionEnd=a.textareaElement.selectionEnd,a.pluginData.selectTokenCallbacks.selectedTokenState=new codeInput.plugins.SelectTokenCallbacks.SelectedTokenState(a.codeElement,this.tokenSelectorCallbacks,this.onlyCaretNotSelection,this.caretAtStartIsSelected,this.caretAtEndIsSelected,this.createSubTokens,this.partiallySelectedTokensAreSelected,this.parentTokensAreSelected),this.syncSelection(a),a.textareaElement.addEventListener("selectionchange",()=>{this.checkSelectionChanged(a)}),a.textareaElement.addEventListener("select",()=>{this.checkSelectionChanged(a)}),a.textareaElement.addEventListener("keypress",()=>{this.checkSelectionChanged(a)}),a.textareaElement.addEventListener("mousedown",()=>{this.checkSelectionChanged(a)})}checkSelectionChanged(a){(a.textareaElement.selectionStart!=a.pluginData.selectTokenCallbacks.lastSelectionStart||a.textareaElement.selectionEnd!=a.pluginData.selectTokenCallbacks.lastSelectionEnd)&&(this.syncSelection(a),a.pluginData.selectTokenCallbacks.lastSelectionStart=a.textareaElement.selectionStart,a.pluginData.selectTokenCallbacks.lastSelectionEnd=a.textareaElement.selectionEnd)}syncSelection(a){a.pluginData.selectTokenCallbacks.selectedTokenState.updateSelection(a.textareaElement.selectionStart,a.textareaElement.selectionEnd)}},codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks=class{constructor(a,b){this.tokenSelectedCallback=a,this.selectChangedCallback=b}static createClassSynchronisation(a="code-input_select-token-callbacks_selected"){return new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(b=>{b.classList.add(a)},b=>{for(let c=b.getElementsByClassName(a);0c)&&(0!=c||this.caretAtStartIsSelected)){this.parentTokensAreSelected&&a!==this.tokenContainer&&this.tokenSelectorCallbacks.tokenSelectedCallback(a);for(let d=0;d=b){if(f.length>c){if(this.partiallySelectedTokensAreSelected)if(g){if(this.createSubTokens&&b!=c){let a=document.createElement("span");this.tokenSelectorCallbacks.tokenSelectedCallback(a),a.classList.add("code-input_select-token-callbacks_temporary-span"),a.textContent=f.substring(0,c);let b=f.substring(c);e.textContent=b,e.insertAdjacentElement("beforebegin",a),d++}(this.parentTokensAreSelected||!this.createSubTokens)&&this.tokenSelectorCallbacks.tokenSelectedCallback(e)}else this.updateSelectedTokens(e,0,c);return}this.tokenSelectorCallbacks.tokenSelectedCallback(e)}else if(this.caretAtEndIsSelected&&f.length>=b||f.length>b){if(this.partiallySelectedTokensAreSelected)if(g){if(this.createSubTokens&&b!=c)if(f.length>c){let a=document.createElement("span");a.classList.add("code-input_select-token-callbacks_temporary-span"),a.textContent=f.substring(0,b);let g=f.substring(b,c);e.textContent=g,this.tokenSelectorCallbacks.tokenSelectedCallback(e);let h=document.createElement("span");h.classList.add("code-input_select-token-callbacks_temporary-span"),h.textContent=f.substring(c),e.insertAdjacentElement("beforebegin",a),e.insertAdjacentElement("afterend",h),d++}else{let a=f.substring(0,b);e.textContent=a;let c=document.createElement("span");this.tokenSelectorCallbacks.tokenSelectedCallback(c),c.classList.add("code-input_select-token-callbacks_temporary-span"),c.textContent=f.substring(b),e.insertAdjacentElement("afterend",c),d++}(this.parentTokensAreSelected||!this.createSubTokens)&&this.tokenSelectorCallbacks.tokenSelectedCallback(e)}else this.updateSelectedTokens(e,b,c);if(this.caretAtStartIsSelected){if(f.length>c)return;}else if(f.length>=c)return}b-=f.length,c-=f.length}}}};code-input-js/plugins/special-chars.css000066400000000000000000000130321506303517500204540ustar00rootroot00000000000000/**
 * Render special characters and control characters as a symbol with their hex code.
 * Files: special-chars.js, special-chars.css
 *
 * WARNING:
 *
 * This plugin is currently unstable when used with other plugins,
 * Unicode characters, or highlight.js. I hope to fix much of this by
 * major version 3, and if you could help that would be amazing!
 *
 * See https://github.com/WebCoder49/code-input/issues?q=is%3Aissue%20state%3Aopen%20specialchars
 */

/* Main styling */

:root, body { /* Font for hex chars */
    --code-input_special-chars_0: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdjZGBgYPj///9/RhCAMcA0bg6yHgAPmh/6BoxTcQAAAABJRU5ErkJgggAA');
    --code-input_special-chars_1: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdjZGBgYPj///9/RhAggwMAitIUBr9U6sYAAAAASUVORK5CYII=');
    --code-input_special-chars_2: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGCEMUCCjCgyYBFGRrAKFBkAuLYT9kYcIu0AAAAASUVORK5CYII=');
    --code-input_special-chars_3: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABhJREFUGFdj/P///38GKGCEMUCCjMTJAACYiBPyG8sfAgAAAABJRU5ErkJggg==');
    --code-input_special-chars_4: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///39GRkZGMI3BYYACRhgDrAKZAwAYxhvyz0DRIQAAAABJRU5ErkJggg==');
    --code-input_special-chars_5: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACJJREFUGFdj/P///38GKGAEcRgZGRlBfDAHLgNjgFUgywAAuR4T9hxJl2YAAAAASUVORK5CYII=');
    --code-input_special-chars_6: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdj/P///38GKGAEcRgZGRlBfDAHQwasAlkGABcdF/Y4yco2AAAAAElFTkSuQmCC');
    --code-input_special-chars_7: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdj/P///38GKGCEMUCCRHIAWMgT8kue3bQAAAAASUVORK5CYII=');
    --code-input_special-chars_8: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GKGAEcRgZGSE0cTIAvHcb8v+mIfAAAAAASUVORK5CYII=');
    --code-input_special-chars_9: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGAEcRgZGSE0igxMCVgGmQMAPqcX8hWL1K0AAAAASUVORK5CYII=');
    --code-input_special-chars_A: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdjZGBgYPj///9/RhCAMcA0iADJggCmDEw5ALdxH/aGuYHqAAAAAElFTkSuQmCC');
    --code-input_special-chars_B: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GBgYGRhAAceA0cTIAvc0b/vRDnVoAAAAASUVORK5CYII=');
    --code-input_special-chars_C: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdjZGBgYPj///9/EM0IYjAyMjIS4CDrAQC57hP+uLwvFQAAAABJRU5ErkJggg==');
    --code-input_special-chars_D: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdj/P///38GBgYGRhAAceA0fg5MDwAveh/6ToN9VwAAAABJRU5ErkJggg==');
    --code-input_special-chars_E: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABxJREFUGFdj/P///38GKGAEcRgZGRlBfDCHsAwA2UwT+mVIH1MAAAAASUVORK5CYII=');
    --code-input_special-chars_F: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///38GKGAEcRgZGRlBfDAHtwxMGQDZZhP+BnB1kwAAAABJRU5ErkJggg==');
}

.code-input_special-char {
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    height: 1em;
    /* width: set by JS */
    overflow: hidden;
    text-decoration: none;
    text-shadow: none;
    vertical-align: middle;
    outline: 0.1px solid currentColor;

    /* Contain character for use by other plugins, but hide it */
    color: transparent;
    font-size: 0;

    --hex-0: var(
    --code-input_special-chars_0);
    --hex-1: var(
    --code-input_special-chars_0);
    --hex-2: var(
    --code-input_special-chars_0);
    --hex-3: var(
    --code-input_special-chars_0);
}

/* Default - Two bytes - 4 hex chars */

.code-input_special-char::before {
    margin-left: 50%;
    transform: translate(-50%, 0);
    content: " ";
    
    background-color: var(--code-input_special-char_color, currentColor);
    image-rendering: pixelated;
    display: inline-block;
    width: calc(100%-2px);
    height: 100%;

    mask-image: var(--hex-0), var(--hex-1), var(--hex-2), var(--hex-3);
    mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    mask-size: min(40%, 0.25em), min(40%, 0.25em), min(40%, 0.25em), min(40%, 0.25em);
    mask-position: 10% 10%, 90% 10%, 10% 90%, 90% 90%;

    -webkit-mask-image: var(--hex-0), var(--hex-1), var(--hex-2), var(--hex-3);
    -webkit-mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    -webkit-mask-size: min(40%, 0.25em), min(40%, 0.25em), min(40%, 0.25em), min(40%, 0.25em);
    -webkit-mask-position: 10% 10%, min(90%, 0.5em) 10%, 10% 90%, min(90%, 0.5em) 90%;
}

.code-input_special-char_zero-width {
    z-index: 1;
    width: 1em;
    margin-left: -0.5em;
    margin-right: -0.5em;
    position: relative;

    opacity: 0.75;
}

/* One byte - 2 hex chars */
.code-input_special-char_one-byte::before {
    height: 1.5em;
    top: -1em;
    content: attr(data-hex2);
}
.code-input_special-char_one-byte::after {
    height: 1.5em;
    bottom: -1em;
    content: attr(data-hex3);
}
code-input-js/plugins/special-chars.js000066400000000000000000000237771506303517500203210ustar00rootroot00000000000000/**
 * Render special characters and control characters as a symbol with their hex code.
 * Files: special-chars.js, special-chars.css
 *
 * WARNING:
 *
 * This plugin is currently unstable when used with other plugins,
 * Unicode characters, or highlight.js. I hope to fix much of this by
 * major version 3, and if you could help that would be amazing!
 *
 * See https://github.com/WebCoder49/code-input/issues?q=is%3Aissue%20state%3Aopen%20specialchars
 */
"use strict";

codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
    specialCharRegExp;

    cachedColors; // ascii number > [background color, text color]
    cachedWidths; // character > character width
    canvasContext;

    /**
     * Create a special characters plugin instance.
     * Default = covers many non-renderable ASCII characters.
     * @param {Boolean} colorInSpecialChars Whether or not to give special characters custom background colors based on their hex code. Defaults to false.
     * @param {Boolean} inheritTextColor If true, forces the color of the hex code to inherit from syntax highlighting. If false, the base color of the `pre code` element is used to give contrast to the small characters. Defaults to false.
     * @param {RegExp} specialCharRegExp The regular expression which matches special characters. Defaults to many non-renderable ASCII characters (which characters are renderable depends on the browser and OS).
     */
    constructor(colorInSpecialChars = false, inheritTextColor = false, specialCharRegExp = /(?!\n)(?!\t)[\u{0000}-\u{001F}]|[\u{007F}-\u{009F}]|[\u{0200}-\u{FFFF}]/ug) { // By default, covers many non-renderable ASCII characters
        super([]); // No observed attributes
        
        this.specialCharRegExp = specialCharRegExp;
        this.colorInSpecialChars = colorInSpecialChars;
        this.inheritTextColor = inheritTextColor;

        this.cachedColors = {};
        this.cachedWidths = {};

        let canvas = document.createElement("canvas");
        this.canvasContext = canvas.getContext("2d");
    }

    /* Initially render special characters as the highlighting algorithm may automatically highlight and remove them */
    afterElementsAdded(codeInput) {
        setTimeout(() => { codeInput.value = codeInput.value; }, 100);
    }

    /* After highlighting, render special characters as their stylised hexadecimal equivalents */
    afterHighlight(codeInput) {      
        let resultElement = codeInput.codeElement;

        // Reset data each highlight so can change if font size, etc. changes
        codeInput.pluginData.specialChars = {};
        codeInput.pluginData.specialChars.contrastColor = window.getComputedStyle(resultElement).color;

        this.recursivelyReplaceText(codeInput, resultElement);

        this.lastFont = window.getComputedStyle(codeInput.textareaElement).font;
    }

    /* Search for special characters in an element and replace them with their stylised hexadecimal equivalents */
    recursivelyReplaceText(codeInput, element) {
        for(let i = 0; i < element.childNodes.length; i++) {

            let nextNode = element.childNodes[i];
            if(nextNode.nodeType == 3) {
                // Text node - Replace in here
                let oldValue = nextNode.nodeValue;

                this.specialCharRegExp.lastIndex = 0;
                let searchResult = this.specialCharRegExp.exec(oldValue);
                if(searchResult != null) {
                    let charIndex = searchResult.index; // Start as returns end

                    nextNode = nextNode.splitText(charIndex+1).previousSibling;
                    
                    if(charIndex > 0) {
                        nextNode = nextNode.splitText(charIndex); // Keep characters before the special character in a different span
                    }

                    if(nextNode.textContent != "") {
                        let replacementElement = this.getStylisedSpecialChar(codeInput, nextNode.textContent);
                        // This next node will become the i+1th node so automatically iterated to
                        nextNode.parentNode.insertBefore(replacementElement, nextNode);
                        nextNode.textContent = "";
                    }
                }
            } else if(nextNode.nodeType == 1) {
                if(nextNode.className != "code-input_special-char" && nextNode.nodeValue != "") {
                    // Element - recurse
                    this.recursivelyReplaceText(codeInput, nextNode);
                }
            }
        }
    }

    /* Get the stylised hexadecimal representation HTML element for a given special character */
    getStylisedSpecialChar(codeInput, matchChar) {
        let hexCode = matchChar.codePointAt(0);

        let colors;
        if(this.colorInSpecialChars) colors = this.getCharacterColors(hexCode);

        hexCode = hexCode.toString(16);
        hexCode = ("0000" + hexCode).substring(hexCode.length); // So 2 chars with leading 0
        hexCode = hexCode.toUpperCase();

        let charWidth = this.getCharacterWidthEm(codeInput, matchChar);

        // Create element with hex code
        let result = document.createElement("span");
        result.textContent = matchChar;
        result.classList.add("code-input_special-char");
        result.style.setProperty("--hex-0",  "var(--code-input_special-chars_" + hexCode[0] + ")");
        result.style.setProperty("--hex-1",  "var(--code-input_special-chars_" + hexCode[1] + ")");
        result.style.setProperty("--hex-2",  "var(--code-input_special-chars_" + hexCode[2] + ")");
        result.style.setProperty("--hex-3",  "var(--code-input_special-chars_" + hexCode[3] + ")");
        
        // Handle zero-width chars
        if(charWidth == 0) result.classList.add("code-input_special-char_zero-width");
        else result.style.width = charWidth + "em";

        if(this.colorInSpecialChars) {
            result.style.backgroundColor = "#" + colors[0];
            result.style.setProperty("--code-input_special-char_color", colors[1]);
        } else if(!this.inheritTextColor) {
            result.style.setProperty("--code-input_special-char_color", codeInput.pluginData.specialChars.contrastColor);
        }
        return result;
    }
    
    /* Get the colors a stylised representation of a given character must be shown in; lazy load and return [background color, text color] */
    getCharacterColors(asciiCode) {
        let textColor;
        if(!(asciiCode in this.cachedColors)) {
            // Get background color
            let asciiHex = asciiCode.toString(16);
            let backgroundColor = "";
            for(let i = 0; i < asciiHex.length; i++) {
                backgroundColor += asciiHex[i] + asciiHex[i];
            }
            backgroundColor = ("000000" + backgroundColor).substring(backgroundColor.length); // So valid HEX color with 6 characters

            // Get most suitable text color - white or black depending on background brightness
            let colorBrightness = 0;
            const luminanceCoefficients = [0.299, 0.587, 0.114];
            for(let i = 0; i < 6; i += 2) {
                colorBrightness += parseInt(backgroundColor.substring(i, i+2), 16) * luminanceCoefficients[i/2];
            }
            // Calculate darkness
            textColor = colorBrightness < 128 ? "white" : "black";

            this.cachedColors[asciiCode] = [backgroundColor, textColor];
            return [backgroundColor, textColor];
        } else {
            return this.cachedColors[asciiCode];
        }
    }

    /* Get the width of a character in em (relative to font size), for use in creation of the stylised hexadecimal representation with the same width */
    getCharacterWidthEm(codeInput, char) {
        // Force zero-width characters
        if(new RegExp("\u00AD|\u02DE|[\u0300-\u036F]|[\u0483-\u0489]|[\u200B-\u200D]|\uFEFF").test(char) ) { return 0 }
        // Non-renderable ASCII characters should all be rendered at same size
        if(char != "\u0096" && new RegExp("[\u{0000}-\u{001F}]|[\u{007F}-\u{009F}]", "g").test(char)) {
            let fallbackWidth = this.getCharacterWidthEm(codeInput, "\u0096");
            return fallbackWidth;
        }

        let font = getComputedStyle(codeInput.textareaElement).fontFamily + " " + getComputedStyle(codeInput.textareaElement).fontStretch + " " + getComputedStyle(codeInput.textareaElement).fontStyle + " " + getComputedStyle(codeInput.textareaElement).fontVariant + " " + getComputedStyle(codeInput.textareaElement).fontWeight + " " + getComputedStyle(codeInput.textareaElement).lineHeight; // Font without size

        // Lazy-load width of each character
        if(this.cachedWidths[font] == undefined) {
            this.cachedWidths[font] = {};
        }
        if(this.cachedWidths[font][char] != undefined) { // Use cached width
            return this.cachedWidths[font][char];
        }

        // Ensure font the same - 20px font size is where this algorithm works
        this.canvasContext.font = getComputedStyle(codeInput.textareaElement).font.replace(getComputedStyle(codeInput.textareaElement).fontSize, "20px");

        // Try to get width from canvas
        let width = this.canvasContext.measureText(char).width/20; // From px to em (=proportion of font-size)
        if(width > 1) {
            width /= 2; // Fix double-width-in-canvas Firefox bug
        } else if(width == 0 && char != "\u0096") {
            let fallbackWidth = this.getCharacterWidthEm(codeInput, "\u0096");
            return fallbackWidth; // In Firefox some control chars don't render, but all control chars are the same width
        }

        // Firefox will never make smaller than size at 20px
        if(navigator.userAgent.includes("Mozilla") && !navigator.userAgent.includes("Chrome") && !navigator.userAgent.includes("Safari")) {
            let fontSize = Number(getComputedStyle(codeInput.textareaElement).fontSize.substring(0, getComputedStyle(codeInput.textareaElement).fontSize.length-2)); // Remove 20, make px
            if(fontSize < 20) width *= 20 / fontSize;
        }

        this.cachedWidths[font][char] = width;

        return width;
    }
}
code-input-js/plugins/special-chars.min.css000066400000000000000000000106741506303517500212470ustar00rootroot00000000000000:root,body{--code-input_special-chars_0:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdjZGBgYPj///9/RhCAMcA0bg6yHgAPmh/6BoxTcQAAAABJRU5ErkJgggAA');--code-input_special-chars_1:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdjZGBgYPj///9/RhAggwMAitIUBr9U6sYAAAAASUVORK5CYII=');--code-input_special-chars_2:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGCEMUCCjCgyYBFGRrAKFBkAuLYT9kYcIu0AAAAASUVORK5CYII=');--code-input_special-chars_3:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABhJREFUGFdj/P///38GKGCEMUCCjMTJAACYiBPyG8sfAgAAAABJRU5ErkJggg==');--code-input_special-chars_4:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///39GRkZGMI3BYYACRhgDrAKZAwAYxhvyz0DRIQAAAABJRU5ErkJggg==');--code-input_special-chars_5:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACJJREFUGFdj/P///38GKGAEcRgZGRlBfDAHLgNjgFUgywAAuR4T9hxJl2YAAAAASUVORK5CYII=');--code-input_special-chars_6:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdj/P///38GKGAEcRgZGRlBfDAHQwasAlkGABcdF/Y4yco2AAAAAElFTkSuQmCC');--code-input_special-chars_7:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABZJREFUGFdj/P///38GKGCEMUCCRHIAWMgT8kue3bQAAAAASUVORK5CYII=');--code-input_special-chars_8:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GKGAEcRgZGSE0cTIAvHcb8v+mIfAAAAAASUVORK5CYII=');--code-input_special-chars_9:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB9JREFUGFdj/P///38GKGAEcRgZGSE0igxMCVgGmQMAPqcX8hWL1K0AAAAASUVORK5CYII=');--code-input_special-chars_A:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAACBJREFUGFdjZGBgYPj///9/RhCAMcA0iADJggCmDEw5ALdxH/aGuYHqAAAAAElFTkSuQmCC');--code-input_special-chars_B:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABlJREFUGFdj/P///38GBgYGRhAAceA0cTIAvc0b/vRDnVoAAAAASUVORK5CYII=');--code-input_special-chars_C:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdjZGBgYPj///9/EM0IYjAyMjIS4CDrAQC57hP+uLwvFQAAAABJRU5ErkJggg==');--code-input_special-chars_D:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABtJREFUGFdj/P///38GBgYGRhAAceA0fg5MDwAveh/6ToN9VwAAAABJRU5ErkJggg==');--code-input_special-chars_E:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAABxJREFUGFdj/P///38GKGAEcRgZGRlBfDCHsAwA2UwT+mVIH1MAAAAASUVORK5CYII=');--code-input_special-chars_F:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/P///38GKGAEcRgZGRlBfDAHtwxMGQDZZhP+BnB1kwAAAABJRU5ErkJggg==')}.code-input_special-char{display:inline-block;position:relative;top:0;left:0;height:1em;overflow:hidden;text-decoration:none;text-shadow:none;vertical-align:middle;outline:.1px solid currentColor;color:transparent;font-size:0;--hex-0:var(
    --code-input_special-chars_0);--hex-1:var(
    --code-input_special-chars_0);--hex-2:var(
    --code-input_special-chars_0);--hex-3:var(
    --code-input_special-chars_0)}.code-input_special-char::before{margin-left:50%;transform:translate(-50%,0);content:" ";background-color:var(--code-input_special-char_color,currentColor);image-rendering:pixelated;display:inline-block;width:calc(100%-2px);height:100%;mask-image:var(--hex-0),var(--hex-1),var(--hex-2),var(--hex-3);mask-repeat:no-repeat,no-repeat,no-repeat,no-repeat;mask-size:min(40%,.25em),min(40%,.25em),min(40%,.25em),min(40%,.25em);mask-position:10% 10%,90% 10%,10% 90%,90% 90%;-webkit-mask-image:var(--hex-0),var(--hex-1),var(--hex-2),var(--hex-3);-webkit-mask-repeat:no-repeat,no-repeat,no-repeat,no-repeat;-webkit-mask-size:min(40%,.25em),min(40%,.25em),min(40%,.25em),min(40%,.25em);-webkit-mask-position:10% 10%,min(90%,.5em) 10%,10% 90%,min(90%,.5em) 90%}.code-input_special-char_zero-width{z-index:1;width:1em;margin-left:-.5em;margin-right:-.5em;position:relative;opacity:.75}.code-input_special-char_one-byte::before{height:1.5em;top:-1em;content:attr(data-hex2)}.code-input_special-char_one-byte::after{height:1.5em;bottom:-1em;content:attr(data-hex3)}code-input-js/plugins/special-chars.min.js000066400000000000000000000071431506303517500210700ustar00rootroot00000000000000"use strict";codeInput.plugins.SpecialChars=class extends codeInput.Plugin{specialCharRegExp;cachedColors;cachedWidths;canvasContext;constructor(a=!1,b=!1,c=/(?!\n)(?!\t)[\u{0000}-\u{001F}]|[\u{007F}-\u{009F}]|[\u{0200}-\u{FFFF}]/ug){super([]),this.specialCharRegExp=c,this.colorInSpecialChars=a,this.inheritTextColor=b,this.cachedColors={},this.cachedWidths={};let d=document.createElement("canvas");this.canvasContext=d.getContext("2d")}afterElementsAdded(a){setTimeout(()=>{a.value=a.value},100)}afterHighlight(a){let b=a.codeElement;a.pluginData.specialChars={},a.pluginData.specialChars.contrastColor=window.getComputedStyle(b).color,this.recursivelyReplaceText(a,b),this.lastFont=window.getComputedStyle(a.textareaElement).font}recursivelyReplaceText(a,b){for(let c,d=0;da;a+=2)e+=parseInt(d.substring(a,a+2),16)*f[a/2];return b=128>e?"white":"black",this.cachedColors[a]=[d,b],[d,b]}return this.cachedColors[a]}getCharacterWidthEm(a,b){if(/­|Ëž|[Ì€-ͯ]|[Òƒ-Ò‰]|[​-â€]|/.test(b))return 0;if("\x96"!=b&&/[\0-]|[-Ÿ]/g.test(b)){let b=this.getCharacterWidthEm(a,"\x96");return b}let c=getComputedStyle(a.textareaElement).fontFamily+" "+getComputedStyle(a.textareaElement).fontStretch+" "+getComputedStyle(a.textareaElement).fontStyle+" "+getComputedStyle(a.textareaElement).fontVariant+" "+getComputedStyle(a.textareaElement).fontWeight+" "+getComputedStyle(a.textareaElement).lineHeight;if(null==this.cachedWidths[c]&&(this.cachedWidths[c]={}),null!=this.cachedWidths[c][b])return this.cachedWidths[c][b];this.canvasContext.font=getComputedStyle(a.textareaElement).font.replace(getComputedStyle(a.textareaElement).fontSize,"20px");let d=this.canvasContext.measureText(b).width/20;if(1b&&(d*=20/b)}return this.cachedWidths[c][b]=d,d}};code-input-js/plugins/test.js000066400000000000000000000044731506303517500165520ustar00rootroot00000000000000/**
 * Copy this to create a plugin, which brings extra,
 * non-central optional functionality to code-input.
 * Instances of plugins can be passed in in an array
 * to the `plugins` argument when registering a template,
 * for example like this:
 * ```javascript
 * codeInput.registerTemplate("syntax-highlighted", codeInput.templates.hljs(hljs, [new codeInput.plugins.Test()]));
 * ```
 */
"use strict";

codeInput.plugins.Test = class extends codeInput.Plugin {
    instructions = {
        beforeHighlight: "before highlight",
        afterHighlight: "after highlight",
        beforeElementsAdded: "before elements added",
        afterElementsAdded: "after elements added",
        attributeChanged: (name, oldValue, newValue) => `${name}: '${oldValue}'>'${newValue}'`
    };

    constructor(instructionTranslations = {}) {
        super(["testattr"]); 
        // Array of observed attributes as parameter

        // instructionTranslations, instructions, and the addTranslations
        // call need not be present if this plugin uses no localisable
        // text.
        this.addTranslations(this.instructions, instructionTranslations);
    }
    /* Runs before code is highlighted; Params: codeInput element) */
    beforeHighlight(codeInput) {
        console.log(codeInput, this.instructions.beforeHighlight);
    }
    /* Runs after code is highlighted; Params: codeInput element) */
    afterHighlight(codeInput) {
        console.log(codeInput, this.instructions.afterHighlight);
    }
    /* Runs before elements are added into a `code-input`; Params: codeInput element) */
    beforeElementsAdded(codeInput) {
        console.log(codeInput, this.instructions.beforeElementsAdded);
    }
    /* Runs after elements are added into a `code-input` (useful for adding events to the textarea); Params: codeInput element) */
    afterElementsAdded(codeInput) {
        console.log(codeInput, this.instructions.afterElementsAdded);
    }
    /* Runs when an observed attribute of a `code-input` is changed (you must add the attribute name in the constructor); Params: codeInput element, name attribute name, oldValue previous value of attribute, newValue changed value of attribute) */
    attributeChanged(codeInput, name, oldValue, newValue) {
        console.log(codeInput, this.instructions.attriibuteChanged(name, oldValue, newValue));
    }
}
code-input-js/plugins/test.min.js000066400000000000000000000013361506303517500173270ustar00rootroot00000000000000"use strict";codeInput.plugins.Test=class extends codeInput.Plugin{instructions={beforeHighlight:"before highlight",afterHighlight:"after highlight",beforeElementsAdded:"before elements added",afterElementsAdded:"after elements added",attributeChanged:(a,b,c)=>`${a}: '${b}'>'${c}'`};constructor(a={}){super(["testattr"]),this.addTranslations(this.instructions,a)}beforeHighlight(a){console.log(a,this.instructions.beforeHighlight)}afterHighlight(a){console.log(a,this.instructions.afterHighlight)}beforeElementsAdded(a){console.log(a,this.instructions.beforeElementsAdded)}afterElementsAdded(a){console.log(a,this.instructions.afterElementsAdded)}attributeChanged(a,b,c,d){console.log(a,this.instructions.attriibuteChanged(b,c,d))}};code-input-js/tests/000077500000000000000000000000001506303517500147065ustar00rootroot00000000000000code-input-js/tests/afterform.html000066400000000000000000000005721506303517500175650ustar00rootroot00000000000000

    
        Form Submitted
    
    
        
Form Submitted

        
GET parameters (as JSON):

        

        

code-input-js/tests/hljs.html000066400000000000000000000053671506303517500165470ustar00rootroot00000000000000


    
    
    code-input Tester

    
    
    
    
    
    
    
    

    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    

    


    
code-input Tester (highlight.js)

    
If the page doesn't load, please reload it, and answer the questions in alert boxes.

    
Test for Prism.js

    
This page carries out automated tests for the code-input library to check that both the core components and the plugins work in some ways. It doesn't fully cover every scenario so you should test any code you change by hand, but it's good for quickly checking a wide range of functionality works.


    
Test Results (Click to Open)

    

        
        
    


    


code-input-js/tests/i18n.html000066400000000000000000000310571506303517500163610ustar00rootroot00000000000000

    
        code-input should be global

        

        
        
        
        
        
        
        
        

        
        
        
        
        
        
        


        
        
        

        
        
        
        
        
        
        
        
        
        
        
        
        
        

        

    
    
        
        
        
        
        
        
        
        
        
        
        

        

        
    

code-input-js/tests/prism-match-braces-compatibility.js000066400000000000000000000150441506303517500236000ustar00rootroot00000000000000/* Modified from https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/match-braces/prism-match-braces.js
to enable codeInput SelectTokenCallbacks compatibility. Use: 
new codeInput.plugins.SelectTokenCallbacks(new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(selectBrace, deselectAllBraces), true) */
// Additions on lines 6-10, and lines 84-98.

// code-input modification: ADD
// Callbacks
let selectBrace;
let deselectAllBraces;
// END code-input modification
(function () {

if (typeof Prism === 'undefined' || typeof document === 'undefined') {
    return;
}

function mapClassName(name) {
    var customClass = Prism.plugins.customClass;
    if (customClass) {
        return customClass.apply(name, 'none');
    } else {
        return name;
    }
}

var PARTNER = {
    '(': ')',
    '[': ']',
    '{': '}',
};

// The names for brace types.
// These names have two purposes: 1) they can be used for styling and 2) they are used to pair braces. Only braces
// of the same type are paired.
var NAMES = {
    '(': 'brace-round',
    '[': 'brace-square',
    '{': 'brace-curly',
};

// A map for brace aliases.
// This is useful for when some braces have a prefix/suffix as part of the punctuation token.
var BRACE_ALIAS_MAP = {
    '${': '{', // JS template punctuation (e.g. `foo ${bar + 1}`)
};

var LEVEL_WARP = 12;

var pairIdCounter = 0;

var BRACE_ID_PATTERN = /^(pair-\d+-)(close|open)$/;

/**
 * Returns the brace partner given one brace of a brace pair.
 *
 * @param {HTMLElement} brace
 * @returns {HTMLElement}
 */
function getPartnerBrace(brace) {
    var match = BRACE_ID_PATTERN.exec(brace.id);
    return document.querySelector('#' + match[1] + (match[2] == 'open' ? 'close' : 'open'));
}

/**
 * @this {HTMLElement}
 */
function hoverBrace() {
    if (!Prism.util.isActive(this, 'brace-hover', true)) {
        return;
    }

    [this, getPartnerBrace(this)].forEach(function (e) {
        e.classList.add(mapClassName('brace-hover'));
    });
}
/**
 * @this {HTMLElement}
 */
function leaveBrace() {
    [this, getPartnerBrace(this)].forEach(function (e) {
        e.classList.remove(mapClassName('brace-hover'));
    });
}
// code-input modification: ADD
selectBrace = (token) => {
    if(BRACE_ID_PATTERN.test(token.id)) { // Check it's a brace
        hoverBrace.apply(token); // Move the brace from a this to a parameter
    }
};
deselectAllBraces = (tokenContainer) => {
    // Remove selected class
    let selectedClassTokens = tokenContainer.getElementsByClassName(mapClassName('brace-hover'));
    // Use it like a queue, because as elements have their class name removed they are live-removed from the collection.
    while(selectedClassTokens.length > 0) {
        selectedClassTokens[0].classList.remove(mapClassName('brace-hover'));
    }
}; // Moves the brace from a this to a parameter
// end code-input modification
/**
 * @this {HTMLElement}
 */
function clickBrace() {
    if (!Prism.util.isActive(this, 'brace-select', true)) {
        return;
    }

    [this, getPartnerBrace(this)].forEach(function (e) {
        e.classList.add(mapClassName('brace-selected'));
    });
}

Prism.hooks.add('complete', function (env) {

    /** @type {HTMLElement} */
    var code = env.element;
    var pre = code.parentElement;

    if (!pre || pre.tagName != 'PRE') {
        return;
    }

    // find the braces to match
    /** @type {string[]} */
    var toMatch = [];
    if (Prism.util.isActive(code, 'match-braces')) {
        toMatch.push('(', '[', '{');
    }

    if (toMatch.length == 0) {
        // nothing to match
        return;
    }

    if (!pre.__listenerAdded) {
        // code blocks might be highlighted more than once
        pre.addEventListener('mousedown', function removeBraceSelected() {
            // the code element might have been replaced
            var code = pre.querySelector('code');
            var className = mapClassName('brace-selected');
            Array.prototype.slice.call(code.querySelectorAll('.' + className)).forEach(function (e) {
                e.classList.remove(className);
            });
        });
        Object.defineProperty(pre, '__listenerAdded', { value: true });
    }

    /** @type {HTMLSpanElement[]} */
    var punctuation = Array.prototype.slice.call(
        code.querySelectorAll('span.' + mapClassName('token') + '.' + mapClassName('punctuation'))
    );

    /** @type {{ index: number, open: boolean, element: HTMLElement }[]} */
    var allBraces = [];

    toMatch.forEach(function (open) {
        var close = PARTNER[open];
        var name = mapClassName(NAMES[open]);

        /** @type {[number, number][]} */
        var pairs = [];
        /** @type {number[]} */
        var openStack = [];

        for (var i = 0; i < punctuation.length; i++) {
            var element = punctuation[i];
            if (element.childElementCount == 0) {
                var text = element.textContent;
                text = BRACE_ALIAS_MAP[text] || text;
                if (text === open) {
                    allBraces.push({ index: i, open: true, element: element });
                    element.classList.add(name);
                    element.classList.add(mapClassName('brace-open'));
                    openStack.push(i);
                } else if (text === close) {
                    allBraces.push({ index: i, open: false, element: element });
                    element.classList.add(name);
                    element.classList.add(mapClassName('brace-close'));
                    if (openStack.length) {
                        pairs.push([i, openStack.pop()]);
                    }
                }
            }
        }

        pairs.forEach(function (pair) {
            var pairId = 'pair-' + (pairIdCounter++) + '-';

            var opening = punctuation[pair[0]];
            var closing = punctuation[pair[1]];

            opening.id = pairId + 'open';
            closing.id = pairId + 'close';

            [opening, closing].forEach(function (e) {
                e.addEventListener('mouseenter', hoverBrace);
                e.addEventListener('mouseleave', leaveBrace);
                e.addEventListener('click', clickBrace);
            });
        });
    });

    var level = 0;
    allBraces.sort(function (a, b) { return a.index - b.index; });
    allBraces.forEach(function (brace) {
        if (brace.open) {
            brace.element.classList.add(mapClassName('brace-level-' + (level % LEVEL_WARP + 1)));
            level++;
        } else {
            level = Math.max(0, level - 1);
            brace.element.classList.add(mapClassName('brace-level-' + (level % LEVEL_WARP + 1)));
        }
    });
});

}());code-input-js/tests/prism-match-braces-compatibility.min.js000066400000000000000000000044251506303517500243630ustar00rootroot00000000000000let selectBrace,deselectAllBraces;(function(){function a(a){var b=Prism.plugins.customClass;return b?b.apply(a,"none"):a}function b(a){var b=m.exec(a.id);return document.querySelector("#"+b[1]+("open"==b[2]?"close":"open"))}function c(){Prism.util.isActive(this,"brace-hover",!0)&&[this,b(this)].forEach(function(b){b.classList.add(a("brace-hover"))})}function d(){[this,b(this)].forEach(function(b){b.classList.remove(a("brace-hover"))})}function f(){Prism.util.isActive(this,"brace-select",!0)&&[this,b(this)].forEach(function(b){b.classList.add(a("brace-selected"))})}if("undefined"!=typeof Prism&&"undefined"!=typeof document){var g={"(":")","[":"]","{":"}"},h={"(":"brace-round","[":"brace-square","{":"brace-curly"},j={"${":"{"},k=12,l=0,m=/^(pair-\d+-)(close|open)$/;selectBrace=a=>{m.test(a.id)&&c.apply(a)},deselectAllBraces=b=>{for(let c=b.getElementsByClassName(a("brace-hover"));0


    
    
    code-input Tester
    
    
    
    
    
    
    
    

    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    

    


    
code-input Tester (Prism.js)

    
If the page doesn't load, please reload it, and answer the questions in alert boxes.

    
Test for highlight.js

    
This page carries out automated tests for the code-input library to check that both the core components and the plugins work in some ways. It doesn't fully cover every scenario so you should test any code you change by hand, but it's good for quickly checking a wide range of functionality works.


    
Test Results (Click to Open)

    

        
        
    


    


code-input-js/tests/tester.js000066400000000000000000001151671506303517500165650ustar00rootroot00000000000000/* This file contains the main code to test the code-input library with Prism.js and highlight.js. */

/* --- Test running functions --- */
var testsFailed = false;

/* Add data to the tests list under a specific group and test description (usually the plugin name then the functionality description) */
function testData(group, test, data) {
    let resultElem = document.getElementById("test-results");
    let groupElem = resultElem.querySelector("#test-"+group);
    if(groupElem == undefined) {
        groupElem = document.createElement("span");
        groupElem.innerHTML = `Group ${group}:\n`
        groupElem.id = "test-" + group;
        resultElem.append(groupElem);
    }
    groupElem.innerHTML += `\t${test}: ${data}\n`;
}

/* Add a test to the tests list, saying if it has passed (passed parameter), and if it has failed giving a message (messageIfFailed parameter) */
function testAssertion(group, test, passed, messageIfFailed) {
    let resultElem = document.getElementById("test-results");
    let groupElem = resultElem.querySelector("#test-"+group);
    if(groupElem == undefined) {
        groupElem = document.createElement("span");
        groupElem.innerHTML = `Group ${group}:\n`
        groupElem.id = "test-" + group;
        resultElem.append(groupElem);
    }
    groupElem.innerHTML += `\t${test}: ${passed ? 'passed' : 'failed ('+messageIfFailed+')' }\n`;

    if(!passed) testsFailed = true;
}

/* Run a test that passes if the givenOutput == correctOutput */
function assertEqual(group, test, givenOutput, correctOutput) {
    let equal = givenOutput == correctOutput;
    testAssertion(group, test, equal, "see console output");
    if(!equal) {
        console.error(group, test, givenOutput, "should be", correctOutput);
    }
}

/* Test whether adding text to the textarea (with keyboard events emitted, therefore interacting with plugins) gives the correct output and selection start/end. */
function testAddingText(group, textarea, action, correctOutput, correctLengthToSelectionStart, correctLengthToSelectionEnd) {
    let origSelectionStart = textarea.selectionStart;
    let origValueBefore = textarea.value.substring(0, textarea.selectionStart);
    let origValueAfter = textarea.value.substring(textarea.selectionEnd);
    action(textarea);

    let correctOutputValue = origValueBefore+correctOutput+origValueAfter;
    assertEqual(group, "Text Output", textarea.value, correctOutputValue);
    assertEqual(group, "Code-Input Value JS Property Output", textarea.parentElement.value, correctOutputValue);
    assertEqual(group, "Selection Start", textarea.selectionStart, origSelectionStart+correctLengthToSelectionStart);
    assertEqual(group, "Selection End", textarea.selectionEnd, origSelectionStart+correctLengthToSelectionEnd);
}

/* --- Test helper functions --- */

/* Assuming the textarea is focused, add the given text to it, emitting 'input' and 'beforeinput' keyboard events (and 'keydown'/'keyup' Enter on newlines, if enterEvents is true) which plugins can handle */
function addText(textarea, text, enterEvents=false) {
    for(let i = 0; i < text.length; i++) {
        if(enterEvents && text[i] == "\n") {
            textarea.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" }));
            textarea.dispatchEvent(new KeyboardEvent("keyup", { "key": "Enter" }));
        } else {
            let beforeInputEvt = new InputEvent("beforeinput", { "cancelable": true, "data": text[i] });
            textarea.dispatchEvent(beforeInputEvt);
            if(!beforeInputEvt.defaultPrevented) {
                textarea.dispatchEvent(new InputEvent("input", { "data": text[i] }));
            }
        }
    }
}

/* Emit the necessary events to simulate a backspace keypress in the textarea. */
function backspace(textarea) {
    let keydownEvt = new KeyboardEvent("keydown", { "cancelable": true, "key": "Backspace" });
    textarea.dispatchEvent(keydownEvt);
    let keyupEvt = new KeyboardEvent("keyup", { "cancelable": true, "key": "Backspace" });
    textarea.dispatchEvent(keyupEvt);
    if(!keydownEvt.defaultPrevented) {
        if(textarea.selectionEnd == textarea.selectionStart) {
            textarea.selectionEnd = textarea.selectionStart;
            textarea.selectionStart--;
        }
        document.execCommand("delete", false, null);
    }
}

/* Move the caret numMovesRight characters to the right, in the textarea. */
function move(textarea, numMovesRight) {
    textarea.selectionStart += numMovesRight;
    textarea.selectionEnd = textarea.selectionStart;
}

/* Wait in an asynchronous function for a specified number of milliseconds by using `await waitAsync(milliseconds)`. */
function waitAsync(milliseconds) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve();
        }, milliseconds);
    });
}

/* --- Running the tests --- */

/* Start the test, for Prism.js if isHLJS is false, or for highlight.js if isHLJS is true. */
function beginTest(isHLJS) {
    let codeInputElem = document.querySelector("code-input");
    if(isHLJS) {
        codeInput.registerTemplate("code-editor", new codeInput.templates.Hljs(hljs, [
            new codeInput.plugins.AutoCloseBrackets(), 
            new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd, selectionStart) {
                if(selectionStart == selectionEnd && textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
                    // Show popup
                    popupElem.style.display = "block";
                    popupElem.innerHTML = "Here's your popup!";
                } else {
                    popupElem.style.display = "none";
                }
            }),
            new codeInput.plugins.Autodetect(),
            new codeInput.plugins.FindAndReplace(),
            new codeInput.plugins.GoToLine(),
            new codeInput.plugins.Indent(true, 2),
            new codeInput.plugins.SelectTokenCallbacks(codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation("in-selection"), false, true, true, true, true, false),
            new codeInput.plugins.SpecialChars(true),
        ]));
    } else {
        codeInput.registerTemplate("code-editor", new codeInput.templates.Prism(Prism, [
            new codeInput.plugins.AutoCloseBrackets(), 
            new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd, selectionStart) {
                if(selectionStart == selectionEnd && textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
                    // Show popup
                    popupElem.style.display = "block";
                    popupElem.innerHTML = "Here's your popup!";
                } else {
                    popupElem.style.display = "none";
                }
            }),
            new codeInput.plugins.FindAndReplace(),
            new codeInput.plugins.GoToLine(),
            new codeInput.plugins.Indent(true, 2),
            new codeInput.plugins.SelectTokenCallbacks(new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(selectBrace, deselectAllBraces), true),
            new codeInput.plugins.SpecialChars(true),
        ]));
    }
    startLoad(codeInputElem, isHLJS);
}

/* Start loading the tests, using the codeInput load time as one of the tests. */
function startLoad(codeInputElem, isHLJS) {
    let textarea;
    let timeToLoad = 0;
    let interval = window.setInterval(() => {
        textarea = codeInputElem.querySelector("textarea");
        if(textarea != null) window.clearInterval(interval);
        timeToLoad += 10;
        testData("TimeTaken", "Textarea Appears", timeToLoad+"ms (nearest 10)");
        startTests(textarea, isHLJS);
    }, 10);
}

/* Make input events work and be trusted in the inputElement - thanks for this SO answer: https://stackoverflow.com/a/49519772/21785620 */
function allowInputEvents(inputElement, codeInputElement=undefined) {
    inputElement.addEventListener('input', function(e){
        if(!e.isTrusted){
            e.preventDefault();
            // Manually trigger
            // Prevent auto-close-brackets plugin recapturing the event
            // Needed because this interception is hacky.
            // TODO: Potentially plugin-agnostic way, probably automatedKeypresses var in core, won't be needed much but may be helpful extra feature.
            if(codeInputElement !== undefined) codeInputElement.pluginData.autoCloseBrackets.automatedKeypresses = true;
            document.execCommand("insertText", false, e.data);
            if(codeInputElement !== undefined) codeInputElement.pluginData.autoCloseBrackets.automatedKeypresses = false;
        }
    }, false);
}

/* Start the tests using the textarea inside the code-input element and whether highlight.js is being used (as the Autodetect plugin only works with highlight.js, for example) */
async function startTests(textarea, isHLJS) {
    textarea.focus();

    codeInputElement = textarea.parentElement;
    allowInputEvents(textarea, codeInputElement);

    /*--- Tests for core functionality ---*/

    // Textarea's initial value should be correct.
    assertEqual("Core", "Initial Textarea Value", textarea.value, `console.log("Hello, World!");
// A second line
// A third line with  tags`);
    // Code element's displayed value, ignoring appearance with HTML tags, should be the initial value but HTML-escaped
    let renderedValue = codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g, "");
    assertEqual("Core", "Initial Rendered Value", renderedValue, `console.log("Hello, World!");
// A second line
// A third line with <html> tags
`); // Extra newline so line numbers visible if enabled


    // Update code-input value with JavaScript, new value and num events should be correct.
    codeInputElement.value += `
console.log("I've got another line!", 2 < 3, "should be true.");`;

    await waitAsync(50); // Wait for rendered value to update

    // Textarea's value once updated with JavaScript should be correct.
    assertEqual("Core", "JS-updated Textarea Value", textarea.value, `console.log("Hello, World!");
// A second line
// A third line with  tags
console.log("I've got another line!", 2 < 3, "should be true.");`);
    // Code element's displayed value, ignoring appearance with HTML tags, should be the initial value but HTML-escaped
    renderedValue = codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g, "");
    assertEqual("Core", "JS-updated Rendered Value", renderedValue, `console.log("Hello, World!");
// A second line
// A third line with <html> tags
console.log("I've got another line!", 2 < 3, "should be true.");
`); // Extra newline so line numbers visible if enabled

    const programmaticCodeInput = document.createElement("code-input");
    document.body.append(programmaticCodeInput);
    programmaticCodeInput.focus();
    document.execCommand("insertText", false, "Hello, World!");
    assertEqual("Core", "Programmatically-created element JS-accessible value", programmaticCodeInput.value, "Hello, World!");
    await waitAsync(50);
    assertEqual("Core", "Programmatically-created element rendered value", programmaticCodeInput.preElement.textContent, "Hello, World!\n");

    // Event Listener Tests

    let numTimesInputCalled = {"listener": 0, "idl": 0, "content": 0};
    let numTimesChangeCalled = {"listener": 0, "idl": 0, "content": 0};
    let numTimesFocusCalled = {"listener": 0, "idl": 0, "content": 0};
    let numTimesBlurCalled = {"listener": 0, "idl": 0, "content": 0};

    let inputListener = (type, evt) => {
        if(!evt.isTrusted) { // To prevent duplicate calling due to allowInputEvents hack, used just in this test
            numTimesInputCalled[type]++;
        }
    };
    let changeListener = (type) => {
        numTimesChangeCalled[type]++;
    };
    let focusListener = (type, evt) => {
        numTimesFocusCalled[type]++;
    };
    let blurListener = (type, evt) => {
        numTimesBlurCalled[type]++;
    };

    codeInputElement.addEventListener("input", inputListener.bind(null, "listener"));
    codeInputElement.addEventListener("change", changeListener.bind(null, "listener"));
    codeInputElement.addEventListener("focus", focusListener.bind(null, "listener"));
    codeInputElement.addEventListener("blur", blurListener.bind(null, "listener"));

    codeInputElement.oninput = inputListener.bind(null, "idl");
    codeInputElement.onchange = changeListener.bind(null, "idl");
    codeInputElement.onfocus = focusListener.bind(null, "idl");
    codeInputElement.onblur = blurListener.bind(null, "idl");

    // Make listeners be called - first time
    textarea.focus(); // Focus textarea
    addText(textarea, " // Hi");
    textarea.blur(); // Unfocus textarea - calls change event
    textarea.focus();

    window.content_listener_oninput = inputListener.bind(null, "content");
    codeInputElement.setAttribute("oninput", "content_listener_oninput(event)");
    window.content_listener_onchange = changeListener.bind(null, "content");
    codeInputElement.setAttribute("onchange", "content_listener_onchange(event)");
    window.content_listener_onfocus = focusListener.bind(null, "content");
    codeInputElement.setAttribute("onfocus", "content_listener_onfocus(event)");
    window.content_listener_onblur = blurListener.bind(null, "content");
    codeInputElement.setAttribute("onblur", "content_listener_onblur(event)");

    let inputDeletedListenerCalled = false;
    let deletedListener = () => {
        inputDeletedListenerCalled = true;
    };
    codeInputElement.addEventListener("input", deletedListener);
    codeInputElement.removeEventListener("input", deletedListener);

    // Make listeners be called - second time
    addText(textarea, " // Hi");
    textarea.blur(); // Unfocus textarea - calls change event
    textarea.focus();

    // Function type listeners
    // Never overriden
    assertEqual("Core", "addEventListener: Input Called Right Number of Times", numTimesInputCalled["listener"], 12);
    assertEqual("Core", "addEventListener: Change Called Right Number of Times", numTimesChangeCalled["listener"], 2);
    assertEqual("Core", "addEventListener: Focus Called Right Number of Times", numTimesFocusCalled["listener"], 3);
    assertEqual("Core", "addEventListener: Blur Called Right Number of Times", numTimesBlurCalled["listener"], 2);

    // IDL attribute (JavaScript property) type listeners
    // Overriden by content attributes before second set of interaction
    assertEqual("Core", "IDL attribute (JavaScript .oninput) event handler: Input Called Right Number of Times then Overriden by Content Attr", numTimesInputCalled["idl"], 6);
    assertEqual("Core", "IDL attribute (JavaScript .onchange) event handler: Change Called Right Number of Times then Overriden by Content Attr", numTimesChangeCalled["idl"], 1);
    assertEqual("Core", "IDL attribute (JavaScript .onfocus) event handler: Focus Called Right Number of Times then Overriden by Content Attr", numTimesFocusCalled["idl"], 2);
    assertEqual("Core", "IDL attribute (JavaScript .onblur) event handler: Blur Called Right Number of Times then Overriden by Content Attr", numTimesBlurCalled["idl"], 1);

    // Content attribute (HTML attribute) type listeners
    // Only registered before second set of interaction
    assertEqual("Core", "Content attribute (HTML oninput=\"...\") event handler: Input Called Right Number of Times", numTimesInputCalled["content"], 6);
    assertEqual("Core", "Content attribute (HTML onchange=\"...\") event handler: Change Called Right Number of Times", numTimesChangeCalled["content"], 1);
    assertEqual("Core", "Content attribute (HTML onfocus=\"...\") event handler: Focus Called Right Number of Times", numTimesFocusCalled["content"], 1);
    assertEqual("Core", "Content attribute (HTML onblur=\"...\") event handler: Blur Called Right Number of Times", numTimesBlurCalled["content"], 1);

    testAssertion("Core", "addEventListener, removeEventListener: Input Removed Listener Not Called", !inputDeletedListenerCalled, "(code-input element).removeEventListener did not work.");
    
    codeInputElement.removeEventListener("input", inputListener);
    codeInputElement.removeEventListener("change", changeListener);

    // Repeat for Object type listeners
    numTimesInputCalled = 0;
    numTimesChangeCalled = 0;
    codeInputElement.addEventListener("input", {handleEvent: (evt) => {
        if(!evt.isTrusted) { // To prevent duplicate calling due to allowInputEvents hack
            numTimesInputCalled++;
        }
    }});
    codeInputElement.addEventListener("change", {handleEvent: () => {
        numTimesChangeCalled++;
    }});

    inputDeletedListenerCalled = false;
    deletedListener = {handleEvent: () => {
        inputDeletedListenerCalled = true;
    }};
    codeInputElement.addEventListener("input", deletedListener);
    codeInputElement.removeEventListener("input", deletedListener);

    // Make listeners be called
    textarea.focus(); // Focus textarea
    addText(textarea, " // Hi");
    textarea.blur(); // Unfocus textarea - calls change event
    textarea.focus();

    assertEqual("Core", "Object Event Listeners: Input Called Right Number of Times", numTimesInputCalled, 6);
    assertEqual("Core", "Object Event Listeners: Change Called Right Number of Times", numTimesChangeCalled, 1);
    testAssertion("Core", "Object Event Listeners: Input Removed Listener Not Called", !inputDeletedListenerCalled, "(code-input element).removeEventListener did not work.");
    
    // Changing language should be correct
    if(!isHLJS) {
        // Highlight.js has autodetect plugin that should make this fail, so don't run these tests with it.
        testAssertion("Core", "Language attribute Initial value", 
            !codeInputElement.codeElement.classList.contains("language-javascript")
            && !codeInputElement.codeElement.classList.contains("language-html"), 
            `Language unset but code element's class name is ${codeInputElement.codeElement.className}.`);

        codeInputElement.setAttribute("language", "HTML");
    
        await waitAsync(50); // Wait for attribute change to be handled

        testAssertion("Core", "Language attribute Changed value 1", 
            codeInputElement.codeElement.classList.contains("language-html")
            && !codeInputElement.codeElement.classList.contains("language-javascript"), 
            `Language set to HTML but code element's class name is ${codeInputElement.codeElement.className}.`);
        
        codeInputElement.setAttribute("language", "JavaScript");

        await waitAsync(50); // Wait for attribute change to be handled

        testAssertion("Core", "Language attribute Changed value 2", 
            codeInputElement.codeElement.classList.contains("language-javascript")
            && !codeInputElement.codeElement.classList.contains("language-html"), 
            `Language set to JavaScript but code element's class name is ${codeInputElement.codeElement.className}.`);
    }

    let formElement = codeInputElement.parentElement;
    formElement.reset();
    
    await waitAsync(50); // Wait for rendered value to update
    
    assertEqual("Core", "Form Reset resets Code-Input Value", codeInputElement.value, `console.log("Hello, World!");
// A second line
// A third line with  tags`);
    assertEqual("Core", "Form Reset resets Textarea Value", textarea.value, `console.log("Hello, World!");
// A second line
// A third line with  tags`);
    renderedValue = codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g, "");
    assertEqual("Core", "Form Reset resets Rendered Value", renderedValue, `console.log("Hello, World!");
// A second line
// A third line with <html> tags
`); // Extra newline so line numbers visible if enabled.

    /*--- Tests for plugins ---*/
    // AutoCloseBrackets
    testAddingText("AutoCloseBrackets", textarea, function(textarea) {
        addText(textarea, `\nconsole.log("A test message`);
        move(textarea, 2);
        addText(textarea, `;\nconsole.log("Another test message");\n{[{[]}(([[`);
        backspace(textarea);
        backspace(textarea);
        backspace(textarea);
        addText(textarea, `)`);
    }, '\nconsole.log("A test message");\nconsole.log("Another test message");\n{[{[]}()]}', 77, 77);
    
    // Autocomplete
    addText(textarea, "popup");
    
    await waitAsync(50); // Wait for popup to be rendered
        
    testAssertion("Autocomplete", "Popup Shows on input", confirm("Does the autocomplete popup display correctly? (OK=Yes)"), "user-judged");
    move(textarea, -1);
    
    await waitAsync(50); // Wait for popup disappearance to be rendered
    
    testAssertion("Autocomplete", "Popup Disappears on arrow key", confirm("Has the popup disappeared? (OK=Yes)"), "user-judged");
    move(textarea, 1);

    await waitAsync(50); // Wait for popup to be rendered

    testAssertion("Autocomplete", "Popup Shows on arrow key", confirm("Does the autocomplete popup display correctly? (OK=Yes)"), "user-judged");
    backspace(textarea);

    await waitAsync(50); // Wait for popup disappearance to be rendered

    testAssertion("Autocomplete", "Popup Disappears on backspace", confirm("Has the popup disappeared? (OK=Yes)"), "user-judged");
    move(textarea, 1);
    backspace(textarea);
    backspace(textarea);
    backspace(textarea);
    backspace(textarea);

    // Autodetect - these tests have been made so the programming language is very obvious
    //  - the efficacy of autodetection is highlight.js' responsibility.
    if(isHLJS) {
        // Check detects XML - Replace all code with XML
        textarea.selectionStart = 0;
        textarea.selectionEnd = textarea.value.length;
        backspace(textarea);
        addText(textarea, 'console.log("Hello, World!");\nfunction sayHello(name) {\n  console.log("Hello, " + name + "!");\n}\nsayHello("code-input");');
        await waitAsync(50); // Wait for highlighting so language attribute updates
        assertEqual("Autodetect", "Detects JavaScript", codeInputElement.getAttribute("language"), "javascript");
    
        // Check detects Python - Replace all code with Python
        textarea.selectionStart = 0;
        textarea.selectionEnd = textarea.value.length;
        backspace(textarea);
        addText(textarea, '#!/usr/bin/python\nprint("Hello, World!")\nfor i in range(5):\n  print(i)');
        await waitAsync(50); // Wait for highlighting so language attribute updates
        assertEqual("Autodetect", "Detects Python", codeInputElement.getAttribute("language"), "python");

        // Check detects CSS - Replace all code with CSS
        textarea.selectionStart = 0;
        textarea.selectionEnd = textarea.value.length;
        backspace(textarea);
        addText(textarea, "body, html {\n  height: 100%;\n  background-color: blue;\n  color: red;\n}");
        await waitAsync(50); // Wait for highlighting so language attribute updates
        assertEqual("Autodetect", "Detects CSS", codeInputElement.getAttribute("language"), "css");
    }

    // FindAndReplace
    // Replace all code
    textarea.selectionStart = 0;
    textarea.selectionEnd = textarea.value.length;
    backspace(textarea);
    addText(textarea, "// hello /\\S/g\nhe('llo', /\\s/g);\nhello\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\na very very very very very very very very very very very very long line with many many many many many many many many many many many words\nline\nline\nline\nline\nline\nline\nline");
    textarea.selectionStart = textarea.selectionEnd = 0; // So focuses on first match

    await waitAsync(50); // Wait for highlighting so text updates

    // Open dialog and get interactive elements
    textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "f", "ctrlKey": true }));
    let inputBoxes = codeInputElement.querySelectorAll(".code-input_find-and-replace_dialog input");
    let findInput = inputBoxes[0];
    let regExpCheckbox = inputBoxes[1];
    let caseSensitiveCheckbox = inputBoxes[2];
    let replaceInput = inputBoxes[3];

    let buttons = codeInputElement.querySelectorAll(".code-input_find-and-replace_dialog button");
    let nextMatchButton = buttons[0];
    let previousMatchButton = buttons[1];
    let replaceButton = buttons[2];
    let replaceAllButton = buttons[3];

    let replaceDropdown = codeInputElement.querySelector(".code-input_find-and-replace_dialog details summary");

    // Run find/replace tests
    findInput.value = "/\\s/g";
    caseSensitiveCheckbox.click(); // Now case-sensitive
    await waitAsync(150); // Wait for highlighting so matches update
    testAssertion("FindAndReplace", "Finds Case-Sensitive Matches Correctly", confirm("Is there a match on only the lowercase '/\\s/g'?"), "user-judged");

    findInput.value = "he[^l]*llo";
    regExpCheckbox.click(); // Now regex
    caseSensitiveCheckbox.click(); // Now not case-sensitive
    await waitAsync(150); // Wait for highlighting so matches update
    // Focuses on next match after /\s/g, therefore third he...llo
    testAssertion("FindAndReplace", "Finds RegExp Matches Correctly", confirm("Are there matches on all 'he...llo's?"), "user-judged");

    replaceDropdown.click();
    previousMatchButton.click();
    replaceInput.value = "do('hello";
    replaceButton.click();
    await waitAsync(50); // Wait for buttons to work
    assertEqual("FindAndReplace", "Replaces Once Correctly", textarea.value, "// hello /\\S/g\ndo('hello', /\\s/g);\nhello\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\na very very very very very very very very very very very very long line with many many many many many many many many many many many words\nline\nline\nline\nline\nline\nline\nline");
    nextMatchButton.click(); // Back to first match

    // Exit find input box
    codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keydown", { "key": "Escape" }));
    codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keyup", { "key": "Escape" }));

    // Check first hello now selected
    assertEqual("FindAndReplace", "Selection Start on Focused Match when Dialog Exited", textarea.selectionStart, 3);
    assertEqual("FindAndReplace", "Selection End on Focused Match when Dialog Exited", textarea.selectionEnd, 8);
    
    // Open replace dialog; conduct a find and replace
    textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "h", "ctrlKey": true }));
    findInput.value = "";
    findInput.focus();
    allowInputEvents(findInput);
    addText(findInput, "hello");
    await waitAsync(200); // Wait for highlighting so matches update

    replaceInput.value = "hi";
    replaceAllButton.click();
    assertEqual("FindAndReplace", "Replaces All Correctly", textarea.value, "// hi /\\S/g\ndo('hi', /\\s/g);\nhi\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\na very very very very very very very very very very very very long line with many many many many many many many many many many many words\nline\nline\nline\nline\nline\nline\nline");

    findInput.value = "line";
    regExpCheckbox.click(); // Now no regex
    await waitAsync(200); // Wait for value to update

    // Go to "line" on very long line
    codeInputElement.style = "height: 100px; width: 1000px;";
    previousMatchButton.click();
    previousMatchButton.click();
    previousMatchButton.click();
    previousMatchButton.click();
    previousMatchButton.click();
    previousMatchButton.click();
    previousMatchButton.click();
    previousMatchButton.click();

    await waitAsync(200); // Wait for highlighting so matches update
    testAssertion("FindAndReplace", "Scrolls to Match Correctly", confirm("Is the match on the very long line highlighted orange and near the centre of the element?"), "user-judged");
    codeInputElement.style = "";

    // Exit find input box
    codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keydown", { "key": "Escape" }));
    codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keyup", { "key": "Escape" }));

    // GoToLine
    // Replace all code
    textarea.selectionStart = 0;
    textarea.selectionEnd = textarea.value.length;
    backspace(textarea);
    addText(textarea, "// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line");
    
    textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "g", "ctrlKey": true }));
    let lineInput = codeInputElement.querySelector(".code-input_go-to-line_dialog input");
    lineInput.value = "1";
    lineInput.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" }));
    lineInput.dispatchEvent(new KeyboardEvent("keyup", { "key": "Enter" }));
    assertEqual("GoToLine", "Line Only", textarea.selectionStart, 0);

    textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "g", "ctrlKey": true }));
    lineInput.value = "3:18";
    lineInput.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" }));
    lineInput.dispatchEvent(new KeyboardEvent("keyup", { "key": "Enter" }));
    assertEqual("GoToLine", "Line and Column", textarea.selectionStart, 45);
    
    textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "g", "ctrlKey": true }));
    lineInput.value = "10";
    lineInput.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" }));
    lineInput.dispatchEvent(new KeyboardEvent("keyup", { "key": "Enter" }));
    assertEqual("GoToLine", "Rejects Out-of-range Line", lineInput.classList.contains("code-input_go-to-line_error"), true);

    textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "g", "ctrlKey": true }));
    lineInput.value = "2:12";
    lineInput.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" }));
    lineInput.dispatchEvent(new KeyboardEvent("keyup", { "key": "Enter" }));
    assertEqual("GoToLine", "Rejects Out-of-range Column", lineInput.classList.contains("code-input_go-to-line_error"), true);

    textarea.dispatchEvent(new KeyboardEvent("keydown", { "cancelable": true, "key": "g", "ctrlKey": true }));
    lineInput.value = "sausages";
    lineInput.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" }));
    lineInput.dispatchEvent(new KeyboardEvent("keyup", { "key": "Enter" }));
    assertEqual("GoToLine", "Rejects Invalid Input", lineInput.classList.contains("code-input_go-to-line_error"), true);
    assertEqual("GoToLine", "Stays open when Rejects Input", lineInput.parentElement.classList.contains("code-input_go-to-line_hidden-dialog"), false);

    lineInput.dispatchEvent(new KeyboardEvent("keydown", { "key": "Escape" }));
    lineInput.dispatchEvent(new KeyboardEvent("keyup", { "key": "Escape" }));
    assertEqual("GoToLine", "Exits when Esc pressed", lineInput.parentElement.classList.contains("code-input_go-to-line_hidden-dialog"), true);

    // Indent
    textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
    addText(textarea, "\nfor(let i = 0; i < 100; i++) {\n  for(let j = i; j < 100; j++) {\n    // Here's some code\n    console.log(i,j);\n  }\n}\n{\n  // This is indented\n}");
    textarea.selectionStart = 0;
    textarea.selectionEnd = textarea.value.length;
    textarea.dispatchEvent(new KeyboardEvent("keydown", { "key": "Tab", "shiftKey": false }));
    textarea.dispatchEvent(new KeyboardEvent("keyup", { "key": "Tab", "shiftKey": false }));
    assertEqual("Indent", "Indents Lines", textarea.value, "  // 7 times table\n  let i = 1;\n  while(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n  // That's my code.\n  // This is another comment\n  // Another\n  // Line\n  for(let i = 0; i < 100; i++) {\n    for(let j = i; j < 100; j++) {\n      // Here's some code\n      console.log(i,j);\n    }\n  }\n  {\n    // This is indented\n  }");
    textarea.dispatchEvent(new KeyboardEvent("keydown", { "key": "Tab", "shiftKey": true }));
    textarea.dispatchEvent(new KeyboardEvent("keyup", { "key": "Tab", "shiftKey": true }));
    assertEqual("Indent", "Unindents Lines", textarea.value, "// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\n  for(let j = i; j < 100; j++) {\n    // Here's some code\n    console.log(i,j);\n  }\n}\n{\n  // This is indented\n}");
    textarea.dispatchEvent(new KeyboardEvent("keydown", { "key": "Tab", "shiftKey": true }));
    textarea.dispatchEvent(new KeyboardEvent("keyup", { "key": "Tab", "shiftKey": true }));
    assertEqual("Indent", "Unindents Lines where some are already fully unindented", textarea.value, "// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\nfor(let j = i; j < 100; j++) {\n  // Here's some code\n  console.log(i,j);\n}\n}\n{\n// This is indented\n}");
    
    textarea.selectionStart = 255;
    textarea.selectionEnd = 274;
    textarea.dispatchEvent(new KeyboardEvent("keydown", { "key": "Tab", "shiftKey": false }));
    textarea.dispatchEvent(new KeyboardEvent("keyup", { "key": "Tab", "shiftKey": false }));
    assertEqual("Indent", "Indents Lines by Selection", textarea.value, "// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\nfor(let j = i; j < 100; j++) {\n  // Here's some code\n  console.log(i,j);\n}\n}\n{\n  // This is indented\n}");

    textarea.selectionStart = 265;
    textarea.selectionEnd = 265;
    textarea.dispatchEvent(new KeyboardEvent("keydown", { "key": "Tab", "shiftKey": true }));
    textarea.dispatchEvent(new KeyboardEvent("keyup", { "key": "Tab", "shiftKey": true }));
    assertEqual("Indent", "Unindents Lines by Selection", textarea.value, "// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\nfor(let j = i; j < 100; j++) {\n  // Here's some code\n  console.log(i,j);\n}\n}\n{\n// This is indented\n}");

    // Indent+AutoCloseBrackets
    // Clear all code
    textarea.selectionStart = 0;
    textarea.selectionEnd = textarea.value.length;
    backspace(textarea);

    testAddingText("Indent-AutoCloseBrackets", textarea, function(textarea) {
        addText(textarea, `function printTriples(max) {\nfor(let i = 0; i < max-2; i++) {\nfor(let j = 0; j < max-1; j++) {\nfor(let k = 0; k < max; k++) {\nconsole.log(i,j,k);\n}\n//Hmmm...\n}//Test auto-unindent\n{`, true);
        move(textarea, 1); // Move after created closing bracket
        backspace(textarea); // Remove created closing bracket
    }, 'function printTriples(max) {\n  for(let i = 0; i < max-2; i++) {\n    for(let j = 0; j < max-1; j++) {\n      for(let k = 0; k < max; k++) {\n        console.log(i,j,k);\n      }\n      //Hmmm...\n    }//Test auto-unindent\n    {\n      }\n    }\n  }\n}', 221, 221);

    // SelectTokenCallbacks
    if(isHLJS) {
        addText(textarea, "\nlet x = 1;\nlet y = 2;\nconsole.log(`${x} + ${y} = ${x+y}`);");
        move(textarea, -4); // Ends at |: "${x+y|}`);"
        textarea.selectionStart -= 35; // Starts at |: "let y = |2;"
        await waitAsync(50); // Wait for highlighting so text updates
        assertEqual("SelectTokenCallbacks", "Number of Selected Tokens", codeInputElement.querySelectorAll(".in-selection").length, 13);
        assertEqual("SelectTokenCallbacks", "Number of Selected .hljs-string Tokens", codeInputElement.querySelectorAll(".hljs-string.in-selection").length, 0); // Since parentTokensAreSelected set to false    
        assertEqual("SelectTokenCallbacks", "Number of Selected .hljs-subst Tokens", codeInputElement.querySelectorAll(".hljs-subst.in-selection").length, 2);    
    } else {
        // Combined with compatiblity-added match-braces plugin
        addText(textarea, "\n[(),((),'Hi')]");
        await waitAsync(50); // Wait for highlighting so text updates
        // Move back 2 characters so just after 'Hi'
        move(textarea, -2);
        await waitAsync(50); // Wait for highlighting so text updates
        assertEqual("SelectTokenCallbacks", "Number of Selected Braces 1", codeInputElement.getElementsByClassName("brace-hover").length, 2);
        // Move forward 1 character so between )]
        move(textarea, 1);
        await waitAsync(50); // Wait for highlighting so text updates
        assertEqual("SelectTokenCallbacks", "Number of Selected Braces 2", codeInputElement.getElementsByClassName("brace-hover").length, 4);    
    }

    // SpecialChars
    // Clear all code
    textarea.selectionStart = 0;
    textarea.selectionEnd = textarea.value.length;
    backspace(textarea);

    addText(textarea, '"Some special characters: \u0096,\u0001\u0003,\u0002..."');
    textarea.selectionStart = textarea.value.length-4;
    textarea.selectionEnd = textarea.value.length;

    await waitAsync(50); // Wait for special characters to be rendered
    
    testAssertion("SpecialChars", "Displays Correctly", confirm("Do the special characters read (0096),(0001)(0003),(0002) and align with the ellipsis? (OK=Yes)"), "user-judged");

    // Large amounts of code
    // Clear all code
    textarea.selectionStart = 0;
    textarea.selectionEnd = textarea.value.length;
    backspace(textarea);
    fetch(new Request("https://cdn.jsdelivr.net/gh/webcoder49/code-input@2.1/code-input.js"))
    .then((response) => response.text())
    .then((code) => {
        textarea.value = "// code-input v2.1: A large code file (not the latest version!)\n// Editing this here should give little latency.\n\n"+code;
        
        textarea.selectionStart = 112;
        textarea.selectionEnd = 112;
        addText(textarea, "\n", true);

        document.getElementById("collapse-results").setAttribute("open", true);
    });

    /* Make it clear if any tests have failed */
    if(testsFailed) {
        document.querySelector("h2").style.backgroundColor = "red";
        document.querySelector("h2").textContent = "Some Tests have Failed.";
    } else {
        document.querySelector("h2").style.backgroundColor = "lightgreen";
        document.querySelector("h2").textContent = "All Tests have Passed.";
    }
}
code-input-js/tests/tester.min.js000066400000000000000000000566611506303517500173520ustar00rootroot00000000000000var testsFailed=!1;function testData(a,b,c){let d=document.getElementById("test-results"),e=d.querySelector("#test-"+a);e==null&&(e=document.createElement("span"),e.innerHTML=`Group ${a}:\n`,e.id="test-"+a,d.append(e)),e.innerHTML+=`\t${b}: ${c}\n`}function testAssertion(a,b,c,d){let e=document.getElementById("test-results"),f=e.querySelector("#test-"+a);f==null&&(f=document.createElement("span"),f.innerHTML=`Group ${a}:\n`,f.id="test-"+a,e.append(f)),f.innerHTML+=`\t${b}: ${c?"passed":"failed ("+d+")"}\n`,c||(testsFailed=!0)}function assertEqual(a,b,c,d){let e=c==d;testAssertion(a,b,e,"see console output"),e||console.error(a,b,c,"should be",d)}function testAddingText(a,b,c,d,e,f){let g=b.selectionStart,h=b.value.substring(0,b.selectionStart),i=b.value.substring(b.selectionEnd);c(b);let j=h+d+i;assertEqual(a,"Text Output",b.value,j),assertEqual(a,"Code-Input Value JS Property Output",b.parentElement.value,j),assertEqual(a,"Selection Start",b.selectionStart,g+e),assertEqual(a,"Selection End",b.selectionEnd,g+f)}function addText(a,b,c=!1){for(let d=0;d{setTimeout(()=>{b()},a)})}function beginTest(a){let b=document.querySelector("code-input");a?codeInput.registerTemplate("code-editor",new codeInput.templates.Hljs(hljs,[new codeInput.plugins.AutoCloseBrackets,new codeInput.plugins.Autocomplete(function(a,b,c,d){d==c&&"popup"==b.value.substring(c-5,c)?(a.style.display="block",a.innerHTML="Here's your popup!"):a.style.display="none"}),new codeInput.plugins.Autodetect,new codeInput.plugins.FindAndReplace,new codeInput.plugins.GoToLine,new codeInput.plugins.Indent(!0,2),new codeInput.plugins.SelectTokenCallbacks(codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation("in-selection"),!1,!0,!0,!0,!0,!1),new codeInput.plugins.SpecialChars(!0)])):codeInput.registerTemplate("code-editor",new codeInput.templates.Prism(Prism,[new codeInput.plugins.AutoCloseBrackets,new codeInput.plugins.Autocomplete(function(a,b,c,d){d==c&&"popup"==b.value.substring(c-5,c)?(a.style.display="block",a.innerHTML="Here's your popup!"):a.style.display="none"}),new codeInput.plugins.FindAndReplace,new codeInput.plugins.GoToLine,new codeInput.plugins.Indent(!0,2),new codeInput.plugins.SelectTokenCallbacks(new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(selectBrace,deselectAllBraces),!0),new codeInput.plugins.SpecialChars(!0)])),startLoad(b,a)}function startLoad(a,b){let c,d=0,e=window.setInterval(()=>{c=a.querySelector("textarea"),null!=c&&window.clearInterval(e),d+=10,testData("TimeTaken","Textarea Appears",d+"ms (nearest 10)"),startTests(c,b)},10)}function allowInputEvents(a,b=void 0){a.addEventListener("input",function(a){a.isTrusted||(a.preventDefault(),b!==void 0&&(b.pluginData.autoCloseBrackets.automatedKeypresses=!0),document.execCommand("insertText",!1,a.data),b!==void 0&&(b.pluginData.autoCloseBrackets.automatedKeypresses=!1))},!1)}async function startTests(a,b){a.focus(),codeInputElement=a.parentElement,allowInputEvents(a,codeInputElement),assertEqual("Core","Initial Textarea Value",a.value,`console.log("Hello, World!");
// A second line
// A third line with  tags`);let c=codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g,"");assertEqual("Core","Initial Rendered Value",c,`console.log("Hello, World!");
// A second line
// A third line with <html> tags
`),codeInputElement.value+=`
console.log("I've got another line!", 2 < 3, "should be true.");`,await waitAsync(50),assertEqual("Core","JS-updated Textarea Value",a.value,`console.log("Hello, World!");
// A second line
// A third line with  tags
console.log("I've got another line!", 2 < 3, "should be true.");`),c=codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g,""),assertEqual("Core","JS-updated Rendered Value",c,`console.log("Hello, World!");
// A second line
// A third line with <html> tags
console.log("I've got another line!", 2 < 3, "should be true.");
`);const d=document.createElement("code-input");document.body.append(d),d.focus(),document.execCommand("insertText",!1,"Hello, World!"),assertEqual("Core","Programmatically-created element JS-accessible value",d.value,"Hello, World!"),await waitAsync(50),assertEqual("Core","Programmatically-created element rendered value",d.preElement.textContent,"Hello, World!\n");let e={listener:0,idl:0,content:0},f={listener:0,idl:0,content:0},g={listener:0,idl:0,content:0},h={listener:0,idl:0,content:0},i=(a,b)=>{b.isTrusted||e[a]++},j=a=>{f[a]++},k=a=>{g[a]++},l=a=>{h[a]++};codeInputElement.addEventListener("input",i.bind(null,"listener")),codeInputElement.addEventListener("change",j.bind(null,"listener")),codeInputElement.addEventListener("focus",k.bind(null,"listener")),codeInputElement.addEventListener("blur",l.bind(null,"listener")),codeInputElement.oninput=i.bind(null,"idl"),codeInputElement.onchange=j.bind(null,"idl"),codeInputElement.onfocus=k.bind(null,"idl"),codeInputElement.onblur=l.bind(null,"idl"),a.focus(),addText(a," // Hi"),a.blur(),a.focus(),window.content_listener_oninput=i.bind(null,"content"),codeInputElement.setAttribute("oninput","content_listener_oninput(event)"),window.content_listener_onchange=j.bind(null,"content"),codeInputElement.setAttribute("onchange","content_listener_onchange(event)"),window.content_listener_onfocus=k.bind(null,"content"),codeInputElement.setAttribute("onfocus","content_listener_onfocus(event)"),window.content_listener_onblur=l.bind(null,"content"),codeInputElement.setAttribute("onblur","content_listener_onblur(event)");let m=!1,n=()=>{m=!0};codeInputElement.addEventListener("input",n),codeInputElement.removeEventListener("input",n),addText(a," // Hi"),a.blur(),a.focus(),assertEqual("Core","addEventListener: Input Called Right Number of Times",e.listener,12),assertEqual("Core","addEventListener: Change Called Right Number of Times",f.listener,2),assertEqual("Core","addEventListener: Focus Called Right Number of Times",g.listener,3),assertEqual("Core","addEventListener: Blur Called Right Number of Times",h.listener,2),assertEqual("Core","IDL attribute (JavaScript .oninput) event handler: Input Called Right Number of Times then Overriden by Content Attr",e.idl,6),assertEqual("Core","IDL attribute (JavaScript .onchange) event handler: Change Called Right Number of Times then Overriden by Content Attr",f.idl,1),assertEqual("Core","IDL attribute (JavaScript .onfocus) event handler: Focus Called Right Number of Times then Overriden by Content Attr",g.idl,2),assertEqual("Core","IDL attribute (JavaScript .onblur) event handler: Blur Called Right Number of Times then Overriden by Content Attr",h.idl,1),assertEqual("Core","Content attribute (HTML oninput=\"...\") event handler: Input Called Right Number of Times",e.content,6),assertEqual("Core","Content attribute (HTML onchange=\"...\") event handler: Change Called Right Number of Times",f.content,1),assertEqual("Core","Content attribute (HTML onfocus=\"...\") event handler: Focus Called Right Number of Times",g.content,1),assertEqual("Core","Content attribute (HTML onblur=\"...\") event handler: Blur Called Right Number of Times",h.content,1),testAssertion("Core","addEventListener, removeEventListener: Input Removed Listener Not Called",!m,"(code-input element).removeEventListener did not work."),codeInputElement.removeEventListener("input",i),codeInputElement.removeEventListener("change",j),e=0,f=0,codeInputElement.addEventListener("input",{handleEvent:a=>{a.isTrusted||e++}}),codeInputElement.addEventListener("change",{handleEvent:()=>{f++}}),m=!1,n={handleEvent:()=>{m=!0}},codeInputElement.addEventListener("input",n),codeInputElement.removeEventListener("input",n),a.focus(),addText(a," // Hi"),a.blur(),a.focus(),assertEqual("Core","Object Event Listeners: Input Called Right Number of Times",e,6),assertEqual("Core","Object Event Listeners: Change Called Right Number of Times",f,1),testAssertion("Core","Object Event Listeners: Input Removed Listener Not Called",!m,"(code-input element).removeEventListener did not work."),b||(testAssertion("Core","Language attribute Initial value",!codeInputElement.codeElement.classList.contains("language-javascript")&&!codeInputElement.codeElement.classList.contains("language-html"),`Language unset but code element's class name is ${codeInputElement.codeElement.className}.`),codeInputElement.setAttribute("language","HTML"),await waitAsync(50),testAssertion("Core","Language attribute Changed value 1",codeInputElement.codeElement.classList.contains("language-html")&&!codeInputElement.codeElement.classList.contains("language-javascript"),`Language set to HTML but code element's class name is ${codeInputElement.codeElement.className}.`),codeInputElement.setAttribute("language","JavaScript"),await waitAsync(50),testAssertion("Core","Language attribute Changed value 2",codeInputElement.codeElement.classList.contains("language-javascript")&&!codeInputElement.codeElement.classList.contains("language-html"),`Language set to JavaScript but code element's class name is ${codeInputElement.codeElement.className}.`));let o=codeInputElement.parentElement;o.reset(),await waitAsync(50),assertEqual("Core","Form Reset resets Code-Input Value",codeInputElement.value,`console.log("Hello, World!");
// A second line
// A third line with  tags`),assertEqual("Core","Form Reset resets Textarea Value",a.value,`console.log("Hello, World!");
// A second line
// A third line with  tags`),c=codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g,""),assertEqual("Core","Form Reset resets Rendered Value",c,`console.log("Hello, World!");
// A second line
// A third line with <html> tags
`),testAddingText("AutoCloseBrackets",a,function(a){addText(a,`\nconsole.log("A test message`),move(a,2),addText(a,`;\nconsole.log("Another test message");\n{[{[]}(([[`),backspace(a),backspace(a),backspace(a),addText(a,`)`)},"\nconsole.log(\"A test message\");\nconsole.log(\"Another test message\");\n{[{[]}()]}",77,77),addText(a,"popup"),await waitAsync(50),testAssertion("Autocomplete","Popup Shows on input",confirm("Does the autocomplete popup display correctly? (OK=Yes)"),"user-judged"),move(a,-1),await waitAsync(50),testAssertion("Autocomplete","Popup Disappears on arrow key",confirm("Has the popup disappeared? (OK=Yes)"),"user-judged"),move(a,1),await waitAsync(50),testAssertion("Autocomplete","Popup Shows on arrow key",confirm("Does the autocomplete popup display correctly? (OK=Yes)"),"user-judged"),backspace(a),await waitAsync(50),testAssertion("Autocomplete","Popup Disappears on backspace",confirm("Has the popup disappeared? (OK=Yes)"),"user-judged"),move(a,1),backspace(a),backspace(a),backspace(a),backspace(a),b&&(a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),addText(a,"console.log(\"Hello, World!\");\nfunction sayHello(name) {\n  console.log(\"Hello, \" + name + \"!\");\n}\nsayHello(\"code-input\");"),await waitAsync(50),assertEqual("Autodetect","Detects JavaScript",codeInputElement.getAttribute("language"),"javascript"),a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),addText(a,"#!/usr/bin/python\nprint(\"Hello, World!\")\nfor i in range(5):\n  print(i)"),await waitAsync(50),assertEqual("Autodetect","Detects Python",codeInputElement.getAttribute("language"),"python"),a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),addText(a,"body, html {\n  height: 100%;\n  background-color: blue;\n  color: red;\n}"),await waitAsync(50),assertEqual("Autodetect","Detects CSS",codeInputElement.getAttribute("language"),"css")),a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),addText(a,"// hello /\\S/g\nhe('llo', /\\s/g);\nhello\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\na very very very very very very very very very very very very long line with many many many many many many many many many many many words\nline\nline\nline\nline\nline\nline\nline"),a.selectionStart=a.selectionEnd=0,await waitAsync(50),a.dispatchEvent(new KeyboardEvent("keydown",{cancelable:!0,key:"f",ctrlKey:!0}));let p=codeInputElement.querySelectorAll(".code-input_find-and-replace_dialog input"),q=p[0],r=p[1],s=p[2],t=p[3],u=codeInputElement.querySelectorAll(".code-input_find-and-replace_dialog button"),v=u[0],w=u[1],x=u[2],y=u[3],z=codeInputElement.querySelector(".code-input_find-and-replace_dialog details summary");q.value="/\\s/g",s.click(),await waitAsync(150),testAssertion("FindAndReplace","Finds Case-Sensitive Matches Correctly",confirm("Is there a match on only the lowercase '/\\s/g'?"),"user-judged"),q.value="he[^l]*llo",r.click(),s.click(),await waitAsync(150),testAssertion("FindAndReplace","Finds RegExp Matches Correctly",confirm("Are there matches on all 'he...llo's?"),"user-judged"),z.click(),w.click(),t.value="do('hello",x.click(),await waitAsync(50),assertEqual("FindAndReplace","Replaces Once Correctly",a.value,"// hello /\\S/g\ndo('hello', /\\s/g);\nhello\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\na very very very very very very very very very very very very long line with many many many many many many many many many many many words\nline\nline\nline\nline\nline\nline\nline"),v.click(),codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keydown",{key:"Escape"})),codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keyup",{key:"Escape"})),assertEqual("FindAndReplace","Selection Start on Focused Match when Dialog Exited",a.selectionStart,3),assertEqual("FindAndReplace","Selection End on Focused Match when Dialog Exited",a.selectionEnd,8),a.dispatchEvent(new KeyboardEvent("keydown",{cancelable:!0,key:"h",ctrlKey:!0})),q.value="",q.focus(),allowInputEvents(q),addText(q,"hello"),await waitAsync(200),t.value="hi",y.click(),assertEqual("FindAndReplace","Replaces All Correctly",a.value,"// hi /\\S/g\ndo('hi', /\\s/g);\nhi\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\na very very very very very very very very very very very very long line with many many many many many many many many many many many words\nline\nline\nline\nline\nline\nline\nline"),q.value="line",r.click(),await waitAsync(200),codeInputElement.style="height: 100px; width: 1000px;",w.click(),w.click(),w.click(),w.click(),w.click(),w.click(),w.click(),w.click(),await waitAsync(200),testAssertion("FindAndReplace","Scrolls to Match Correctly",confirm("Is the match on the very long line highlighted orange and near the centre of the element?"),"user-judged"),codeInputElement.style="",codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keydown",{key:"Escape"})),codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keyup",{key:"Escape"})),a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),addText(a,"// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line"),a.dispatchEvent(new KeyboardEvent("keydown",{cancelable:!0,key:"g",ctrlKey:!0}));let A=codeInputElement.querySelector(".code-input_go-to-line_dialog input");A.value="1",A.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),A.dispatchEvent(new KeyboardEvent("keyup",{key:"Enter"})),assertEqual("GoToLine","Line Only",a.selectionStart,0),a.dispatchEvent(new KeyboardEvent("keydown",{cancelable:!0,key:"g",ctrlKey:!0})),A.value="3:18",A.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),A.dispatchEvent(new KeyboardEvent("keyup",{key:"Enter"})),assertEqual("GoToLine","Line and Column",a.selectionStart,45),a.dispatchEvent(new KeyboardEvent("keydown",{cancelable:!0,key:"g",ctrlKey:!0})),A.value="10",A.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),A.dispatchEvent(new KeyboardEvent("keyup",{key:"Enter"})),assertEqual("GoToLine","Rejects Out-of-range Line",A.classList.contains("code-input_go-to-line_error"),!0),a.dispatchEvent(new KeyboardEvent("keydown",{cancelable:!0,key:"g",ctrlKey:!0})),A.value="2:12",A.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),A.dispatchEvent(new KeyboardEvent("keyup",{key:"Enter"})),assertEqual("GoToLine","Rejects Out-of-range Column",A.classList.contains("code-input_go-to-line_error"),!0),a.dispatchEvent(new KeyboardEvent("keydown",{cancelable:!0,key:"g",ctrlKey:!0})),A.value="sausages",A.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter"})),A.dispatchEvent(new KeyboardEvent("keyup",{key:"Enter"})),assertEqual("GoToLine","Rejects Invalid Input",A.classList.contains("code-input_go-to-line_error"),!0),assertEqual("GoToLine","Stays open when Rejects Input",A.parentElement.classList.contains("code-input_go-to-line_hidden-dialog"),!1),A.dispatchEvent(new KeyboardEvent("keydown",{key:"Escape"})),A.dispatchEvent(new KeyboardEvent("keyup",{key:"Escape"})),assertEqual("GoToLine","Exits when Esc pressed",A.parentElement.classList.contains("code-input_go-to-line_hidden-dialog"),!0),a.selectionStart=a.selectionEnd=a.value.length,addText(a,"\nfor(let i = 0; i < 100; i++) {\n  for(let j = i; j < 100; j++) {\n    // Here's some code\n    console.log(i,j);\n  }\n}\n{\n  // This is indented\n}"),a.selectionStart=0,a.selectionEnd=a.value.length,a.dispatchEvent(new KeyboardEvent("keydown",{key:"Tab",shiftKey:!1})),a.dispatchEvent(new KeyboardEvent("keyup",{key:"Tab",shiftKey:!1})),assertEqual("Indent","Indents Lines",a.value,"  // 7 times table\n  let i = 1;\n  while(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n  // That's my code.\n  // This is another comment\n  // Another\n  // Line\n  for(let i = 0; i < 100; i++) {\n    for(let j = i; j < 100; j++) {\n      // Here's some code\n      console.log(i,j);\n    }\n  }\n  {\n    // This is indented\n  }"),a.dispatchEvent(new KeyboardEvent("keydown",{key:"Tab",shiftKey:!0})),a.dispatchEvent(new KeyboardEvent("keyup",{key:"Tab",shiftKey:!0})),assertEqual("Indent","Unindents Lines",a.value,"// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\n  for(let j = i; j < 100; j++) {\n    // Here's some code\n    console.log(i,j);\n  }\n}\n{\n  // This is indented\n}"),a.dispatchEvent(new KeyboardEvent("keydown",{key:"Tab",shiftKey:!0})),a.dispatchEvent(new KeyboardEvent("keyup",{key:"Tab",shiftKey:!0})),assertEqual("Indent","Unindents Lines where some are already fully unindented",a.value,"// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\nfor(let j = i; j < 100; j++) {\n  // Here's some code\n  console.log(i,j);\n}\n}\n{\n// This is indented\n}"),a.selectionStart=255,a.selectionEnd=274,a.dispatchEvent(new KeyboardEvent("keydown",{key:"Tab",shiftKey:!1})),a.dispatchEvent(new KeyboardEvent("keyup",{key:"Tab",shiftKey:!1})),assertEqual("Indent","Indents Lines by Selection",a.value,"// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\nfor(let j = i; j < 100; j++) {\n  // Here's some code\n  console.log(i,j);\n}\n}\n{\n  // This is indented\n}"),a.selectionStart=265,a.selectionEnd=265,a.dispatchEvent(new KeyboardEvent("keydown",{key:"Tab",shiftKey:!0})),a.dispatchEvent(new KeyboardEvent("keyup",{key:"Tab",shiftKey:!0})),assertEqual("Indent","Unindents Lines by Selection",a.value,"// 7 times table\nlet i = 1;\nwhile(i <= 12) { console.log(`7 x ${i} = ${7*i}`) }\n// That's my code.\n// This is another comment\n// Another\n// Line\nfor(let i = 0; i < 100; i++) {\nfor(let j = i; j < 100; j++) {\n  // Here's some code\n  console.log(i,j);\n}\n}\n{\n// This is indented\n}"),a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),testAddingText("Indent-AutoCloseBrackets",a,function(a){addText(a,`function printTriples(max) {\nfor(let i = 0; i < max-2; i++) {\nfor(let j = 0; j < max-1; j++) {\nfor(let k = 0; k < max; k++) {\nconsole.log(i,j,k);\n}\n//Hmmm...\n}//Test auto-unindent\n{`,!0),move(a,1),backspace(a)},"function printTriples(max) {\n  for(let i = 0; i < max-2; i++) {\n    for(let j = 0; j < max-1; j++) {\n      for(let k = 0; k < max; k++) {\n        console.log(i,j,k);\n      }\n      //Hmmm...\n    }//Test auto-unindent\n    {\n      }\n    }\n  }\n}",221,221),b?(addText(a,"\nlet x = 1;\nlet y = 2;\nconsole.log(`${x} + ${y} = ${x+y}`);"),move(a,-4),a.selectionStart-=35,await waitAsync(50),assertEqual("SelectTokenCallbacks","Number of Selected Tokens",codeInputElement.querySelectorAll(".in-selection").length,13),assertEqual("SelectTokenCallbacks","Number of Selected .hljs-string Tokens",codeInputElement.querySelectorAll(".hljs-string.in-selection").length,0),assertEqual("SelectTokenCallbacks","Number of Selected .hljs-subst Tokens",codeInputElement.querySelectorAll(".hljs-subst.in-selection").length,2)):(addText(a,"\n[(),((),'Hi')]"),await waitAsync(50),move(a,-2),await waitAsync(50),assertEqual("SelectTokenCallbacks","Number of Selected Braces 1",codeInputElement.getElementsByClassName("brace-hover").length,2),move(a,1),await waitAsync(50),assertEqual("SelectTokenCallbacks","Number of Selected Braces 2",codeInputElement.getElementsByClassName("brace-hover").length,4)),a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),addText(a,"\"Some special characters: \x96,\x01\x03,\x02...\""),a.selectionStart=a.value.length-4,a.selectionEnd=a.value.length,await waitAsync(50),testAssertion("SpecialChars","Displays Correctly",confirm("Do the special characters read (0096),(0001)(0003),(0002) and align with the ellipsis? (OK=Yes)"),"user-judged"),a.selectionStart=0,a.selectionEnd=a.value.length,backspace(a),fetch(new Request("https://cdn.jsdelivr.net/gh/webcoder49/code-input@2.1/code-input.js")).then(a=>a.text()).then(b=>{a.value="// code-input v2.1: A large code file (not the latest version!)\n// Editing this here should give little latency.\n\n"+b,a.selectionStart=112,a.selectionEnd=112,addText(a,"\n",!0),document.getElementById("collapse-results").setAttribute("open",!0)}),testsFailed?(document.querySelector("h2").style.backgroundColor="red",document.querySelector("h2").textContent="Some Tests have Failed."):(document.querySelector("h2").style.backgroundColor="lightgreen",document.querySelector("h2").textContent="All Tests have Passed.")}