Customizable Text Editing for SolidJS Apps

@bigmistqke/solid-contenteditable is a Solid-JS component designed to give you fine-grained control over contenteditable elements.

This component exposes a straightforward API. You can manage text content, control editability, and even customize the undo/redo history. It also provides hooks for patching and rendering.

You can use this component anywhere you need editable text with more control than a standard HTML input or textarea. This includes rich text editors, inline editing features, and custom input components.

GitHub Repo

Live Demo

Features

⚙️ Controlled or Uncontrolled: Use it in a controlled mode with createSignal or uncontrolled.

⏳ History Management: The historyStrategy prop lets you define how undo/redo operations behave.

📏 Single-Line Mode: The singleline prop restricts input to a single line, replacing newlines with spaces.

🔔 Text Content Updates: Use onTextContent callback, to keep track of content changes.

✍️ Editable Control: Toggle the editable prop to easily switch between edit and read-only modes.

🔌 Custom Patches: The onPatch function lets you intercept keyboard events and return custom patches.

🎨 Custom Rendering: The render prop gives you control over the visual presentation while maintaining the integrity of the text content.

Installation

You can install @bigmistqke/solid-contenteditable using your preferred package manager:

npm i @bigmistqke/solid-contenteditable

Or:

yarn add @bigmistqke/solid-contenteditable

Or:

pnpm add @bigmistqke/solid-contenteditable

Usage

Here’s a basic example of how to use the component in both controlled and uncontrolled modes:

import { ContentEditable } from '@bigmistqke/solid-contenteditable'
import { createSignal } from 'solid-js'
function ControlledContentEditable() {
  const [text, setText] = createSignal('Editable content here...')
  return <ContentEditable textContent={text()} onTextContent={setText} />
}
function UncontrolledContentEditable() {
  return <ContentEditable textContent='Editable content here...' />
}

This example demonstrates a more advanced scenario where you highlight hashtags:

import { ContentEditable } from '@bigmistqke/solid-contenteditable'
import { createSignal, For, Show } from 'solid-js'
function HashTagHighlighter() {
  const [text, setText] = createSignal('this is a #hashtag')
  return (
    <ContentEditable
      textContent={text()}
      onTextContent={setText}
      singleline
      render={textContent => (
        <For each={textContent().split(' ')}>
          {(word, wordIndex) => (
            <>
              <Show when={word.startsWith('#')} fallback={word}>
                <button onClick={() => console.log('clicked!')}>{word}</button>
              </Show>
              <Show when={textContent.split(' ').length - 1 !== wordIndex()} children=" " />
            </>
          )}
        </For>
      )}
    />
  )
}

The important rule to follow, the textContent provided to your render function must match the final textContent of the rendered output.

Related Resources

Solid-JS Documentation: The official documentation for Solid-JS provides a comprehensive understanding of the framework. (https://www.solidjs.com/)
MDN Web Docs – contenteditable: MDN’s documentation on the contenteditable attribute offers detailed information on its behavior and usage. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable)
Solid-headless: It’s another UI library for Solid-JS. (https://github.com/davedbase/solid-headless).
create-solid-editable: This library is a basic implementation for content editable components. (https://github.com/minhtranite/create-solid-editable)

FAQs

Q: What is historyStrategy?
A: historyStrategy is a function. It decides if two undo/redo actions should be combined.

Q: How does the render prop work?
A: The render prop takes a function. You get the current text content and can wrap it in HTML. The final text content must stay the same.

Q: Can I use this component for multi-line input?
A: Yes, by default, the component supports multi-line input. Set singleline to true for single-line mode.

Q: Why would I need custom patches via onPatch?
A: You might want to handle specific key combinations (like Ctrl+B for bold) in a custom way, or to integrate with other libraries. onPatch gives you that flexibility.

Q: Is this a full rich text editor?
A: No, @bigmistqke/solid-contenteditable provides the building blocks for rich text editing. You can build a full editor on top of it.