More advanced image manipulation

[brendon]

Hi @KonnorRogers,

I was just wondering what your plans were for more advanced image manipulation in rhino-editor? I know tiptap itself seems currently very limited in this regard. Seems strange as it's probably one of the most common things an editor would do. Just basic stuff like aligning inline images (I see inline images are now a thing at least). Setting ALT text, linking, etc...

I'm using Froala in another area of my application and I'm keen to ditch it eventually as it's incredibly expensive and under-maintained.

[KonnorRogers]

I do have plans to have it in the editor, I'm not sure if it'll live in the base editor, or live as documentation on how to add it.

[brendon]

Thanks Konnor, that sounds good to me either way :)

[KonnorRogers]

There is also a very real reality where there could be rhino-editor-pro which would include a gem to include the appropriate ActionText configurations for more advanced features like table-editing, advanced image manipulation, included in the editor.

These features are very hard and do take a long time to build.

I'm currently working through features and price, but I do plan to use the pro editor as a way to build out documentation for pieces of the free editor even if not directly included.

[brendon]

Sounds like a good plan :)

[KonnorRogers]

@brendon if you have any features from Froala you'd like to see feel free to let me know!

[brendon]

Good idea, here's a quick list for posterity (I'm just putting them all knowing that many are already implemented). I've just sat at the editor and gone through all the functions that I've enabled. There are some more but I've not needed them. Also, no expectations at all regarding implementing any of them! :D

• Google Fonts (I had to make a custom module for this).
• Clear Formatting (not sure if this is necessary outside of content editable)
• The usual text features, many of which exist anyway (bold, italic, underline, font, size, strikethrough, sub and super script, colour, background colour)
• Custom inline style classes (for things like preset text shadow or whatever we decide to allow).
• Text alignment (left, centre, right, justified)
• Heading levels + normal (reset) and code (pre)
• Ordered and unordered lists lists
• Paragraph styles (Uppercase, Lowercase, Capitalise, Small Caps)
• Line Height
• Indent and Outdent (block quote)
• Quote blocks (styled)
• Link insertion (with target="_blank" option)
• Image Insertion via upload or just URL
• Video insertion via URL (YouTube, Vimeo or hosted mp4), uploaded file, or embed code (e.g. from YouTube) - Autoplay option.
• File upload (would display as a styled link
• Table insertion and editing
• Emoticons
• Icons (font awesome?)
• Symbols
• Horizontal Rule
• Potentially a Code View (not sure if that's a thing in tiptap)

Image tools:

• Image caption
• Alignment (block, inline-block?, or inline (floated))
• Alt-text
• Dimension adjustment (handles and/or input fields with optional ratio keeping)
• Custom style classes (e.g. for applying specific effects)
• They also provide a way to call out to Tui Image Editor (which seems abandoned unfortunately) for inline editing of images in the browser.

Video tools:

• Alignment (block, inline-block?, or inline (floated))
• Dimension adjustment (handles and/or input fields with ratio keeping)

Table tools:

• Table Header
• Insert row above/below & delete row
• Insert column before/after & delete column
• Table style (classes)
• Merge and split cells
• Cell background colour
• Cell vertical alignment
• Cell horizontal alignment

[brendon]

Hi @KonnorRogers, I hope you're doing well :)

Just wondered if you'd seen this tip-tap plugin for image resizing? https://github.com/bae-sh/tiptap-extension-resize-image

It occurs to me that others will probably start creating things like this to fill in the functionality gaps, so it might be easier to pull functions in that way?

[KonnorRogers]

I had not seen this until now. It seems pretty easy to replicate. It does highlight a bigger problem of the Attachment extension may need some extra hooks to make it more easily extensible.