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.

Sign up for GitHub

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

Jump to bottom

feat(rich-text-editor): DLT-2244 add ability inherit image properties in editor #604

Merged
merged 6 commits into from
Dec 30, 2024
Merged

feat(rich-text-editor): DLT-2244 add ability inherit image properties in editor #604

merged 6 commits into from
Dec 30, 2024

Conversation

emariotti3
Copy link
Contributor

@emariotti3 emariotti3 commented Dec 27, 2024 •
edited
Loading

feat(rich-text-editor): DLT-2244 add ability inherit image properties in editor

Obligatory GIF (super important!)

Obligatory gif

🛠️ Type Of Change

These types will increment the version number on release:

  • Fix
  • Feature
  • Performance Improvement
  • Refactor

📖 Jira Ticket

DLT-2244

📖 Description

Tip tap seems to strip the width from inserted images, so we need to add support adjusting image sizing. We found this useful thread here showing how to get the tiptap image extension to inherit the attributes from the img html tag.

💡 Context

This is mainly to be able to use it in email reply quotes and perhaps we could use it as well to add the ability to insert inline attachments/images. See short video here showing the problem.

📝 Checklist

For all PRs:

  • I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
  • I have reviewed my changes.
  • I have added all relevant documentation.
  • I have considered the performance impact of my change.

For all Vue changes:

  • I have added / updated unit tests.
  • I have made my changes in Vue 2 and Vue 3. Note: you may sync your changes from Vue 2 to Vue 3 (or vice versa) using the ./scripts/dialtone-vue-sync.sh script. Read docs here: Dialtone Vue Sync Script
  • I have validated components with a screen reader.
  • I have validated components keyboard navigation.

📷 Screenshots / GIFs

DLT-2244-add-ability-resize-images-editor DLT-2244-add-ability-resize-images-editor-2

🔗 Sources

Adding the link for the tip-tap issue referenced for this change

@emariotti3 emariotti3 changed the title DLT-2244: add ability inherit image properties in editor feat(rich-text-editor): DLT-2244 add ability inherit image properties in editor Dec 27, 2024
@juliodialpad
Copy link
Collaborator

Hi @emariotti-dialpad Please let me know how to properly test this, I tried just copy pasting an image into the editor and it's just pasting a giant icon.

Screenshot 2024-12-27 at 12 33 11 p m

juliodialpad
juliodialpad requested changes Dec 27, 2024
View reviewed changes
Copy link
Collaborator

@juliodialpad juliodialpad left a comment

Choose a reason for hiding this comment

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

The value is not being updated properly on Vue 3, please check that Vue 2 and Vue 3 versions are working properly on storybook.

packages/dialtone-vue3/components/rich_text_editor/rich_text_editor_default.story.vue Outdated Show resolved Hide resolved
packages/dialtone-vue3/recipes/conversation_view/editor/editor.vue Outdated Show resolved Hide resolved
packages/dialtone-vue3/recipes/conversation_view/editor/editor_default.story.vue Outdated Show resolved Hide resolved
packages/dialtone-vue3/recipes/conversation_view/editor/editor_default.story.vue Show resolved Hide resolved
@emariotti3
Copy link
Contributor Author

@juliodialpad I run it locally and set the image tag in the value string in the argsData parameter here packages/dialtone-vue3/recipes/conversation_view/editor/editor.stories.js

Screenshot 2024-12-27 at 5 24 04 PM

juliodialpad
juliodialpad approved these changes Dec 30, 2024
View reviewed changes
Copy link
Collaborator

@juliodialpad juliodialpad left a comment

Choose a reason for hiding this comment

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

Thanks! working correctly now

@github-actions GitHub Actions
Copy link

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

@github-actions GitHub Actions
Copy link

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-604/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-604/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-604/

@emariotti3 emariotti3 merged commit eb65dea into staging Dec 30, 2024
10 checks passed
@emariotti3 emariotti3 deleted the DLT-2244-add-ability-resize-images-editor branch December 30, 2024 19:12
braddialpad pushed a commit that referenced this pull request Jan 10, 2025
@semantic-release-bot
chore(release): NO-JIRA dialtone/v9.93.0
cd144b6 
# [9.93.0](dialtone/v9.92.0...dialtone/v9.93.0) (2024-12-31)

### Code Refactoring

* DLT-2123 remove utility classes from recipes ([#603](#603)) ([11717a4](11717a4))

### Features

* **Rich Text Editor:** DLT-2244 add ability inherit image properties in editor ([#604](#604)) ([eb65dea](eb65dea))
braddialpad pushed a commit that referenced this pull request Jan 10, 2025
@semantic-release-bot
chore(release): NO-JIRA dialtone-vue2/v2.171.0
387413a 
# [2.171.0](dialtone-vue2/v2.170.0...dialtone-vue2/v2.171.0) (2024-12-31)

### Code Refactoring

* DLT-2123 remove utility classes from recipes ([#603](#603)) ([11717a4](11717a4))

### Features

* **Rich Text Editor:** DLT-2244 add ability inherit image properties in editor ([#604](#604)) ([eb65dea](eb65dea))
braddialpad pushed a commit that referenced this pull request Jan 10, 2025
@semantic-release-bot
chore(release): NO-JIRA dialtone-vue3/v3.164.0
cb45926 
# [3.164.0](dialtone-vue3/v3.163.0...dialtone-vue3/v3.164.0) (2024-12-31)

### Code Refactoring

* DLT-2123 remove utility classes from recipes ([#603](#603)) ([11717a4](11717a4))

### Features

* **Rich Text Editor:** DLT-2244 add ability inherit image properties in editor ([#604](#604)) ([eb65dea](eb65dea))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@juliodialpad juliodialpad juliodialpad approved these changes

@iropolo iropolo Awaiting requested review from iropolo iropolo is a code owner

@francisrupert francisrupert Awaiting requested review from francisrupert francisrupert is a code owner

@braddialpad braddialpad Awaiting requested review from braddialpad braddialpad is a code owner

@ninamarina ninamarina Awaiting requested review from ninamarina ninamarina is a code owner

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@emariotti3 @juliodialpad @emariotti-dialpad