Merge pull request #76 from WebCoder49/performance-improvements

Improve library performance; Make scrolling use CSS rather than JS; Add unit tests and fix code following them.

Author: WebCoder49

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.

README.md

@@ -88,11 +88,6 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
            * argument to the highlight function to be used for getting data- attribute values
            * and using the DOM for the code-input */,
 
-    true /* Optional - 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. */
-
     [] // Array of plugins (see below)
   ));
   ```

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,17 +117,9 @@ 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;
-}
-
-/* To prevent Ctrl+F in result element */
-code-input pre .code-input_searching-disabled::before {
-  content: attr(data-content);
-}
-code-input pre .code-input_searching-disabled {
-  font-size: 0;
 }

code-input.d.ts

@@ -95,7 +95,7 @@ export namespace plugins {
    */
   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);