bitwrench 1.2.16 → 2.0.7

package/dist/bitwrench-code-edit.es5.js

@@ -0,0 +1,875 @@
+/*! bitwrench v2.0.7 | BSD-2-Clause | http://deftio.com/bitwrench */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.bwCodeEdit = {}));
+})(this, (function (exports) { 'use strict';
+
+  /**
+   * bitwrench-code-edit.js - syntax-highlighted contenteditable code editor addon
+   *
+   * Provides bw.highlight() for tokenizing JS/CSS/HTML into TACO spans,
+   * and bw.codeEditor() for a live editable code block with syntax coloring.
+   *
+   * Can be loaded standalone (browser script tag after bitwrench.umd.js),
+   * or imported as an ES module / CJS module.
+   *
+   * @module bitwrench-code-edit
+   * @license BSD-2-Clause
+   */
+
+  // -- CSS (injected once) ----------------------------------------------
+  var _cssInjected = false;
+  var CSS_TEXT = '.bw-ce{background:#1e293b;border-radius:6px;border:1px solid rgba(255,255,255,0.08);overflow:auto}' + '.bw-ce pre{margin:0;padding:0}' + '.bw-ce code{font-family:"SF Mono",Monaco,"Cascadia Code",Consolas,monospace;font-size:0.875rem;line-height:1.6;color:#e2e8f0;outline:none;white-space:pre-wrap;display:block;padding:0.75rem 1rem}' + '.bw-ce code:empty::before{content:"\\200b"}' + '.bw-ce .bw-ce-keyword{color:#c792ea}' + '.bw-ce .bw-ce-string{color:#c3e88d}' + '.bw-ce .bw-ce-comment{color:#546e7a;font-style:italic}' + '.bw-ce .bw-ce-number{color:#f78c6c}' + '.bw-ce .bw-ce-operator{color:#89ddff}' + '.bw-ce .bw-ce-punctuation{color:#89ddff}' + '.bw-ce .bw-ce-property{color:#82aaff}' + '.bw-ce .bw-ce-function{color:#82aaff}' + '.bw-ce .bw-ce-tag{color:#f07178}' + '.bw-ce .bw-ce-attr-name{color:#ffcb6b}' + '.bw-ce .bw-ce-attr-value{color:#c3e88d}' + '.bw-ce .bw-ce-selector{color:#c792ea}' + '.bw-ce .bw-ce-css-prop{color:#82aaff}' + '.bw-ce .bw-ce-css-value{color:#f78c6c}' + '.bw-ce .bw-ce-at-rule{color:#c792ea;font-style:italic}' + '.bw-ce .bw-ce-color{color:#f78c6c}' + '.bw-ce .bw-ce-template-interp{color:#89ddff}' +
+  // Light theme
+  '.bw-ce-light.bw-ce{background:#fafafa;border-color:#d8d8d8}' + '.bw-ce-light.bw-ce code{color:#1a1a1a}' + '.bw-ce-light.bw-ce .bw-ce-keyword{color:#7c3aed}' + '.bw-ce-light.bw-ce .bw-ce-string{color:#16a34a}' + '.bw-ce-light.bw-ce .bw-ce-comment{color:#9ca3af;font-style:italic}' + '.bw-ce-light.bw-ce .bw-ce-number{color:#ea580c}' + '.bw-ce-light.bw-ce .bw-ce-operator{color:#0891b2}' + '.bw-ce-light.bw-ce .bw-ce-punctuation{color:#6b7280}' + '.bw-ce-light.bw-ce .bw-ce-property{color:#2563eb}' + '.bw-ce-light.bw-ce .bw-ce-function{color:#2563eb}' + '.bw-ce-light.bw-ce .bw-ce-tag{color:#dc2626}' + '.bw-ce-light.bw-ce .bw-ce-attr-name{color:#d97706}' + '.bw-ce-light.bw-ce .bw-ce-attr-value{color:#16a34a}' + '.bw-ce-light.bw-ce .bw-ce-selector{color:#7c3aed}' + '.bw-ce-light.bw-ce .bw-ce-css-prop{color:#2563eb}' + '.bw-ce-light.bw-ce .bw-ce-css-value{color:#ea580c}' + '.bw-ce-light.bw-ce .bw-ce-at-rule{color:#7c3aed}' + '.bw-ce-light.bw-ce .bw-ce-color{color:#ea580c}' + '.bw-ce-light.bw-ce .bw-ce-template-interp{color:#0891b2}';
+  function ensureCSS(bw) {
+    if (_cssInjected) return;
+    _cssInjected = true;
+    if (bw && bw.injectCSS) {
+      bw.injectCSS(CSS_TEXT, {
+        id: 'bw-code-edit-styles'
+      });
+    }
+  }
+
+  // -- JS keywords ------------------------------------------------------
+  var JS_KEYWORDS = {};
+  'var,const,let,function,return,if,else,for,while,do,switch,case,break,continue,new,typeof,instanceof,this,class,extends,import,export,default,from,true,false,null,undefined,try,catch,throw,finally,async,await,yield,of,in,delete,void,with,super,static,get,set,debugger'.split(',').forEach(function (k) {
+    JS_KEYWORDS[k] = true;
+  });
+
+  // -- JS Tokenizer -----------------------------------------------------
+  function tokenizeJS(code) {
+    var tokens = [];
+    var i = 0,
+      len = code.length;
+    var buf = '';
+    function flush(type) {
+      if (buf.length) {
+        tokens.push({
+          type: type,
+          text: buf
+        });
+        buf = '';
+      }
+    }
+    while (i < len) {
+      var ch = code[i];
+      var next = code[i + 1];
+
+      // Line comment
+      if (ch === '/' && next === '/') {
+        flush('plain');
+        var end = code.indexOf('\n', i);
+        if (end === -1) end = len;
+        tokens.push({
+          type: 'comment',
+          text: code.substring(i, end)
+        });
+        i = end;
+        continue;
+      }
+
+      // Block comment
+      if (ch === '/' && next === '*') {
+        flush('plain');
+        var end2 = code.indexOf('*/', i + 2);
+        if (end2 === -1) end2 = len - 2;
+        tokens.push({
+          type: 'comment',
+          text: code.substring(i, end2 + 2)
+        });
+        i = end2 + 2;
+        continue;
+      }
+
+      // Regex (simple heuristic: / after operator or start-of-line)
+      if (ch === '/' && next !== '/' && next !== '*') {
+        var prevToken = tokens.length ? tokens[tokens.length - 1] : null;
+        var prevBuf = buf.trim();
+        var isRegex = false;
+        if (!prevBuf.length) {
+          if (!prevToken) isRegex = true;else if (prevToken.type === 'operator' || prevToken.type === 'punctuation' || prevToken.type === 'keyword') isRegex = true;
+        }
+        if (isRegex) {
+          flush('plain');
+          var rBuf = '/';
+          var ri = i + 1;
+          var escaped = false;
+          var inCharClass = false;
+          while (ri < len) {
+            var rc = code[ri];
+            if (escaped) {
+              rBuf += rc;
+              escaped = false;
+              ri++;
+              continue;
+            }
+            if (rc === '\\') {
+              escaped = true;
+              rBuf += rc;
+              ri++;
+              continue;
+            }
+            if (rc === '[') {
+              inCharClass = true;
+              rBuf += rc;
+              ri++;
+              continue;
+            }
+            if (rc === ']') {
+              inCharClass = false;
+              rBuf += rc;
+              ri++;
+              continue;
+            }
+            if (rc === '/' && !inCharClass) {
+              rBuf += rc;
+              ri++;
+              break;
+            }
+            if (rc === '\n') break;
+            rBuf += rc;
+            ri++;
+          }
+          // Flags
+          while (ri < len && /[gimsuvy]/.test(code[ri])) {
+            rBuf += code[ri];
+            ri++;
+          }
+          tokens.push({
+            type: 'string',
+            text: rBuf
+          });
+          i = ri;
+          continue;
+        }
+      }
+
+      // Strings
+      if (ch === '"' || ch === "'" || ch === '`') {
+        flush('plain');
+        var quote = ch;
+        var sBuf = ch;
+        var si = i + 1;
+        if (quote === '`') {
+          // Template literal
+          while (si < len) {
+            var sc = code[si];
+            if (sc === '\\') {
+              sBuf += sc + (code[si + 1] || '');
+              si += 2;
+              continue;
+            }
+            if (sc === '$' && code[si + 1] === '{') {
+              // Flush string part so far
+              if (sBuf.length) tokens.push({
+                type: 'string',
+                text: sBuf
+              });
+              sBuf = '';
+              // Find matching brace (simple: count braces)
+              tokens.push({
+                type: 'template-interp',
+                text: '${'
+              });
+              si += 2;
+              var depth = 1;
+              var interpBuf = '';
+              while (si < len && depth > 0) {
+                if (code[si] === '{') depth++;else if (code[si] === '}') {
+                  depth--;
+                  if (depth === 0) break;
+                }
+                interpBuf += code[si];
+                si++;
+              }
+              // Tokenize the interpolation content recursively
+              var interpTokens = tokenizeJS(interpBuf);
+              tokens = tokens.concat(interpTokens);
+              tokens.push({
+                type: 'template-interp',
+                text: '}'
+              });
+              si++; // skip closing }
+              continue;
+            }
+            if (sc === '`') {
+              sBuf += sc;
+              si++;
+              break;
+            }
+            sBuf += sc;
+            si++;
+          }
+          if (sBuf.length) tokens.push({
+            type: 'string',
+            text: sBuf
+          });
+        } else {
+          while (si < len) {
+            var sc2 = code[si];
+            if (sc2 === '\\') {
+              sBuf += sc2 + (code[si + 1] || '');
+              si += 2;
+              continue;
+            }
+            if (sc2 === quote) {
+              sBuf += sc2;
+              si++;
+              break;
+            }
+            if (sc2 === '\n') break;
+            sBuf += sc2;
+            si++;
+          }
+          tokens.push({
+            type: 'string',
+            text: sBuf
+          });
+        }
+        i = si;
+        continue;
+      }
+
+      // Numbers
+      if (/[0-9]/.test(ch) || ch === '.' && next && /[0-9]/.test(next)) {
+        flush('plain');
+        var nBuf = '';
+        if (ch === '0' && next && /[xXbBoO]/.test(next)) {
+          nBuf = ch + next;
+          i += 2;
+          while (i < len && /[0-9a-fA-F_]/.test(code[i])) {
+            nBuf += code[i];
+            i++;
+          }
+        } else {
+          while (i < len && /[0-9._eE]/.test(code[i])) {
+            if ((code[i] === 'e' || code[i] === 'E') && code[i + 1] && /[+\-0-9]/.test(code[i + 1])) {
+              nBuf += code[i] + code[i + 1];
+              i += 2;
+              continue;
+            }
+            nBuf += code[i];
+            i++;
+          }
+        }
+        tokens.push({
+          type: 'number',
+          text: nBuf
+        });
+        continue;
+      }
+
+      // Identifiers / keywords
+      if (/[a-zA-Z_$]/.test(ch)) {
+        flush('plain');
+        var wBuf = '';
+        while (i < len && /[a-zA-Z0-9_$]/.test(code[i])) {
+          wBuf += code[i];
+          i++;
+        }
+        // Look-ahead: is it a function call?
+        var la = i;
+        while (la < len && (code[la] === ' ' || code[la] === '\t')) la++;
+        // Look-back: is it a property (after dot)?
+        var prevTok = tokens.length ? tokens[tokens.length - 1] : null;
+        var isDot = prevTok && prevTok.type === 'punctuation' && prevTok.text === '.';
+        if (JS_KEYWORDS[wBuf]) {
+          tokens.push({
+            type: 'keyword',
+            text: wBuf
+          });
+        } else if (isDot) {
+          if (la < len && code[la] === '(') {
+            tokens.push({
+              type: 'function',
+              text: wBuf
+            });
+          } else {
+            tokens.push({
+              type: 'property',
+              text: wBuf
+            });
+          }
+        } else if (la < len && code[la] === '(') {
+          tokens.push({
+            type: 'function',
+            text: wBuf
+          });
+        } else {
+          tokens.push({
+            type: 'plain',
+            text: wBuf
+          });
+        }
+        continue;
+      }
+
+      // Operators
+      if ('=+-*/%!<>&|^~?:'.indexOf(ch) !== -1) {
+        flush('plain');
+        // Consume multi-char operators
+        var opBuf = ch;
+        i++;
+        if (i < len && '=+-*/%!<>&|^~?:'.indexOf(code[i]) !== -1) {
+          opBuf += code[i];
+          i++;
+          if (i < len && '=>&|'.indexOf(code[i]) !== -1) {
+            opBuf += code[i];
+            i++;
+          }
+        }
+        tokens.push({
+          type: 'operator',
+          text: opBuf
+        });
+        continue;
+      }
+
+      // Punctuation
+      if ('(){}[];,.'.indexOf(ch) !== -1) {
+        flush('plain');
+        tokens.push({
+          type: 'punctuation',
+          text: ch
+        });
+        i++;
+        continue;
+      }
+
+      // Plain (whitespace + anything else)
+      buf += ch;
+      i++;
+    }
+    flush('plain');
+    return tokens;
+  }
+
+  // -- CSS Tokenizer ----------------------------------------------------
+  function tokenizeCSS(code) {
+    var tokens = [];
+    var i = 0,
+      len = code.length;
+    var state = 'selector'; // selector | prop | value
+    var buf = '';
+    function flush(type) {
+      if (buf.length) {
+        tokens.push({
+          type: type || 'plain',
+          text: buf
+        });
+        buf = '';
+      }
+    }
+    while (i < len) {
+      var ch = code[i];
+      var next = code[i + 1];
+
+      // Block comment
+      if (ch === '/' && next === '*') {
+        flush(state === 'selector' ? 'selector' : state === 'prop' ? 'css-prop' : 'css-value');
+        var end = code.indexOf('*/', i + 2);
+        if (end === -1) end = len - 2;
+        tokens.push({
+          type: 'comment',
+          text: code.substring(i, end + 2)
+        });
+        i = end + 2;
+        continue;
+      }
+
+      // Strings in values
+      if ((ch === '"' || ch === "'") && (state === 'value' || state === 'selector')) {
+        flush(state === 'selector' ? 'selector' : 'css-value');
+        var quote = ch;
+        var sBuf = ch;
+        i++;
+        while (i < len) {
+          if (code[i] === '\\') {
+            sBuf += code[i] + (code[i + 1] || '');
+            i += 2;
+            continue;
+          }
+          if (code[i] === quote) {
+            sBuf += code[i];
+            i++;
+            break;
+          }
+          sBuf += code[i];
+          i++;
+        }
+        tokens.push({
+          type: 'string',
+          text: sBuf
+        });
+        continue;
+      }
+
+      // At-rules
+      if (ch === '@' && state === 'selector') {
+        flush('selector');
+        var aBuf = '@';
+        i++;
+        while (i < len && /[a-zA-Z\-]/.test(code[i])) {
+          aBuf += code[i];
+          i++;
+        }
+        tokens.push({
+          type: 'at-rule',
+          text: aBuf
+        });
+        continue;
+      }
+
+      // Hex colors in values
+      if (ch === '#' && state === 'value') {
+        flush('css-value');
+        var hBuf = '#';
+        i++;
+        while (i < len && /[0-9a-fA-F]/.test(code[i])) {
+          hBuf += code[i];
+          i++;
+        }
+        tokens.push({
+          type: 'color',
+          text: hBuf
+        });
+        continue;
+      }
+
+      // Numbers in values
+      if (state === 'value' && /[0-9]/.test(ch)) {
+        flush('css-value');
+        var nBuf2 = '';
+        while (i < len && /[0-9.]/.test(code[i])) {
+          nBuf2 += code[i];
+          i++;
+        }
+        // Unit
+        var uBuf = '';
+        while (i < len && /[a-zA-Z%]/.test(code[i])) {
+          uBuf += code[i];
+          i++;
+        }
+        tokens.push({
+          type: 'number',
+          text: nBuf2 + uBuf
+        });
+        continue;
+      }
+
+      // Punctuation and state transitions
+      if (ch === '{') {
+        flush(state === 'selector' ? 'selector' : 'plain');
+        tokens.push({
+          type: 'punctuation',
+          text: ch
+        });
+        state = 'prop';
+        i++;
+        continue;
+      }
+      if (ch === '}') {
+        flush(state === 'prop' ? 'css-prop' : state === 'value' ? 'css-value' : 'plain');
+        tokens.push({
+          type: 'punctuation',
+          text: ch
+        });
+        state = 'selector';
+        i++;
+        continue;
+      }
+      if (ch === ':' && state === 'prop') {
+        flush('css-prop');
+        tokens.push({
+          type: 'punctuation',
+          text: ch
+        });
+        state = 'value';
+        i++;
+        continue;
+      }
+      if (ch === ';') {
+        flush(state === 'value' ? 'css-value' : 'plain');
+        tokens.push({
+          type: 'punctuation',
+          text: ch
+        });
+        state = 'prop';
+        i++;
+        continue;
+      }
+      if (ch === ',') {
+        flush(state === 'selector' ? 'selector' : state === 'value' ? 'css-value' : 'plain');
+        tokens.push({
+          type: 'punctuation',
+          text: ch
+        });
+        i++;
+        continue;
+      }
+
+      // Accumulate into buffer
+      buf += ch;
+      i++;
+    }
+    flush(state === 'selector' ? 'selector' : state === 'prop' ? 'css-prop' : 'css-value');
+    return tokens;
+  }
+
+  // -- HTML Tokenizer ---------------------------------------------------
+  function tokenizeHTML(code) {
+    var tokens = [];
+    var i = 0,
+      len = code.length;
+    var buf = '';
+    function flush(type) {
+      if (buf.length) {
+        tokens.push({
+          type: type,
+          text: buf
+        });
+        buf = '';
+      }
+    }
+    while (i < len) {
+      var ch = code[i];
+
+      // Comment
+      if (ch === '<' && code.substring(i, i + 4) === '<!--') {
+        flush('plain');
+        var end = code.indexOf('-->', i + 4);
+        if (end === -1) end = len - 3;
+        tokens.push({
+          type: 'comment',
+          text: code.substring(i, end + 3)
+        });
+        i = end + 3;
+        continue;
+      }
+
+      // Tag
+      if (ch === '<') {
+        flush('plain');
+        // Consume < and optional /
+        var tBuf = '<';
+        i++;
+        if (i < len && code[i] === '/') {
+          tBuf += '/';
+          i++;
+        }
+        // Tag name
+        while (i < len && /[a-zA-Z0-9\-]/.test(code[i])) {
+          tBuf += code[i];
+          i++;
+        }
+        tokens.push({
+          type: 'tag',
+          text: tBuf
+        });
+
+        // Attributes
+        while (i < len && code[i] !== '>' && !(code[i] === '/' && code[i + 1] === '>')) {
+          // Whitespace
+          if (/\s/.test(code[i])) {
+            var wBuf = '';
+            while (i < len && /\s/.test(code[i])) {
+              wBuf += code[i];
+              i++;
+            }
+            tokens.push({
+              type: 'plain',
+              text: wBuf
+            });
+            continue;
+          }
+          // Attribute name
+          if (/[a-zA-Z_\-@:]/.test(code[i])) {
+            var aBuf = '';
+            while (i < len && /[a-zA-Z0-9_\-@:]/.test(code[i])) {
+              aBuf += code[i];
+              i++;
+            }
+            tokens.push({
+              type: 'attr-name',
+              text: aBuf
+            });
+            // = sign
+            if (i < len && code[i] === '=') {
+              tokens.push({
+                type: 'punctuation',
+                text: '='
+              });
+              i++;
+              // Attribute value
+              if (i < len && (code[i] === '"' || code[i] === "'")) {
+                var q = code[i];
+                var vBuf = q;
+                i++;
+                while (i < len && code[i] !== q) {
+                  vBuf += code[i];
+                  i++;
+                }
+                if (i < len) {
+                  vBuf += code[i];
+                  i++;
+                }
+                tokens.push({
+                  type: 'attr-value',
+                  text: vBuf
+                });
+              } else {
+                // Unquoted value
+                var uBuf2 = '';
+                while (i < len && !/[\s>]/.test(code[i])) {
+                  uBuf2 += code[i];
+                  i++;
+                }
+                tokens.push({
+                  type: 'attr-value',
+                  text: uBuf2
+                });
+              }
+            }
+            continue;
+          }
+          // Anything else in tag
+          buf += code[i];
+          i++;
+          flush('plain');
+        }
+
+        // Close of tag
+        var closeBuf = '';
+        if (i < len && code[i] === '/') {
+          closeBuf += '/';
+          i++;
+        }
+        if (i < len && code[i] === '>') {
+          closeBuf += '>';
+          i++;
+        }
+        if (closeBuf) tokens.push({
+          type: 'tag',
+          text: closeBuf
+        });
+        continue;
+      }
+
+      // Entity
+      if (ch === '&') {
+        flush('plain');
+        var eBuf = '&';
+        i++;
+        while (i < len && code[i] !== ';' && /[a-zA-Z0-9#]/.test(code[i])) {
+          eBuf += code[i];
+          i++;
+        }
+        if (i < len && code[i] === ';') {
+          eBuf += ';';
+          i++;
+        }
+        tokens.push({
+          type: 'string',
+          text: eBuf
+        });
+        continue;
+      }
+
+      // Plain text
+      buf += ch;
+      i++;
+    }
+    flush('plain');
+    return tokens;
+  }
+
+  // -- Token to TACO conversion -----------------------------------------
+  var TOKENIZERS = {
+    js: tokenizeJS,
+    javascript: tokenizeJS,
+    css: tokenizeCSS,
+    html: tokenizeHTML
+  };
+  function tokensToTACO(tokArr) {
+    var result = [];
+    for (var i = 0; i < tokArr.length; i++) {
+      var tok = tokArr[i];
+      if (tok.type === 'plain') {
+        result.push(tok.text);
+      } else {
+        result.push({
+          t: 'span',
+          a: {
+            "class": 'bw-ce-' + tok.type
+          },
+          c: tok.text
+        });
+      }
+    }
+    return result;
+  }
+
+  // -- Public: highlight ------------------------------------------------
+  function highlight(code, lang) {
+    var tokenizer = TOKENIZERS[lang] || tokenizeJS;
+    var tokens = tokenizer(code);
+    return tokensToTACO(tokens);
+  }
+
+  // -- Caret save/restore -----------------------------------------------
+  function getCaretOffset(el) {
+    var sel = window.getSelection();
+    if (!sel.rangeCount) return 0;
+    var range = sel.getRangeAt(0).cloneRange();
+    range.selectNodeContents(el);
+    range.setEnd(sel.getRangeAt(0).startContainer, sel.getRangeAt(0).startOffset);
+    return range.toString().length;
+  }
+  function setCaretOffset(el, offset) {
+    var sel = window.getSelection();
+    var range = document.createRange();
+    var walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
+    var pos = 0;
+    var node;
+    while (node = walker.nextNode()) {
+      var nodeLen = node.textContent.length;
+      if (pos + nodeLen >= offset) {
+        range.setStart(node, offset - pos);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        return;
+      }
+      pos += nodeLen;
+    }
+    // If offset exceeds content, place at end
+    range.selectNodeContents(el);
+    range.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+
+  // -- Public: codeEditor -----------------------------------------------
+  function codeEditor(opts) {
+    opts = opts || {};
+    var code = opts.code || '';
+    var lang = opts.lang || 'js';
+    var height = opts.height || '180px';
+    var readOnly = !!opts.readOnly;
+    var className = 'bw-ce' + (opts.className ? ' ' + opts.className : '');
+    var highlighted = highlight(code, lang);
+    var codeAttrs = {
+      spellcheck: 'false',
+      "class": 'bw-ce-code'
+    };
+    if (!readOnly) {
+      codeAttrs.contenteditable = 'true';
+    }
+    return {
+      t: 'div',
+      a: {
+        "class": className,
+        style: 'max-height:' + height + ';overflow:auto'
+      },
+      c: [{
+        t: 'pre',
+        c: {
+          t: 'code',
+          a: codeAttrs,
+          c: highlighted
+        }
+      }],
+      o: {
+        mounted: function mounted(el) {
+          var codeEl = el.querySelector('.bw-ce-code');
+          if (!codeEl) return;
+          var currentCode = code;
+          var debounceTimer = null;
+
+          // Resolve bw from global or import context
+          var bw = typeof window !== 'undefined' && window.bw || {};
+          function getValue() {
+            return codeEl.textContent || '';
+          }
+          function setValue(newCode) {
+            currentCode = newCode;
+            var tacos = highlight(newCode, lang);
+            if (bw.html) codeEl.innerHTML = bw.html({
+              t: 'span',
+              c: tacos
+            });
+          }
+
+          // Expose API on the element
+          el._bwCodeEdit = {
+            getValue: getValue,
+            setValue: setValue
+          };
+          if (readOnly) return;
+          function rehighlight() {
+            var newCode = getValue();
+            if (newCode === currentCode) return;
+            currentCode = newCode;
+            var offset = getCaretOffset(codeEl);
+            var tacos = highlight(newCode, lang);
+            if (bw.html) codeEl.innerHTML = bw.html({
+              t: 'span',
+              c: tacos
+            });
+            setCaretOffset(codeEl, offset);
+            if (opts.onChange) opts.onChange(newCode);
+          }
+          codeEl.addEventListener('input', function () {
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(rehighlight, 50);
+          });
+
+          // Tab key: insert 2 spaces
+          codeEl.addEventListener('keydown', function (e) {
+            if (e.key === 'Tab') {
+              e.preventDefault();
+              document.execCommand('insertText', false, '  ');
+            }
+          });
+        }
+      }
+    };
+  }
+
+  // -- Auto-attach to bw when loaded as script tag ----------------------
+  function install(bw) {
+    if (!bw) return;
+    bw.highlight = highlight;
+    bw.codeEditor = function (opts) {
+      ensureCSS(bw);
+      return codeEditor(opts);
+    };
+  }
+
+  // Auto-install if bw is on window (script tag usage)
+  if (typeof window !== 'undefined' && window.bw) {
+    install(window.bw);
+  }
+  var bitwrenchCodeEdit = {
+    highlight: highlight,
+    codeEditor: codeEditor,
+    install: install,
+    CSS_TEXT: CSS_TEXT
+  };
+
+  exports.CSS_TEXT = CSS_TEXT;
+  exports.codeEditor = codeEditor;
+  exports.default = bitwrenchCodeEdit;
+  exports.highlight = highlight;
+  exports.install = install;
+  exports.tokenizeCSS = tokenizeCSS;
+  exports.tokenizeHTML = tokenizeHTML;
+  exports.tokenizeJS = tokenizeJS;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=bitwrench-code-edit.es5.js.map