hbs-editor

Handlebars-aware autocomplete editor for <textarea> elements.

This repo ships:

• Headless core (Node.js compatible, no DOM required)
• Browser editor (DOM UI) + UMD bundle for <script> usage

Install

npm i hbs-editor

Build (for this repo)

This repository uses Rollup to produce dist/.

npm i
npm run build

Outputs:

• dist/core.mjs (ESM)
• dist/core.cjs (CJS)
• dist/browser.mjs (ESM)
• dist/hbs-editor.umd.js (UMD global)

Node.js (headless) usage

The default package entry exports the headless core.

ESM

import {
  getToken,
  filterSuggestions,
  applySuggestion,
  BUILTIN,
} from 'hbs-editor';

const variables = [
  { name: 'firstName', desc: 'User first name' },
  { name: 'integration.cpanel.name', desc: 'Integration name' },
];

const text = 'Hello {{fir';
const cursorPos = text.length;

const tok = getToken(text, cursorPos);
if (tok) {
  const suggestions = filterSuggestions(tok.query, { variables, maxItems: 10 });

  const picked = suggestions[0];
  const res = applySuggestion(text, cursorPos, picked);

  console.log(res.text);
  console.log(res.cursorPos);
}

CommonJS

const { filterSuggestions, applySuggestion } = require('hbs-editor');

Browser usage

1) CDN / <script> (UMD)

The UMD build exposes a global HbsEditor.

<script src="https://unpkg.com/[email protected]/dist/hbs-editor.umd.js"></script>
<script>
  const editor = new HbsEditor(document.getElementById('my-textarea'), {
    variables: [{ name: 'firstName', desc: '...' }],
    helpers: [{ name: 'uppercase', desc: '...', snippet: '{{uppercase $0}}' }],
    onchange: (value) => console.log(value),
  });
</script>

2) Bundlers (ESM)

import HbsEditor from 'hbs-editor/browser';

const editor = new HbsEditor(textareaEl, {
  variables: [{ name: 'firstName', desc: '...' }],
  onchange: (value) => console.log(value),
});

API

Core (headless)

• getToken(text, cursorPos)
  • returns { query, start } | null
• filterSuggestions(query, { variables, helpers, maxItems, builtin })
  • returns an array of suggestion items
• applySuggestion(text, cursorPos, item)
  • returns { text, cursorPos }

Browser editor

• new HbsEditor(textarea, options)
• editor.setVariables(vars)
• editor.setHelpers(helpers)
• editor.getValue()
• editor.setValue(str)
• editor.destroy()

Demo

Open demo.html in a browser.

The demo will try to load ./dist/hbs-editor.umd.js first (generated by npm run build). If it is missing (e.g. you haven't built yet), it will fall back to ./hbs-editor.js.

To generate dist/:

npm i
npm run build