@webcoder49/code-input 2.5.0 → 2.6.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 WebCoder49
+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

package/README.md

@@ -1,137 +1,20 @@
 # code-input
 
-![Click to Switch](https://img.shields.io/static/v1?label=&message=Click%20to%20Switch:%20&color=grey&style=for-the-badge)[![GitHub](https://img.shields.io/static/v1?label=&message=GitHub&color=navy&style=for-the-badge&logo=github)](https://github.com/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)
+![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) [![View the demo on CodePen](https://img.shields.io/static/v1?label=Demo&message=on%20CodePen&color=orange&logo=codepen&style=for-the-badge)](https://codepen.io/WebCoder49/full/jOypJOx)
-
-> ___Fully customisable, editable syntax-highlighted textareas that can be placed in any HTML form.___ [[🚀 View the Demo](https://codepen.io/WebCoder49/full/jOypJOx)]
-
-![Using code-input with many different themes](https://user-images.githubusercontent.com/69071853/133924472-05edde5c-23e7-4350-a41b-5a74d2dc1a9a.gif)
-*This demonstration uses themes from [Prism.js](https://prismjs.com/) and [highlight.js](https://highlightjs.org/), two syntax-highlighting programs which work well with and have compatibility built-in with code-input.*
-
-*A frontend JavaScript library, with:*<br/>
-[![TypeScript Bindings - Click to Use](https://img.shields.io/static/v1?label=TypeScript%20Bindings&message=Click%20to%20Use&style=for-the-badge&color=blue&logo=typescript&logoColor=white)](https://github.com/WebCoder49/code-input-for-typescript)
+[![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 &lt;textarea&gt; 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 `<textarea>` JavaScript interface, more languages and more use cases.
 
 ---
 
-## What does it do?
-**`code-input`** lets you **turn any ordinary JavaScript syntax-highlighting theme and program into customisable syntax-highlighted textareas** using an HTML custom element. It uses vanilla CSS to superimpose a `textarea` on a `pre code` block, then handles indentations, scrolling and fixes any resulting bugs with JavaScript. To see how it works behind the scenes (not how to use this library), please see [this CSS-Tricks article](https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/ "Creating an Editable Textarea That Supports Syntax-Highlighted Code") I wrote.
-
-## What are the advantages of using code-input, and what can it be used for?
-Unlike other front-end code-editor projects, the simplicity of how `code-input` works means it is **highly customisable**. As it is not a full-featured editor, you can **choose what features you want it to include, and use your favourite syntax-highlighting algorithms and themes**.
-
-The `<code-input>` element works like a `<textarea>` and therefore **works in HTML5 forms and supports using the `name`, `value` and `placeholder` attributes, events like `onchange`, form resets, to name a few...** [(Demo)](https://codepen.io/WebCoder49/details/JjmqjZv)
-
-`code-input` has also accumulated many **features in optional [plugins](./plugins/README.md)** from open-source contributions, allowing you to choose any features you want. If a feature you want is not present, [please open an issue / contribute it!](#contributing)
-
-## 🚀 Getting Started With `code-input` (in 4 simple steps)
-
-## [`code-input` also supports TypeScript (click)](https://github.com/WebCoder49/code-input-for-typescript)
-
-**You can follow the instructions below, or use the starter code available [here for highlight.js](https://codepen.io/WebCoder49/pen/vYMpMoJ?editors=1100) and [here for Prism.js](https://codepen.io/WebCoder49/pen/ExzNRyb?editors=1100).**
-
-`code-input` is designed to be **both easy to use and customisable**. Here's how to use it to create syntax-highlighted textareas: 
-
-### 1. Import `code-input`
-- **First, import your favourite syntax-highlighter's JS and CSS theme files** to turn editable. 
-- Then, import the CSS and JS files of `code-input` from a downloaded release or a CDN. The non-minified files are useful for using during development.
-
-<details>
-<summary>
-Locally downloaded (Click)
-</summary>
-
-```html
-<!--In the <head>-->
-<script src="path/to/code-input.min.js"></script>
-<link rel="stylesheet" href="path/to/code-input.min.css">
-```
-</details>
-<details>
-<summary>
-From JSDelivr CDN (click)
-</summary>
+Demos and usage instructions are available at <https://code-input-js.org> and [the `docs` directory](docs/), to let you get started quickly!
 
-```html
-<!--In the <head>-->
-<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.5/code-input.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.5/code-input.min.css">
-```
-</details>
-
-### 2. Creating a template
-The next step is to set up a `template` to link `code-input` to your syntax-highlighter. If you're using Prism.js or highlight.js, you can use the built-in template, or you can create your own otherwise. In these examples, I am registering the template as `"syntax-highlighted"`, but you can use any template name as long as you are consistent.
-
-- *Highlight.js:*
-  ```js
-  codeInput.registerTemplate("syntax-highlighted", codeInput.templates.hljs(hljs, [] /* Array of plugins (see below) */));
-  ```
-
-- *Prism.js:*
-  ```js
-  codeInput.registerTemplate("syntax-highlighted", codeInput.templates.prism(Prism, [] /* Array of plugins (see below) */));
-  ```
-
-- *Custom:*
-  ```js
-  codeInput.registerTemplate("syntax-highlighted", new codeInput.Template(
-    function(result_element) { /* Highlight function - with `pre code` code element */
-      /* Highlight code in result_element - code is already escaped so it doesn't become HTML */
-    },
-
-    true, /* Optional - Is the `pre` element styled as well as the `code` element?
-           * Changing this to false uses the code element as the scrollable one rather
-           * than the pre element */
-          
-    true, /* Optional - This is used for editing code - setting this to true sets the `code`
-           * element's class to `language-<the code-input's lang attribute>` */
-
-    false /* Optional - Setting this to true passes the `<code-input>` element as a second
-           * argument to the highlight function to be used for getting data- attribute values
-           * and using the DOM for the code-input */,
-
-    [] // Array of plugins (see below)
-  ));
-  ```
-
-### 3. Adding plugins
-[Plugins](./plugins/) allow you to add extra features to a template, like [automatic indentation](plugins/indent.js) or [support for highlight.js's language autodetection](plugins/autodetect.js). To use them, just:
-- Import the plugins' JS files after you have imported `code-input` and before registering the template.
-- Place instances of the plugins in the array of plugins argument when registering, like this:
-```html
-<script src="code-input.js"></script>
-<!--...-->
-<script src="plugins/autodetect.js"></script>
-<script src="plugins/indent.js"></script>
-<!--...-->
-<script>
-  codeInput.registerTemplate("syntax-highlighted", 
-    codeInput.templates.hljs(
-      hljs, 
-      [
-        new codeInput.plugins.Autodetect(), 
-        new codeInput.plugins.Indent(true, 2) // 2 spaces indentation
-      ]
-    )
-  );
-</script>
-```
-
-> ⚠️ Unfortunately placing multiple plugins of the same type in a template can currently cause errors and undefined behaviour, even if such a configuration makes logical sense. [This is issue #118](https://github.com/WebCoder49/code-input/issues/118) and will be fixed as soon as possible - if you'd like to help and have the time you're welcome, but it's also at the top of the maintainer's To-Do list.
-
-To see a full list of plugins and their functions, please see [plugins/README.md](./plugins/README.md).
-
-### 4. Using the component
-Now that you have registered a template, you can use the custom `<code-input>` element in HTML. If you have more than one template registered, you need to add the template name as the `template` attribute. With the element, using the `language` attribute will add a `language-{value}` class to the `pre code` block. You can now use HTML attributes and events, as well as CSS styles, to make your element as simple or interactive as you like, as if it were a `textarea` element! 
-  ```HTML
-  <code-input language="HTML"></code-input>
-  ```
-  *or*
-  ```HTML
-  <code-input language="HTML" placeholder="Type code here" template="syntax-highlighted" onchange="console.log('Your code is', this.value)">&lt; href='https://github.com/WebCoder49/code-input'>code-input&lt;/a></code-input>
-  ```
+---
 
-> ⚠️ At the moment, you need to set the `--padding` property rather than `padding` for a `code-input` element's CSS. All other properties should work as normal.
+![Using code-input with many different themes](https://user-images.githubusercontent.com/69071853/133924472-05edde5c-23e7-4350-a41b-5a74d2dc1a9a.gif)
+*This demonstration uses themes from [Prism.js](https://prismjs.com/) and [highlight.js](https://highlightjs.org/), two syntax-highlighting programs which work well with and have compatibility built-in with code-input.*
 
 ## Contributing
 If you have any features you would like to add to `code-input` as plugins or core functionality, or have found any bugs, please [open an issue](https://github.com/WebCoder49/code-input/issues) or [fork and submit a pull request](https://github.com/WebCoder49/code-input/fork)! All contributions to this open-source project will be greatly appreciated. You can see [more info in our `CONTRIBUTING.md` file](CONTRIBUTING.md).

package/code-input.css

@@ -1,7 +1,15 @@
-/* Code-Input Compatibility */
-/* By WebCoder49 */
-/* First Published on CSS-Tricks.com */
-
+/**
+ * **code-input** is a library which lets you create custom HTML `<code-input>`
+ * elements that act like `<textarea>` elements but support syntax-highlighted
+ * code, implemented using any typical syntax highlighting library.
+ *
+ * License of whole library for bundlers:
+ *
+ * Copyright 2021-2025 Oliver Geer and contributors
+ * @license MIT
+ *
+ * **<https://code-input-js.org>**
+ */
 
 code-input {
   /* Allow other elements to be inside */
@@ -12,6 +20,9 @@ code-input {
   top: 0;
   left: 0;
 
+  color: black;
+  background-color: white;
+
   /* Normal inline styles */
   margin: 8px;
   --padding: 16px;
@@ -38,8 +49,9 @@ code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, co
   margin: 0px!important;
   padding: var(--padding, 16px)!important;
   border: 0;
-  min-width: calc(100% - var(--padding) * 2);
-  min-height: calc(100% - var(--padding) * 2);
+  min-width: calc(100% - var(--padding, 16px) * 2);
+  min-height: calc(100% - var(--padding, 16px) * 2);
+  box-sizing: content-box; /* Make height, width work consistently no matter the box-sizing of ancestors; dialogs can be styled as wanted so are excluded. */
   overflow: hidden;
   resize: none;
   grid-row: 1;
@@ -54,10 +66,9 @@ code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_p
 
 code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-element-styled pre code {
   /* Remove all margin and padding from others */
-  margin: 0px!important;
-  padding: 0px!important;
-  width: 100%;
-  height: 100%;
+  margin: 0!important;
+  padding: 0!important;
+  border: 0!important;
 }
 
 code-input textarea, code-input pre, code-input pre * {
@@ -91,7 +102,7 @@ code-input textarea, code-input pre {
 
 /* Move the textarea in front of the result */
 
-code-input textarea {
+code-input textarea:not([data-code-input-fallback]) {
   z-index: 1;
 }
 code-input pre {
@@ -100,7 +111,7 @@ code-input pre {
 
 /* Make textarea almost completely transparent, except for caret and placeholder */
 
-code-input textarea {
+code-input textarea:not([data-code-input-fallback]) {
   color: transparent;
   background: transparent;
   caret-color: inherit!important; /* Or choose your favourite color */
@@ -123,7 +134,7 @@ code-input textarea {
   outline: none!important;
 }
 code-input:has(textarea:focus):not(.code-input_mouse-focused) {
-  outline: 2px solid black;
+  outline: 2px solid currentColor;
 }
 
 /* Before registering give a hint about how to register. */
@@ -135,19 +146,30 @@ code-input:not(.code-input_registered) {
 
 code-input:not(.code-input_registered)::after {
   /* Display message to register */
-  content: "Use codeInput.registerTemplate to set up.";
+  content: "No highlighting. JavaScript support is disabled or insufficient, or codeInput.registerTemplate has not been called.";
   display: block;
   position: absolute;
-  bottom: var(--padding);
-  left: var(--padding);
-  width: calc(100% - 2 * var(--padding));
+  bottom: 0;
+  left: var(--padding, 16px);
+  width: calc(100% - 2 * var(--padding, 16px));
+  overflow-x: auto;
 
-  border-top: 1px solid grey;
-  outline: var(--padding) solid white;
-  background-color: white;
+  border-top: 1px solid currentColor;
+  outline-top: 0;
+  background-color: inherit;
+  color: inherit;
+
+  margin: 0;
+  padding: 0;
+  height: 2em;
 }
 
-code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea {
+code-input:not(.code-input_registered) textarea {
+  /* Don't overlap with message */
+  min-height: calc(100% - var(--padding, 16px) * 2 - 2em);
+}
+
+code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea:not([data-code-input-fallback]) {
   opacity: 0;
 }
 
@@ -166,12 +188,16 @@ code-input .code-input_dialog-container {
 
   margin: 0;
   padding: 0;
-  width: 100%;
   height: 0;
+  width: 100%;
 
   /* Dialog boxes' text is based on text-direction */
   text-align: inherit;
 }
+code-input.code-input_pre-element-styled .code-input_dialog-container {
+  width: calc(100% + 2 * var(--padding, 16px));
+}
+
 [dir=rtl] code-input .code-input_dialog-container, code-input[dir=rtl] .code-input_dialog-container {
   left: unset;
   right: 0;
@@ -184,23 +210,23 @@ code-input .code-input_dialog-container .code-input_keyboard-navigation-instruct
 
   display: block;
   position: absolute;
+  top: 0;
+  left: 0;
+
   background-color: black;
   color: white;
   padding: 2px;
-  padding-left: 10px;
   margin: 0;
   text-wrap: balance;
   overflow: hidden;
   text-overflow: ellipsis;
-  width: calc(100% - 12px);
+
+  width: 100%;
+  box-sizing: border-box;
   max-height: 3em;
 }
-code-input:has(pre[dir=rtl]) .code-input_dialog-container .code-input_keyboard-navigation-instructions {
-  left: unset;
-  right: 0;
-}
 
-code-input:not(:has(textarea:focus)) .code-input_dialog-container .code-input_keyboard-navigation-instructions,
+code-input:not(:has(textarea:not([data-code-input-fallback]):focus)) .code-input_dialog-container .code-input_keyboard-navigation-instructions,
 code-input.code-input_mouse-focused .code-input_dialog-container .code-input_keyboard-navigation-instructions,
 code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions:empty {
   /* When not keyboard-focused / no instructions don't show instructions */
@@ -208,8 +234,20 @@ code-input .code-input_dialog-container .code-input_keyboard-navigation-instruct
 }
 
 /* Things with padding when instructions are present */
-code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused) textarea,
-code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code,
-code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
-  padding-top: calc(var(--padding) + 3em)!important;
+code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused) textarea,
+code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code,
+code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
+  padding-top: calc(var(--padding, 16px) + 3em)!important;
+}
+code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused) textarea, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
+  min-height: calc(100% - var(--padding, 16px) * 2 - 3em);
+}
+
+/* No JavaScript fallback - styles to override all previous */
+
+code-input textarea[data-code-input-fallback] {
+  overflow: auto;
+  background-color: inherit;
+  color: inherit;
+  height: max-content;
 }