Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Composer and signature editor: images can't be placed side by side (every inserted image becomes a block)

Open Beginner friendly
  • Is something wrong?
#13,903 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript
Domain
design, frontend

Research direction

Start in src/components/TextEditor.vue and review the existing CKEditor image configuration, along with the inline and block image style options described in the issue. Check that images inserted within text can remain inline and existing block images can be switched to inline. Done when the toolbar supports inline images and the reported side by side signature layout works.

Written by the indexing model from the issue text.

Description

1. to develop enhancement
Is your feature request related to a problem? Please describe.

Many company signatures have a row of logos or social icons, e.g. three brand logos next to each other. In the signature editor (and the composer) this layout can't be built with the toolbar.

Every image inserted with Insert image, Upload from computer or Insert image from Files becomes a block image (<figure class="image">) on its own line, so the logos stack vertically. This happens even when the cursor is inside a line of text: the paragraph is split and the image goes between the halves. The image toolbar only offers block alignment (alignBlockLeft / alignCenter / alignBlockRight, added for #11131 / #9350), so a block image can't be turned into an inline one either.

The editor does support inline images. Image loads ImageInline, and an <img> inside a <p> pasted through Source stays inline and side by side. The sent message keeps that layout too. Users just can't get there from the UI. We had to give our staff a ready-made HTML signature to paste in source mode, which is too technical for most users.

Steps to reproduce:

  1. Account settings → Writing mode: Rich text.
  2. In Signature, insert three images one after another (or put the cursor after some text and insert an image).
  3. Each image ends up on its own line, in the editor and in sent messages.
Describe the solution you'd like

Two small CKEditor config changes in src/components/TextEditor.vue:

image: {
    insert: { type: 'auto' },  // inline when inserted inside text, block on an empty line
    styles: {
        options: ['inline', 'alignBlockLeft', 'alignCenter', 'alignBlockRight'],
    },
    toolbar: [
        'imageStyle:inline',   // "In line" toggle for an existing image
        'imageStyle:alignBlockLeft',
        'imageStyle:alignCenter',
        'imageStyle:alignBlockRight',
    ],
},

We checked this in a standalone CKEditor 47.6.2 with the same plugins and htmlSupport as Mail. With insert.type: 'auto', images inserted after text in a paragraph become inline images in that paragraph. imageStyle: 'inline' converts an existing block image to inline. ImageDowncastPlugin already handles inline images (it mirrors the resized width onto <img width>).

Describe alternatives you've considered
  • Pasting HTML through Source. This works, but it isn't realistic for non-technical users, and inserted images are long base64 strings that are hard to move around in source mode.
  • Tables. table/td are allowed by htmlSupport, but without the Table plugin they can't be created from the UI, and images inserted into cells lose their links.
  • Combining the logos into one image. Each logo can then no longer link to its own site.
Additional context

Mail with CKEditor ~47.6.2 (main as of October 2026), Nextcloud 34. Reported by a user of a medical clinic who was moving their Gmail signature with three brand logos and social icons in a row.

Dominant language
JavaScript
Stars
1k
Forks
369
Avg merge
1d 19h
Merged PRs (30d)
111

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from nextcloud/mail

All issues in nextcloud/mail

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.