Tailwind CSS Text Editors Blocks

Text Editors

Text editors with rich toolbars, card layouts, and inline formatting controls for long-form content.

Rich Text Editor Card Pro

Card-style editor places a full formatting toolbar above a bordered long-form text field.

Create a responsive UI block named "Rich Text Editor Card" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/text-editors/#rich-text-editor-card. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: forms/text-editors
- Block ID: rich-text-editor-card
- Source description: Card-style editor places a full formatting toolbar above a bordered long-form text field.
- Preview iframe: https://preline.co/blocks/forms/text-editors/iframes/pro/rich-text-editor-card.html (repo path: blocks/forms/text-editors/iframes/pro/rich-text-editor-card.html)
- Source markup reference:
  - partials/pro/cms-admin/forms/text-editor.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
  - Above the editor sits one label reading exactly `Description`, styled `block mb-2 font-medium text-sm`.
  - The toolbar is at the TOP and lives in its own bar: `p-1 bg-layer border border-layer-line rounded-lg` wrapping a `flex items-center gap-x-0.5` row; the editable field `<div class="overflow-auto" data-hs-editor-field></div>` sits BELOW and outside that bar, with no border of its own.
  - Exactly 9 formatting buttons, all `size-8 rounded-md` ghost buttons with `size-4` outline icons, in this order and with these exact hooks: `data-hs-editor-bold`, `data-hs-editor-italic`, `data-hs-editor-underline`, `data-hs-editor-strike`, `data-hs-editor-link`, `data-hs-editor-ol`, `data-hs-editor-ul`, `data-hs-editor-blockquote`, `data-hs-editor-code`.
  - There is no submit/Post button, no helper or privacy note, no character counter, and no card border around the whole editor - the block is label + toolbar bar + editing surface only.
  - The editor is TipTap v2.11 loaded as ES modules (`@tiptap/core` Editor plus StarterKit with `history: false`, Placeholder, Paragraph, Bold, Underline, Link, BulletList, OrderedList, ListItem, Blockquote), mounted on `#hs-editor-tiptap [data-hs-editor-field]`.
  - The editable area gets `relative min-h-40 p-3 focus-visible:outline-0` and starts empty, showing the placeholder `Add a message, if you'd like.`; the link button opens a native `window.prompt('URL')`.
  - The preview centers the whole block in `w-full max-w-sm mx-auto`, so the toolbar's 9 buttons fill the bar edge to edge at that width.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div>
                      <label class="block mb-2 font-medium text-sm text-foreground">
                        Description
                      </label>

<div id="hs-editor-tiptap">
                        <div class="p-1 bg-layer border border-layer-line rounded-lg">
                          <div class="flex items-center gap-x-0.5">
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-bold>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 12a4 4 0 0 0 0-8H6v8"/><path d="M15 20a4 4 0 0 0 0-8H6v8Z"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-italic>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-underline>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-strike>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-link>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-ol>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" x2="21" y1="6" y2="6"/><line x1="10" x2="21" y1="12" y2="12"/><line x1="10" x2="21" y1="18" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-ul>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-blockquote>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6H3"/><path d="M21 12H8"/><path d="M21 18H8"/><path d="M3 12v6"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-code>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
                            </button>
                          </div>
                        </div>

const ids = '#hs-editor-tiptap';
  const editors = ids.split(' ');

editors.forEach((id) => {
    const editor = new Editor({
      element: document.querySelector(`${id} [data-hs-editor-field]`),
      editorProps: {
        attributes: {
          class: 'relative min-h-40 p-3 focus-visible:outline-0'
        }
      },
      extensions: [
        StarterKit.configure({
          history: false
        }),
        Placeholder.configure({
          placeholder: 'Add a message, if you\'d like.',
          emptyNodeClass: 'before:text-muted-foreground'
        }),
        Paragraph.configure({
          HTMLAttributes: {
            class: 'text-sm text-foreground'
          }
        }),
        Bold.configure({
          HTMLAttributes: {
            class: 'font-bold'
          }
        }),
        Underline,
        Link.configure({
          HTMLAttributes: {
            class: 'inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium'
          }
        }),
        BulletList.configure({
          HTMLAttributes: {
            class: 'list-disc list-inside text-foreground'
          }
        }),
        OrderedList.configure({
          HTMLAttributes: {
            class: 'list-decimal list-inside text-foreground'
          }
        }),
        ListItem.configure({
          HTMLAttributes: {
            class: 'marker:text-sm'
          }
        }),
        Blockquote.configure({
          HTMLAttributes: {
            class: 'relative border-s-4 ps-4 sm:ps-6 line-2 sm:[&>p]:text-lg text-foreground'
          }
        })
      ]
    });
    const actions = [
      {
        id: `${id} [data-hs-editor-bold]`,
        fn: () => editor.chain().focus().toggleBold().run()
      },
      {
        id: `${id} [data-hs-editor-italic]`,
        fn: () => editor.chain().focus().toggleItalic().run()
      },
      {
        id: `${id} [data-hs-editor-underline]`,
        fn: () => editor.chain().focus().toggleUnderline().run()
      },
      {
        id: `${id} [data-hs-editor-strike]`,
        fn: () => editor.chain().focus().toggleStrike().run()
      },
      {
        id: `${id} [data-hs-editor-link]`,
        fn: () => {
          const url = window.prompt('URL');
          editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
        }
      },
      {
        id: `${id} [data-hs-editor-ol]`,
        fn: () => editor.chain().focus().toggleOrderedList().run()
      },
      {
        id: `${id} [data-hs-editor-ul]`,
        fn: () => editor.chain().focus().toggleBulletList().run()
      },
      {
        id: `${id} [data-hs-editor-blockquote]`,
        fn: () => editor.chain().focus().toggleBlockquote().run()
      },
      {
        id: `${id} [data-hs-editor-code]`,
        fn: () => editor.chain().focus().toggleCode().run()
      }
    ];

actions.forEach(({ id, fn }) => {
      const action = document.querySelector(id);

if (action === null) return;

action.addEventListener('click', fn);
    });
  });
</script>

Open related add product template

Bordered editor card keeps formatting controls below the content field beside a post action.

Create a responsive UI block named "Rich Text Editor Card with Bottom Toolbar" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/text-editors/#rich-text-editor-card-with-bottom-toolbar. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/text-editors
- Block ID: rich-text-editor-card-with-bottom-toolbar
- Source description: Bordered editor card keeps formatting controls below the content field beside a post action.
- Preview iframe: https://preline.co/blocks/forms/text-editors/iframes/pro/rich-text-editor-card-with-bottom-toolbar.html (repo path: blocks/forms/text-editors/iframes/pro/rich-text-editor-card-with-bottom-toolbar.html)
- Source markup reference:
  - partials/pro/ecommerce-admin/layouts-components/card-style-textarea-input-with-tools-on-bottom.html
  - partials/pro/css/third-party/tiptap.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
  - A single card `bg-card border border-card-line rounded-xl overflow-hidden` wraps a `<div id="hs-editor-tiptap">` containing an empty `<div data-hs-editor-field></div>` above the toolbar - the editing surface comes first and the toolbar last.
  - The toolbar is `p-2 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 sm:gap-3 border-t border-line-2`: formatting buttons wrap on mobile and sit opposite the submit button from `sm` up.
  - Exactly 9 formatting buttons, all `size-8 rounded-md` ghost buttons with `size-4` outline icons, in this order and with these exact hooks: `data-hs-editor-bold`, `data-hs-editor-italic`, `data-hs-editor-underline`, `data-hs-editor-strike`, `data-hs-editor-link`, `data-hs-editor-ol`, `data-hs-editor-ul`, `data-hs-editor-blockquote`, `data-hs-editor-code`.
  - The right side of the toolbar holds one primary button reading exactly `Post` (`py-1.5 px-3 text-sm font-medium rounded-md bg-primary`).
  - Below the card, right-aligned, is a `text-xs` muted line with a `size-3` info-circle icon reading `Only you and other staff can see comments`.
  - The editor is TipTap v2.11 loaded as ES modules (`@tiptap/core` Editor plus StarterKit with `history: false`, Placeholder, Paragraph, Bold, Underline, Link, BulletList, OrderedList, ListItem, Blockquote). The editable area gets `relative min-h-40 p-3 focus-visible:outline-0`, so the card is at least ~10rem tall when empty.
  - The placeholder shown in the empty editor is exactly `Add a message, if you'd like.`, and the link button opens a native `window.prompt('URL')` before applying the link.
  - A small TipTap CSS shim ships with the block: `.ProseMirror:focus { outline: none }`, `display: inline` for `p` inside `ul`/`ol`, and the `p.is-editor-empty:first-child::before` rule that renders `data-placeholder`.

<div class="bg-card border border-card-line rounded-xl overflow-hidden">
                      <div id="hs-editor-tiptap">
                        <div data-hs-editor-field></div>

<div class="p-2 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 sm:gap-3 border-t border-line-2">
                          <div class="flex flex-wrap align-middle gap-0.5">
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-bold>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 12a4 4 0 0 0 0-8H6v8"/><path d="M15 20a4 4 0 0 0 0-8H6v8Z"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-italic>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-underline>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-strike>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-link>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-ol>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" x2="21" y1="6" y2="6"/><line x1="10" x2="21" y1="12" y2="12"/><line x1="10" x2="21" y1="18" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-ul>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-blockquote>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6H3"/><path d="M21 12H8"/><path d="M21 18H8"/><path d="M3 12v6"/></svg>
                            </button>
                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-code>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
                            </button>
                          </div>

<div class="mt-1.5 flex justify-end">
                      <p class="inline-flex gap-x-1 text-xs text-muted-foreground-1">
                        <svg class="shrink-0 size-3 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
                        Only you and other staff can see comments
                      </p>
                    </div>

const ids = '#hs-editor-tiptap';
  const editors = ids.split(' ');

actions.forEach(({ id, fn }) => {
      const action = document.querySelector(id);

if (action === null) return;

action.addEventListener('click', fn);
    });
  });
</script>

Open related order details template

Gray textarea pairs a compact toolbar row with an inline editing surface for plain rich-text input.

Create a responsive UI block named "Gray Toolbar Textarea" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/text-editors/#gray-toolbar-textarea. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/text-editors
- Block ID: gray-toolbar-textarea
- Source description: Gray textarea pairs a compact toolbar row with an inline editing surface for plain rich-text input.
- Preview iframe: https://preline.co/blocks/forms/text-editors/iframes/free/gray-toolbar-textarea.html (repo path: blocks/forms/text-editors/iframes/free/gray-toolbar-textarea.html)
- Source markup reference:
  - partials/blocks/sources/pages/ti-gray-with-toolbar.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
  - One `relative` wrapper holding a single `<textarea>` plus a toolbar overlaid on the textarea's own bottom padding - there is no card, no label, and no surrounding form.
  - The textarea placeholder is exactly `Ask me anything...` and the field is empty on first load. Its classes are `p-3 sm:p-4 pb-12 sm:pb-12 block w-full bg-surface border-surface-line rounded-lg sm:text-sm`, where the oversized bottom padding reserves room for the toolbar.
  - The toolbar is `absolute bottom-px inset-x-px p-2 rounded-b-lg bg-surface` and lays out as `flex flex-wrap justify-between items-center gap-2`.
  - Exactly 4 buttons in two groups: the left group has a square/stop-style icon then a paperclip; the right group has a microphone then the send button.
  - Every button is `size-8 rounded-lg`; only the send button is filled (`bg-primary border border-primary-line text-primary-foreground`) and its icon is a `size-3.5` filled paper plane on a 16 viewBox - the other three are muted ghost buttons with 24-viewBox outline icons.
  - There is no formatting toolbar, no character counter, no attachment list, no send-on-enter hint, and no label above the field - this is a plain textarea, not a rich-text editor.
  - Fully static; no Preline JS plugin, no TipTap, and no auto-resize behavior. The preview centers it in `w-full max-w-3xl mx-auto`.

<div class="relative">
  <textarea class="p-3 sm:p-4 pb-12 sm:pb-12 block w-full bg-surface border-surface-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Ask me anything..."></textarea>

<div class="absolute bottom-px inset-x-px p-2 rounded-b-lg bg-surface">
    <div class="flex flex-wrap justify-between items-center gap-2">
      
      <div class="flex items-center">
        
        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-lg text-muted-foreground-1 hover:bg-surface-hover focus:z-10 focus:outline-hidden focus:bg-surface-focus">
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><line x1="9" x2="15" y1="15" y2="9"/></svg>
        </button>

<button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-lg text-muted-foreground-1 hover:bg-surface-hover focus:z-10 focus:outline-hidden focus:bg-surface-focus">
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
        </button>
        
      </div>

<div class="flex items-center gap-x-1">
        
        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-lg text-muted-foreground-1 hover:bg-surface-hover focus:z-10 focus:outline-hidden focus:bg-surface-focus">
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
        </button>

<button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:z-10 focus:outline-hidden focus:bg-primary-focus">
          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z"/>
          </svg>
        </button>
        
      </div>
      
    </div>
  </div>
  
</div>

Text Editors

Rich Text Editor Card Pro

Rich Text Editor Card with Bottom Toolbar Pro

Gray Toolbar Textarea Free