AisInlineEditor

AisInlineEditor provides an editor for a block of HTML text. It generates a single div, which may include inline styling. When text is selected, a floating menu appears with formatting options. Common keyboard commands work as expected. AisInlineEditor can be used more like AisInput, but it will expand to multiple lines as its content grows. See AisEditor for a more expansive editing experience. AisInlineEditor is built using the TipTap library which is built on top of ProseMirror.

<div>The quick brown <strong>fox</strong> <em>jumps</em> over the <s>lazy</s> <strong>dog</strong>.</div>

<script setup>
  import { ref } from 'vue'
  import { AisInlineEditor } from '@ais-public/ais-components'
  import { AisBox } from '@ais-public/ais-components'
  import { AisFlexBar } from '@ais-public/ais-components'
  import { AisButton } from '@ais-public/ais-components'

  const content = ref('<div>The quick brown <strong>fox</strong> <em>jumps</em> over the <s>lazy</s> <strong>dog</strong>.</div>')
</script>

<template>
  <div class="grid gap-4">
    <AisInlineEditor v-model="content" class="grow basis-1" />

    <AisBox class="default">
      <div>{{content || 'Editor is empty'}}</div>
    </AisBox>
    <AisFlexBar>
      <AisButton
        variant="primary" hover fast press
        icon="close"
        @click="content=''"
      >
        Clear editor
      </AisButton>
    </AisFlexBar>
  </div>
</template>

Props

v-model

Use the v-model directive to bind to an editor's value. Note that when the editor is empty, v-model will return an empty string even though the editor may contain an empty HTML element. In general, this behavior should match expectations and makes it easier to test if a value is present. v-model uses the modelValue prop under the covers. See Vue's documentation for details.

placeholder

placeholder sets the text that appears when no value is set.

disabled

Use the boolean disabled prop to disable an AisEditor. You can use disabled by itself or :disabled="true".

<script setup>
  import {ref} from 'vue'
  import { AisInlineEditor } from '@ais-public/ais-components'
  const content = ref('<div>The quick brown fox jumps over the lazy dog.</div>')
</script>

<template>
  <AisInlineEditor disabled v-model="content" />
</template>

invalid

Use the boolean invalid prop to disable an AisEditor. You can use invalid by itself or :invalid="true".

<script setup>
  import {ref} from 'vue'
  import { AisInlineEditor } from '@ais-public/ais-components'
  const content = ref('<div>The quick brown fox jumps over the lazy dog.</div>')
</script>

<template>
  <AisInlineEditor invalid v-model="content" />
</template>

size

AisEditor accepts the following sizes, xs, sm, md, lg, and xl. size should match the inline editor to other AIS controls. Medium (md) is the default value.

Editor

Sizes

xssmmdlgxl

<script setup>
import {ref} from 'vue'
import { AisForm } from '@ais-public/ais-components'
import { AisField } from '@ais-public/ais-components'
import { AisInlineEditor } from '@ais-public/ais-components'
import { AisSelect } from '@ais-public/ais-components'

const content = ref('<div>The quick brown fox jumps over the lazy dog.</div>')

const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
const selectedSize = ref('md')
</script>

<template>
  <AisForm :size="selectedSize" class="grid md:grid-cols-2 gap-4">
    <AisField label="Editor">
      <AisInlineEditor v-model="content"/>
    </AisField>
    <AisField label="Sizes">
      <AisSelect
          v-model="selectedSize"
          :options="sizes"
      />
    </AisField>
  </AisForm>
</template>

rounded

The rounded prop controls the border radius of the editor. The accepted values are: true, false, sm, rounded, md, lg, and xl. The default value is false.

Events

AisEditor uses Vue's standard v-model configuration. As a result, it will fire the @update:modelValue event whenever the editor's value changes. Typically, v-model should be preferred, but binding the event directly may be useful in special circumstances. See Vue's documentation for details.

Methods

focus()

AisInlineEditor exposes a focus() method to programmatically focus the button element. The method can be invoked through a template ref specified on an AisInlineEditor component.

<script setup>
import {ref} from 'vue'
import { AisInlineEditor } from '@ais-public/ais-components'
import { AisButtonBar } from '@ais-public/ais-components'
import { AisButton } from '@ais-public/ais-components'
import { AisBox } from '@ais-public/ais-components'
const content = ref('')
const editor = ref(null)
const altFocus = () => editor.value.focus()
</script>

<template>
  <AisBox class="grid gap-4">
    <AisInlineEditor
        ref="editor"
        v-model="content"
        placeholder="Click button to focus"
        class="grow basis-1"
    />

    <AisButtonBar>
      <AisButton
        variant="primary"
        @click="editor.focus()"
      >
        Template Focus
      </AisButton>
      <AisButton
          variant="secondary"
          @click="altFocus"
      >
        Code Focus
      </AisButton>
    </AisButtonBar>
  </AisBox>
</template>

Pasting

AisInlineEditor holds a single block of inline content, so pasted material is flattened to fit. Multi-paragraph content — paragraphs, headings, list items, table cells — is joined into one continuous line with a single space at each block boundary. Inline formatting the editor supports (bold, italic, strikethrough, subscript, superscript, and safe links) is preserved, including formatting that sources like Google Docs express as inline styles. Everything else — styling, attributes, blank lines, and line breaks — is removed. Lists pasted from desktop Word flatten the same way, without their literal bullet or number prefixes, since those are markup rather than text.

Note: as of the fix for issue #599, this cleanup runs on every paste. Earlier releases inserted pasted content unprocessed, which could merge paragraphs together without separators; if your application depended on the raw pasted markup, that behavior has changed.