edix

An experimental, framework agnostic, small (~3kB) contenteditable state manager.

Motivation

Web editing is so hard even today. There are excellent libraries to make complex rich text editor, but they are too much for small purposes. Native textarea element is accessible and easy to use, but it's hardly customizable.

contenteditable attribute is a primitive for rich text editing, but as you may know it has so many problems. It has many edge case bugs, and has cross browser/OS/input device problems. And it doesn't work well with declarative frontend frameworks... However, at least the core of contenteditable is stable and it works in all browsers except the inconsistencies. This library aims to fill that gap, fix contenteditable to fit modern web development.

Demo

• React Storybook
• Framework examples

Install

npm install edix

typescript >=5.0 is recommended.

Getting started

1. Define your contents declaratively. There are rules you have to follow:

   • You must render <br/> in empty row (limitation of contenteditable).
   • If multiline option is
     • false or undefined, direct children of the root are treated as inline nodes.
     • true, direct children of the root are treated as rows. They must be elements, not text.
   • (TODO)

2. Call editable on mount, with HTMLElement which is the root of editable contents.

3. Update your state with onChange, which will be called on edit.

4. Call dispose on unmount for cleanup.

Here is an example for React.

Single line

import { useState, useEffect, useRef } from "react";
import { editable, plainSchema } from "edix";

export const App = () => {
  const ref = useRef<HTMLDivElement>(null);
  const [value, setValue] = useState("Hello world.");

  useEffect(() => {
    // 2. init
    const editor = editable(ref.current, {
      schema: plainSchema(),
      onChange: (v) => {
        // 3. update state
        setValue(v);
      },
    });
    return () => {
      // 4. cleanup
      editor.dispose();
    };
  }, []);

  // 1. render contents from state
  return (
    <div
      ref={ref}
      style={{
        backgroundColor: "white",
        border: "solid 1px darkgray",
        padding: 8,
      }}
    >
      {value ? value : <br />}
    </div>
  );
};

Multi line

import { useState, useEffect, useRef } from "react";
import { editable, plainSchema } from "edix";

export const App = () => {
  const ref = useRef<HTMLDivElement>(null);
  const [value, setValue] = useState("Hello world.");

  useEffect(() => {
    // 2. init
    const editor = editable(ref.current, {
      schema: plainSchema({ multiline: true }),
      onChange: (v) => {
        // 3. update state
        setValue(v);
      },
    });
    return () => {
      // 4. cleanup
      editor.dispose();
    };
  }, []);

  // 1. render contents from state
  return (
    <div
      ref={ref}
      style={{
        backgroundColor: "white",
        border: "solid 1px darkgray",
        padding: 8,
      }}
    >
      {value.split("\n").map((t, i) => (
        <div key={i}>{t ? t : <br />}</div>
      ))}
    </div>
  );
};

Other examples

• React (Demo, Source)
• Vue (Demo, Source)
• Svelte (Demo, Source)
• Solid (Demo, Source)
• Angular (Demo, Source)
• Preact (Demo, Source)
• Qwik (Source)
• Vanilla (Demo, Source)

...and more! Contribution welcome!

Documentation

• API reference

Contribute

All contributions are welcome. If you find a problem, feel free to create an issue or a PR. If you have a question, ask in discussions.

Making a Pull Request

1. Fork this repo.
2. Run npm install.
3. Commit your fix.
4. Make a PR and confirm all the CI checks passed.

Inspirations

• rich-textarea (my early work)
• use-editable
• Some great text editor libraries (ProseMirror, Lexical, Slate.js, Draft.js, etc.)
• Proposed EditContext API
• Proposed Richer Text Fields in Open UI