Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inline link formatting #126

Merged
merged 12 commits into from
Aug 23, 2024
Merged

Inline link formatting #126

merged 12 commits into from
Aug 23, 2024

Conversation

MAX-786
Copy link
Member

@MAX-786 MAX-786 commented Aug 16, 2024

Fixes #35

This PR should :

  • convert selected text node (only) into link with typed in url (no object browser support needed) and synchronize admniUi
  • convert multiple selected nodes (selection might contain non-text nodes like <b>, <em> etc.) into link
  • clicking on folder icon on the left side on input field should open up sidebar to choose the link
  • UI should match quanta (as much as possible)

Toolbar fix

This PR also includes some fixes for the below edge cases:
The toolbar is added before the frontend re-renders, causing it to disappear. The solution is to add the toolbar after the re-render using a timeout, but this introduces a slight visual delay

what is happening is that

  • after clicking on a block 'selectBlock' is called and then this do all the other stuff, then it adds nodeIds in the json data (if text block with richtext enable) and then
  • it sends this to both adminUI (parent) and also itself (window) and as you can see in the code we got onEditChange which takes a callback as an args and calls this callback with updated data when the message of type 'FORM_DATA' is triggered and so
  • f7 frontend is then gets the updated data but before that data will re-render the blocks, our 'selectBlock' calls the 'creatQuantaToolbar' method and adds the toolbar but then html is re-rendered by this framework and it removes this toolbar added by hydrajs

so what we can do is that we add toolbar only when the data is sent to the frontend and we are sure that the html is re-rendered and then after this we add the toolbar so now it will not get removed, i did this by setting a 0 timeout so adding toolbar goes to another cycle but this adds up a visual delay of toolbar appearing

@MAX-786 MAX-786 self-assigned this Aug 16, 2024
@MAX-786 MAX-786 marked this pull request as ready for review August 23, 2024 02:19
<RichText v-for="child in subs" :key="child.nodeId" :node="child" />
</f7-link>
</template>
<span v-else-if="!node.type" :data-node-id="node.nodeId">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do think it's not needed to force wrapping text in a span and give it a node-id. I think there is enough information conveyed to hydra to work out where the cursor is without having to force more ugly markup.
But this can be looked at later. it's fine for now.

@djay djay merged commit bba3988 into main Aug 23, 2024
1 check passed
@djay djay deleted the inline-link-formatting branch August 23, 2024 08:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

I can I can select text inline editing and turn it into a link (or edit/remove existing link)
3 participants