@thi.ng/rdom-components/editor.js

Collection of unstyled, customizable components for @thi.ng/rdom

import { div } from "@thi.ng/hiccup-html/blocks";
import { textArea } from "@thi.ng/hiccup-html/forms";
import { meldDeepObj } from "@thi.ng/object-utils/merge-deep";
import { $compile } from "@thi.ng/rdom/compile";
import { reactive } from "@thi.ng/rstream/stream";
import { computeCursorPos } from "@thi.ng/strings/cursor";
const editor = (src, opts = {}) => {
  opts = meldDeepObj(
    {
      editor: {
        attribs: {
          spellcheck: false
        }
      },
      cursor: {
        format: (pos) => pos[0] + ":" + pos[1]
      }
    },
    opts
  );
  let inner;
  const fmt = opts.cursor.format;
  const cursor = reactive(0).map(
    (pos) => fmt(
      inner ? computeCursorPos(inner.el.value, pos) : [1, 1]
    )
  );
  const setCursor = (e) => cursor.next(e.target.selectionStart);
  return div(
    opts.wrapper,
    inner = $compile(
      textArea({
        ...opts.editor.attribs,
        value: src,
        oninput: (e) => {
          setCursor(e);
          src.next(e.target.value);
        },
        onkeyup: setCursor,
        onmouseup: setCursor
      })
    ),
    div(opts.cursor.attribs, cursor)
  );
};
export {
  editor
};