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

Font family not getting changed correctly, when content is copied from a google doc #4629

Open
6 tasks done
chamidu-supeshala opened this issue Mar 26, 2024 · 9 comments
Open
6 tasks done

Comments

@chamidu-supeshala
Copy link

Checklist

  • I've looked at the documentation to make sure the behavior isn't documented and expected.
  • I'm sure this is an issue with Summernote, not with my app or other dependencies (Angular, Cordova, React, etc.).
  • I've searched through the current issues to make sure this hasn't been reported yet.
  • My issue is pertinent to this repository of Summernote (jQuery), or I was unable to have my issue resolved from the relevant version I'm using, such as Angular, dJango, Rails or React. Please try your issue at the relevent repository first.
  • I understand that issues without interaction for more than 14 days (2 weeks), may be closed at our discretion. We do this, as sometimes issues are abandoned. We may at our discretion, add issues to the relevant project to be looked at, or for maintainers to work through as time permits. This is to help keep issues relevant to the current version of Summernote, and to reduce clutter.
  • I agree to follow the Code of Conduct that this project adheres to.

Steps to reproduce

  1. Copy paste some content from Google Doc into summer note.
  2. Select all lines
  3. Change font family
  4. The new font is applied only to the first line

Expected behavior

The new font should be applied to all the selected text

Current behavior

The new font will be applied only to first line

Minimal example reproducing the issue

No response

Environment

  • Summernote version: latest
  • Browser (with version): Chrome latest
  • OS/Platform (with version): Windows/mac
@DennisSuitters
Copy link
Member

Unless the particular font that is used in Google's, or even another Word type document is referenced within the styling of the web page document, then it won't be used. This, essentially, is not a Summernote issue. Please keep in mind that each Browser on each Operating System only has access and uses specific Fonts, and using other Fonts that are not classified as "Web Safe", need to be referenced, or they won't show up within the rendering of web page document.

@chamidu-supeshala
Copy link
Author

chamidu-supeshala commented Mar 26, 2024

This is an example content from google doc (in CODE VIEW):

<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:12pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Hope you're doing well. </span></p><p><span style="background-color: transparent; color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 12pt; white-space-collapse: preserve;"><br></span></p><p><span style="background-color: transparent; color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 12pt; white-space-collapse: preserve;">test.&nbsp;</span><br></p>

image

After change the font family, the result is like this:

image

This basically looks like a selection issue in Summernote. I selected all text from 'end most character' to 'start character'.
After applying font, the selection automatically changed to first line, and font is applied only into first line..

If you want to reproduce, please copy paste above content in 'code' mode, and switch back to 'non code' mode.. then select two line from bottom to top.. change the font family to something else..

@1der1
Copy link

1der1 commented Mar 26, 2024

@chamidu-supeshala, you are right. The code is legal, and SN doesn't work as intended.

We branched out of SN years ago. I check every new SN issue in our version. We don't have this issue.

@DennisSuitters
Copy link
Member

@chamidu-supeshala it may be possible that the Summernote styling for inside the editing area is overriding the inline styling as it most likely uses the !important declaration to enforce styling, I'm not sure and can't look right at this moment.
How does the pasted content appear without Summernote, after it's been modified? You could try using the summernote-cleaner plugin, though I think it strips out the font styling.

@1der1
Copy link

1der1 commented Mar 27, 2024

The result of changing the whole content to Arial Black:
<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-family: &quot;Arial Black&quot;;"></span><span style="font-size: 12pt; font-family: &quot;Arial Black&quot;; color: rgb(0, 0, 0); background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Hope you're doing well. </span></p><p><span style="background-color: transparent; color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 12pt; white-space-collapse: preserve;"><br></span></p><p><span style="background-color: transparent; color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: 12pt; white-space-collapse: preserve;">test.&nbsp;</span><br></p>

The same in 1der1:
<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size: 12pt; color: rgb(0, 0, 0); background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; font-family: &quot;Arial Black&quot;;">Hope you're doing well. </span></p><p><span style="background-color: transparent; color: rgb(0, 0, 0); font-size: 12pt; white-space-collapse: preserve; font-family: &quot;Arial Black&quot;;"><br></span></p><p><span style="background-color: transparent; color: rgb(0, 0, 0); font-size: 12pt; white-space-collapse: preserve; font-family: &quot;Arial Black&quot;;">test.&nbsp;</span><br></p>

@chamidu-supeshala
Copy link
Author

@diemendesign Even after cleaned using clear plugin, the issue is still there.

@1der1 Is your forked version free to use? How can I access it?

@1der1
Copy link

1der1 commented Apr 23, 2024

@chamidu-supeshala, go to https://1der1.com/ and click the "Start" button.
After registration, build your page. Click "Content" in the navigation bar, then the green button for the editor.

1der1 is forever free to use.

You are welcome to try every issue.

@CabralArthur
Copy link

Any update of this issue? i'm having the same trouble when i'm trying to change de font size too.

@chamidu-supeshala
Copy link
Author

UPDATE:
This issue occurs for any copy pasted content. (ex: copied from a web page).

There's an another issue related to bullets and numbering on copy pasted content. I have logged it here:
#4640

@DennisSuitters Highly appreciate if you can have a look into these issues. Thanks!

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

No branches or pull requests

4 participants