@webcoder49/code-input 2.1.0 → 2.2.1

package/CONTRIBUTING.md

@@ -6,7 +6,15 @@
 * 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.
 
-To keep this community productive and enjoyable, please [don't break the code of conduct here](https://github.com/WebCoder49/code-input/blob/main/CODE_OF_CONDUCT.md).
+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:
@@ -22,4 +30,6 @@ Firstly, thank you for doing this! This is probably the most time consuming way
 
 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.

package/README.md

@@ -2,9 +2,9 @@
 
 ![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)
 
-[![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/details/jOypJOx)
+[![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/details/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.*
@@ -76,9 +76,18 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
     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 */,
+
+    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)
   ));
   ```
@@ -109,13 +118,13 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
 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 `lang` attribute will add a `language-{value}` class to the `pre code` block. You can now use HTML attributes and events to make your element as simple or interactive as you like! 
+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 to make your element as simple or interactive as you like! 
   ```HTML
-  <code-input lang="HTML"></code-input>
+  <code-input language="HTML"></code-input>
   ```
   *or*
   ```HTML
-  <code-input lang="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>
+  <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>
   ```
 
 ## Contributing

package/code-input.css

@@ -4,42 +4,54 @@
 
 
 code-input {
-  /* Allow other elems to be inside */
+  /* Allow other elements to be inside */
+  display: block;
+  overflow-y: auto;
+  overflow-x: auto;
   position: relative;
   top: 0;
   left: 0;
-  display: block;
-  /* Only scroll inside elems */
-  overflow: hidden;
 
   /* Normal inline styles */
   margin: 8px;
   --padding: 16px;
   height: 250px;
-
-  font-size: normal;
+  font-size: inherit;
   font-family: monospace;
   line-height: 1.5; /* Inherited to child elements */
   tab-size: 2;
   caret-color: darkgrey;
   white-space: pre;
-  padding: 0!important; /* Use --padding */
+  padding: 0!important; /* Use --padding to set the code-input element's padding */
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: 100%;
 }
 
-code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
-  /* Both elements need the same text and space styling so they are directly on top of each other */
+
+code-input:not(.code-input_loaded) {
   margin: 0px!important;
+  margin-bottom: calc(-1 * var(--padding, 16px))!important;
   padding: var(--padding, 16px)!important;
   border: 0;
-  width: calc(100% - var(--padding, 16px) * 2);
-  height: calc(100% - var(--padding, 16px) * 2);
 }
 
-code-input:not(.code-input_loaded) {
+code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
+  /* Both elements need the same text and space styling so they are directly on top of each other */
   margin: 0px!important;
-  margin-bottom: calc(-1 * var(--padding, 16px))!important;
   padding: var(--padding, 16px)!important;
   border: 0;
+  min-width: calc(100% - var(--padding, 16px) * 2);
+  min-height: calc(100% - var(--padding, 16px) * 2);
+  overflow: hidden;
+  resize: none;
+  grid-row: 1;
+  grid-column: 1;
+  display: block;
+}
+code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
+  height: max-content;
+  width: max-content;
 }
 
 code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-element-styled pre code {
@@ -58,15 +70,12 @@ code-input textarea, code-input pre, code-input pre * {
   tab-size: inherit!important;
 }
 
-
 code-input textarea, code-input pre {
   /* In the same place */
-  position: absolute;
-  top: 0;
-  left: 0;
+  grid-column: 1;
+  grid-row: 1;
 }
 
-
 /* Move the textarea in front of the result */
 
 code-input textarea {
@@ -79,7 +88,7 @@ code-input pre {
 code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea {
   opacity: 0;
 }
-code-input:not(.code-input_loaded)::after {
+code-input:not(.code-input_loaded)::before {
   color: #ccc;
 }
 
@@ -96,8 +105,6 @@ code-input textarea::placeholder {
 
 /* Can be scrolled */
 code-input textarea, code-input pre {
-  overflow: auto!important;
-
   white-space: inherit;
   word-spacing: normal;
   word-break: normal;
@@ -110,9 +117,27 @@ code-input textarea {
   outline: none!important;
 }
 
-code-input:not(.code-input_registered)::after {
+code-input:not(.code-input_registered)::before {
   /* Display message to register */
   content: "Use codeInput.registerTemplate to set up.";
   display: block;
   color: grey;
 }
+
+/* Contains dialog boxes that might appear as the result of a plugin.
+Sticks to the top of the code-input element */
+code-input .code-input_dialog-container {
+  z-index: 2;
+  
+  position: sticky;
+  grid-row: 1;
+  grid-column: 1;
+  
+  top: 0px;
+  left: 0;
+  width: 100%;
+  height: 0;
+
+  /* Dialog boxes' text is left-aligned */
+  text-align: left;
+}

package/code-input.d.ts

@@ -76,13 +76,26 @@ export namespace plugins {
     constructor();
   }
 
+  /**
+   * Automatically closes pairs of brackets/quotes/other syntaxes in code, but also lets you choose the brackets this
+   * is activated for.
+   * Files: auto-close-brackets.js
+   */
+  class AutoCloseBrackets extends Plugin {
+    /**
+     * 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: Object);
+  }
+
   /**
    * 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
    */
   class Autocomplete extends Plugin {
     /**
-     * Pass in a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
+     * Pass in a function to create a plugin that displays the popup that takes in (popup element, textarea, textarea.selectionEnd).
      * @param {function} updatePopupCallback  a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
      */
     constructor(updatePopupCallback: (popupElem: HTMLElement, textarea: HTMLTextAreaElement, selectionEnd: number) => void);
@@ -110,6 +123,42 @@ export namespace plugins {
     constructor(delayMs: number);
   }
 
+  /**
+   * 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
+   */
+  class FindAndReplace extends Plugin {
+    /**
+     * 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? If not, you can 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? If not, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, true)`.
+     */
+    constructor(useCtrlF?: boolean, useCtrlH?: boolean);
+    /**
+     * Show a find-and-replace dialog.
+     * @param {codeInput.CodeInput} codeInputElement the `<code-input>` element.
+     * @param {boolean} replacePartExpanded whether the replace part of the find-and-replace dialog should be expanded
+     */
+    showPrompt(codeInput: CodeInput, replacePartExpanded: boolean): void;
+  }
+  
+  /**
+   * Add basic Go-To-Line (ctrl-G by default) functionality to the code editor.
+   * Files: go-to-line.js / go-to-line.css
+   */
+  class GoToLine extends Plugin {
+    /**
+     * 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? If not, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element)`.
+     */
+    constructor(useCtrlG: boolean);
+    /**
+     * Show a search-like dialog prompting line number.
+     * @param {codeInput.CodeInput} codeInput the `<code-input>` element.
+    */
+    showPrompt(codeInput: CodeInput): void;
+  }
+
   /**
    * Adds indentation using the `Tab` key, and auto-indents after a newline, as well as making it 
    * possible to indent/unindent multiple lines using Tab/Shift+Tab
@@ -120,8 +169,9 @@ export namespace plugins {
      * Create an indentation plugin to pass into a template
      * @param {Boolean} defaultSpaces Should the Tab key enter spaces rather than tabs? Defaults to false.
      * @param {Number} numSpaces How many spaces is each tab character worth? Defaults to 4.
+     * @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}"}. All brackets must only be one character, and this can be left as null to remove bracket-based indentation behaviour.
      */
-    constructor(defaultSpaces?: boolean, numSpaces?: Number);
+    constructor(defaultSpaces?: boolean, numSpaces?: Number, bracketPairs?: Object);
   }
 
   /**
@@ -164,10 +214,11 @@ export class Template {
    * @param {boolean} preElementStyled - is the `<pre>` element CSS-styled as well as the `<code>` element? If true, `<pre>` element's scrolling is synchronised; if false, `<code>` element's scrolling is synchronised.
    * @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `<code>` element will be given the class name 'language-[lang attribute's value]'.
    * @param {false} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` element as a second argument to the highlight function.
+   * @param {boolean} autoDisableDuplicateSearching - Leaving this as true uses code-input's default fix for preventing duplicate results in Ctrl+F searching from the input and result elements, and setting this to false indicates your highlighting function implements its own fix. The default fix works by moving text content from elements to CSS `::before` pseudo-elements after highlighting.
    * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.Plugin`
    * @returns template object
    */
-  constructor(highlight?: (code: HTMLElement) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: false, plugins?: Plugin[])
+  constructor(highlight?: (code: HTMLElement) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: false, autoDisableDuplicateSearching?: boolean, plugins?: Plugin[])
   /**
    * **When `includeCodeInputInHighlightFunc` is `true`, `highlight` takes two parameters: the `<pre><code>` element, and the `<code-input>` element.**
    * 
@@ -177,15 +228,25 @@ export class Template {
    * @param {boolean} preElementStyled - is the `<pre>` element CSS-styled as well as the `<code>` element? If true, `<pre>` element's scrolling is synchronised; if false, `<code>` element's scrolling is synchronised.
    * @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `<code>` element will be given the class name 'language-[lang attribute's value]'.
    * @param {true} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` element as a second argument to the highlight function.
+   * @param {boolean} autoDisableDuplicateSearching - Leaving this as true uses code-input's default fix for preventing duplicate results in Ctrl+F searching from the input and result elements, and setting this to false indicates your highlighting function implements its own fix. The default fix works by moving text content from elements to CSS `::before` pseudo-elements after highlighting.
    * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.Plugin`
    * @returns template object
    */
-  constructor(highlight?: (code: HTMLElement, codeInput: CodeInput) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: true, plugins?: Plugin[])
+  constructor(highlight?: (code: HTMLElement, codeInput: CodeInput) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: true, autoDisableDuplicateSearching?: boolean, plugins?: Plugin[])
   highlight: Function
   preElementStyled: boolean
   isCode: boolean
   includeCodeInputInHighlightFunc: boolean
+  autoDisableDuplicateSearching: boolean
   plugins: Plugin[]
+  /**
+   * @deprecated Please give a value for the `autoDisableDuplicateSearching` parameter.
+   */
+  constructor(highlight?: (code: HTMLElement) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: false, plugins?: Plugin[])
+  /**
+   * @deprecated Please give a value for the `autoDisableDuplicateSearching` parameter.
+   */
+  constructor(highlight?: (code: HTMLElement, codeInput: CodeInput) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: true, plugins?: Plugin[])
 }
 
 /**