twill icon indicating copy to clipboard operation
twill copied to clipboard

Published 20 hours ago • verified publisher icon area17

Add "link" function to TipTap Wysiwyg editor

Open johnwedgbury opened this issue 2 years ago • 3 comments

Description

This PR enables the hyperlink feature in the TipTap WYSIWYG editor. This is currently incomplete and disabled, and the only workaround being to copy pre-formatted text from another editor like Word.

New icon has been added in the header will launch a modal to accept a link URL and the option of opening in a new page.

Screenshot 2022-07-13 at 16 18 10

This is a basic implementation but I think an essential feature for people using TipTap.

Related Issues

Related posts reporting this issue: https://spectrum.chat/twill/help/tiptap-wysiwyg~6adf54cf-be29-412a-b115-20fe34adf977 https://spectrum.chat/twill/feature-requests/need-hyperlinking-in-tiptap-editor~723d4cdc-9566-4055-99e7-e0409baa194e

johnwedgbury avatar Jul 13 '22 15:07 johnwedgbury

CLA assistant check
All committers have signed the CLA.

CLAassistant avatar Jul 13 '22 15:07 CLAassistant

Hey @johnwedgbury ,

Thanks for your contribution!

A few things:

  • Styling is not consistent with the rest of the ui. We need to adjust the button to match with other buttons.
  • We should make the strings translatable.
  • The input label should use a label attribute.
  • I cannot seem to "tab" to go to other elements in the popup.

I had to push a small fix because the frontend would not compile.

haringsrob avatar Jul 19 '22 09:07 haringsrob

Hi @haringsrob ,

Thanks for your feedback, I have addressed those points.

Please let me know if there is anything further

johnwedgbury avatar Jul 25 '22 09:07 johnwedgbury

@haringsrob sorry to nudge. Would you be able to review this if you get chance please?

johnwedgbury avatar Oct 13 '22 16:10 johnwedgbury

Hey @johnwedgbury, we are doing a final design check then we can merge this.

haringsrob avatar Oct 14 '22 11:10 haringsrob

Hi @johnwedgbury i am currently adding some style enhancements to your link modal, after discussing with the twill design team one request from the design/UX team is for the modal to display the current focused text - with the ability to update the text value in that modal. i have attached an image of the desired modal - Screen Shot 2022-11-15 at 3 37 10 PM

let me know if that is possible or if i can clarify anything for you :)

kylegoines avatar Nov 15 '22 20:11 kylegoines

Thanks again all for the help, this work is ported to 3.x

https://github.com/area17/twill/pull/2080

haringsrob avatar Jan 21 '23 07:01 haringsrob