Editor

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JEditor } from '@juxtui/ui/editor'

Usage #

<script setup lang="ts">
import { JEditor } from '@juxtui/ui/editor'

const content = ref('<p>Hello</p>')
</script>

<template>
  <JEditor v-model="content" label="Post" />
</template>

The editor is its own entry point, @juxtui/ui/editor, so apps that don’t use it never load its engine. With the Nuxt module, JEditor is auto-imported like everything else.

Under the hood it runs on Tiptap (ProseMirror), which handles the hard parts of editing: undo history, pasting from Word or Google Docs, IME input and nested lists. The interface, keyboard model and styling are juxt.ui.

Markdown shortcuts work while typing: # to ### for headings, - or * for lists, 1. for numbered lists, [ ] for to-dos, > for quotes, three backticks for code and --- for a divider.

Pasted and linked URLs are cleaned up: javascript: links are refused, bare domains get https://, and email addresses become mailto: links.

Variants & examples #

Comment box#

toolbar="minimal" keeps only marks, link and lists. Slash commands are off.

<script setup lang="ts">
const comment = ref('')

function send() {
  if (!comment.value) return
  toast.success('Comment posted')
  comment.value = ''
}
</script>

<template>
  <div class="flex flex-col gap-3">
    <JEditor
      v-model="comment"
      toolbar="minimal"
      :slash-commands="false"
      min-height="5rem"
      placeholder="Leave a comment…"
      aria-label="Comment"
    />
    <div class="flex justify-end">
      <JButton size="sm" :disabled="!comment" @click="send">Comment</JButton>
    </div>
  </div>
</template>

Field with a limit#

Label, description and error work like Input. limit counts characters and stops typing at the limit.

<script setup lang="ts">
const bio = ref('<p>Designer and engineer. Builds calm software.</p>')
</script>

<template>
  <JEditor
    v-model="bio"
    label="Bio"
    description="Shown on your public profile."
    toolbar="minimal"
    :limit="160"
    min-height="6rem"
  />
</template>

Read-only#

Render stored content with the same typography, without a toolbar.

<template>
  <JEditor
    model-value="<h3>Terms</h3><p>By continuing you agree to the <a href='#'>terms of service</a>. This document can’t be edited.</p>"
    readonly
    :toolbar="false"
    min-height="0"
  />
</template>

API #

Props

Events

Slots

Methods

Accessibility #

• The writing area is role="textbox" with aria-multiline, labelled by the field label and described by its description or error.
• The toolbar is a single tab stop with arrow-key navigation (role="toolbar"). Toggle buttons expose aria-pressed; every button has a label and a tooltip with its shortcut.
• While the slash menu is open, the textbox points at it with aria-controls and aria-activedescendant, so screen readers announce the highlighted block while focus stays in the text.
• Clicking toolbar buttons never steals the selection, so formatting applies to what you selected.
• To-do checkboxes are real checkboxes, operable with Space.

Keyboard #