created readonly attribute for the wc-codemirror tag (#17)

* created read-only attribute for the wc-codemirror tag * changed the attribute read-only to readonly Co-authored-by: Aditya Shankar <[email protected]>
vanillawc · Jun 10, 2020 · c8853c0 · c8853c0
1 parent 2b23049
commit c8853c0
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -38,9 +38,9 @@ Try it on [WebComponents.dev](https://webcomponents.dev/edit/uQEePfQ92jOWOpupDzp
 - `src` - load an external source file
 - `style` - CSS styling (default `height:100%;width:100%;`)
 - `viewport-margin`<sup>1</sup> - sets the `viewportMargin` option of the CodeMirrror editor instance (default `10`)
+- `readonly` - sets the codemirror's "readOnly" configuration attribute to true, you may set `readonly="nocursor"` if you want to disable the cursor and not let the user copy the text inside
 
 *<sup>1</sup>Setting `viewport-margin` to `infinity` will auto-resize the editor to its contents. To see this in action, check out the [CodeMirror Auto-Resize Demo](https://codemirror.net/demo/resize.html).*
-
 **Properties**
 
 - `editor` - the CodeMirror editor instance
@@ -69,7 +69,7 @@ Load an external source file with the `src` attribute
 Inline source can be loaded by including a `<script>` of type `wc-content` in the body of the component. The `<script>` wrapper is necessary so '<' and '>' chars in the source are not interpreted as HTML.
 
 ```html
-<wc-codemirror>
+<wc-codemirror mode="javascript">
   <script type="wc-content">
   function myGoodPerson(){
      return "what can I do for you ?"

diff --git a/dev/index.html b/dev/index.html
@@ -18,7 +18,25 @@
   <!-- <wc-codemirror src="sample.txt"></wc-codemirror> -->
 
   <!-- inline -->
-  <!-- <wc-codemirror mode="javascript">
+  <wc-codemirror mode="javascript">
+    <script type="wc-content">
+        function myGoodPerson(){
+            return "what can I do for you ?"
+        }
+    </script>
+  </wc-codemirror>
+
+  <!-- inline read-only -->
+  <!-- <wc-codemirror mode="javascript" readonly>
+    <script type="wc-content">
+        function myGoodPerson(){
+            return "what can I do for you ?"
+        }
+    </script>
+  </wc-codemirror> -->
+
+  <!-- inline read-only="nocursor" -->
+  <!-- <wc-codemirror mode="javascript" readonly="nocursor">
     <script type="wc-content">
         function myGoodPerson(){
             return "what can I do for you ?"
@@ -36,7 +54,7 @@
   <!-- <wc-codemirror src="sample.html" mode="htmlmixed" theme="duotone-light"></wc-codemirror> -->
 
   <!-- viewport-margin -->
-  <wc-codemirror viewport-margin="infinity"></wc-codemirror>
+  <!-- <wc-codemirror viewport-margin="infinity"></wc-codemirror> -->
 
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -9766,7 +9766,7 @@ class WCCodeMirror extends HTMLElement {
     this.setSrc();
   }
 
-  get value () { return this.__editor.getValue(); }
+  get value () { return this.editor.getValue(); }
   set value (value) {
     this.setValue(value);
   }
@@ -9778,7 +9778,7 @@ class WCCodeMirror extends HTMLElement {
     this.appendChild(template.content.cloneNode(true));
     this.__initialized = false;
     this.__element = null;
-    this.__editor = null;
+    this.editor = null;
   }
 
   async connectedCallback () {
@@ -9787,6 +9787,11 @@ class WCCodeMirror extends HTMLElement {
 
     const mode = this.hasAttribute('mode') ? this.getAttribute('mode') : 'null';
     const theme = this.hasAttribute('theme') ? this.getAttribute('theme') : 'default';
+    let readOnly = this.getAttribute('readonly');
+
+    if(readOnly === '') readOnly = true;
+    else if(readOnly !== 'nocursor') readOnly = false;
+
     let content = '';
     const innerScriptTag = this.querySelector('script');
     if (innerScriptTag) {
@@ -9801,9 +9806,9 @@ class WCCodeMirror extends HTMLElement {
       viewportMargin = viewportMarginAttr === 'infinity' ? Infinity : parseInt(viewportMarginAttr);
     }
 
-    this.__editor = CodeMirror.fromTextArea(this.__element, {
+    this.editor = CodeMirror.fromTextArea(this.__element, {
       lineNumbers: true,
-      readOnly: false,
+      readOnly,
       mode,
       theme,
       viewportMargin
@@ -9823,13 +9828,13 @@ class WCCodeMirror extends HTMLElement {
   async setSrc () {
     const src = this.getAttribute('src');
     const contents = await this.fetchSrc(src);
-    this.__editor.swapDoc(CodeMirror.Doc(contents, this.getAttribute('mode')));
-    this.__editor.refresh();
+    this.editor.swapDoc(CodeMirror.Doc(contents, this.getAttribute('mode')));
+    this.editor.refresh();
   }
 
   async setValue (value) {
-    this.__editor.swapDoc(CodeMirror.Doc(value, this.getAttribute('mode')));
-    this.__editor.refresh();
+    this.editor.swapDoc(CodeMirror.Doc(value, this.getAttribute('mode')));
+    this.editor.refresh();
   }
 
   async fetchSrc (src) {

diff --git a/index.min.js b/index.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vanillawc/wc-codemirror",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "license": "MIT",
   "author": "Evan Plaice <[email protected]> (https://evanplaice.com/)",
   "description": "CodeMirror as a vanilla web component",

diff --git a/src/wc-codemirror.js b/src/wc-codemirror.js
@@ -44,6 +44,11 @@ export class WCCodeMirror extends HTMLElement {
 
     const mode = this.hasAttribute('mode') ? this.getAttribute('mode') : 'null';
     const theme = this.hasAttribute('theme') ? this.getAttribute('theme') : 'default';
+    let readOnly = this.getAttribute('readonly');
+
+    if(readOnly === '') readOnly = true;
+    else if(readOnly !== 'nocursor') readOnly = false;
+
     let content = '';
     const innerScriptTag = this.querySelector('script');
     if (innerScriptTag) {
@@ -60,7 +65,7 @@ export class WCCodeMirror extends HTMLElement {
 
     this.editor = CodeMirror.fromTextArea(this.__element, {
       lineNumbers: true,
-      readOnly: false,
+      readOnly,
       mode,
       theme,
       viewportMargin