Merge pull request #1 from phillip-kruger/main

Inital migration

Author: phillip-kruger

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,2 +1,93 @@
 # qui-code-block
-Code block component built on Code mirror 6
+
+The code block UI component is based on codemirror 6, wrapped in a Lit webcomponent.
+
+## Installation
+
+```bash
+npm i @qomponent/qui-code-block
+```
+
+## Usage
+
+```javascript
+import '@qomponent/qui-code-block';
+```
+
+```html
+<qui-code-block mode="properties" theme="dark">
+      <slot>
+foo = bar
+      </slot>
+    </qui-code-block>
+```
+
+### Modes:
+
+ - properties
+ - js
+ - java
+ - xml
+ - json
+ - yaml
+ - sql
+ - html
+ - css
+ - sass
+ - markdown
+
+### Linenumber
+
+Add `showLineNumbers` attribute. Example:
+
+```html
+<qui-code-block mode="properties" theme="dark" showLineNumbers>
+      <slot>
+foo = bar
+      </slot>
+    </qui-code-block>
+```
+
+### Editable
+
+Add `editable` attribute. Example:
+
+```html
+<qui-code-block id="code" mode="properties" theme="dark" value='${this._value}' editable>
+      <slot>
+foo = bar
+      </slot>
+    </qui-code-block>
+```
+
+You can get the value at any time by looking at the value attribute that you set (it's reflective) or you 
+can add a listener `shiftEnter` that will contain the new value in `event.detail.content` when Shift-Enter is pressed.
+
+```javascript
+let newValue = this.shadowRoot.getElementById('code').getAttribute('value');
+```
+
+### Theme
+
+Add attribute `theme`. Value can be `dark` or `light`;
+
+## Example
+
+To run the example:
+
+```bash
+npm install
+npm start
+```
+
+
+Then go to [http://localhost:8080/example](http://localhost:8080/example)
+
+## Contributing
+
+Pull requests are welcome. For major changes, please open an issue first
+to discuss what you would like to change.
+
+## License
+
+[Apache 2](http://www.apache.org/licenses/LICENSE-2.0)

asciiarmor.js

@@ -0,0 +1,107 @@
+// From @codemirror/legacy-modes
+function errorIfNotEmpty(stream) {
+
+    var nonWS = stream.match(/^\s*\S/);
+  
+    stream.skipToEnd();
+  
+    return nonWS ? "error" : null;
+  
+  }
+  
+  
+  export const asciiArmor = {
+  
+    name: "asciiarmor",
+  
+    token: function(stream, state) {
+  
+      var m;
+  
+      if (state.state == "top") {
+  
+        if (stream.sol() && (m = stream.match(/^-----BEGIN (.*)?-----\s*$/))) {
+  
+          state.state = "headers";
+  
+          state.type = m[1];
+  
+          return "tag";
+  
+        }
+  
+        return errorIfNotEmpty(stream);
+  
+      } else if (state.state == "headers") {
+  
+        if (stream.sol() && stream.match(/^\w+:/)) {
+  
+          state.state = "header";
+  
+          return "atom";
+  
+        } else {
+  
+          var result = errorIfNotEmpty(stream);
+  
+          if (result) state.state = "body";
+  
+          return result;
+  
+        }
+  
+      } else if (state.state == "header") {
+  
+        stream.skipToEnd();
+  
+        state.state = "headers";
+  
+        return "string";
+  
+      } else if (state.state == "body") {
+  
+        if (stream.sol() && (m = stream.match(/^-----END (.*)?-----\s*$/))) {
+  
+          if (m[1] != state.type) return "error";
+  
+          state.state = "end";
+  
+          return "tag";
+  
+        } else {
+  
+          if (stream.eatWhile(/[A-Za-z0-9+\/=]/)) {
+  
+            return null;
+  
+          } else {
+  
+            stream.next();
+  
+            return "error";
+  
+          }
+  
+        }
+  
+      } else if (state.state == "end") {
+  
+        return errorIfNotEmpty(stream);
+  
+      }
+  
+    },
+  
+    blankLine: function(state) {
+  
+      if (state.state == "headers") state.state = "body";
+  
+    },
+  
+    startState: function() {
+  
+      return {state: "top", type: null};
+  
+    }
+  
+  };