question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom format font-family has double double quotes on getFormat

See original GitHub issue

Hi,

There is a formatting issue with quill.getFormat(quill.selection.savedRange)

If you declare a custom font-family, the format retrieve by the getFormat method as describe before is surrounded by 2 double quotes, like this : Capture d’écran 2019-12-06 à 15 48 41

I could modify it with a .replace(/"/g, '') to use it manually, but, the ql-picker are broken because I don’t have the hand on it, it takes a select and replace it by is own cooked version using the format object to handle the “selected” item.

Here is my custom font-family declaration if needed :

const Parchment = Quill.import('parchment')

const getConf = (scopeName: string, whitelistValue: string[]): any => {
  return {
    scope: Parchment.Scope[scopeName],
    whitelist: whitelistValue
  }
}

const customFontFamily = new Parchment.Attributor.Style(
  'customFontFamily', 'font-family', getConf('INLINE', availableFonts)
)

Quill.register(customFontFamily, true)

Notes :

  • All my other custom formats works fine I’ve got lineHeightStyle, letterSpacingStyle, colorStyle, bottomSpaceStyle, customSize, textAlignStyle

  • I’ve tried different way to format the inline style On the default content loaded to the editor I’ve tried to declare the font-family with simple quotes or without any quotes.

  • availableFonts My availableFonts variable is an array of strings declared with single quoted string like

export const availableFonts = [
  'Memimas-Bold',
  'Neutraface Display Bold',
  'MrsEavesRoman',
  'GeosansLight',
  'Neutraface Display Medium',
  'TriplexSansLight',
  'MrsEavesBold',
  'Caviar Dreams',
  'Amandine',
  'Annabel Script',
  'Comiquita Sans',
 ...
]
  • I did research on issues By searching in issues I found some topics a bit similar (but not precisely related to this case) so it could be a know issue actually.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
oleghindcommented, Dec 11, 2019

there are actually many issues with font names: font families got wiped out, font names with digits don’t apply etc. Those parts of the code need more improvements

0reactions
Yexancommented, Dec 10, 2019
Read more comments on GitHub >

github_iconTop Results From Across the Web

Sass font family add double quote to format. And I don't need it
I have a problem. I have this stylesheet source @font-face { font-family: 'proxima-nova'; ...
Read more >
Using double quotes in custom number format - Chandoo.org
I am trying to append a double quote to a number to denote a measure of inches in the custom number format. I...
Read more >
Show FORMULA or FORMAT of another cell
Describes how to display the formula and formatting used in another cell. Using and changing number formats. Particularly useful for debugging and for ......
Read more >
lightning-input-rich-text - documentation - Salesforce Developers
A WYSIWYG editor with a customizable toolbar for entering rich text ... The lightning-formatted-rich-text component is used to display the formatted output.
Read more >
font-family-name-quotes - Stylelint
This rule checks the font and font-family properties. This rule ignores $sass , @less , and var(--custom-property) variable syntaxes.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found