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 attribute for delta image insert at position.

See original GitHub issue

Based on

var Parchment = Quill.import('parchment');
var offsetAttributor = new Parchment.Attributor.Attribute('offset', 'data-offset', { 
  scope: Parchment.Scope.INLINE
});
Quill.register(offsetAttributor);

var quill = new Quill('#editor');
quill.setText('Gandalf the Grey');
quill.formatText(0, 7, 'offset', '0');
quill.getContents();  // should have a delta with offset attributed

I’m trying to add a custom attribute for the img something like this

var Parchment = Quill.import('parchment');
var offsetAttributor = new Parchment.Attributor.Attribute('nameClass', 'class', { 
  scope: Parchment.Scope.INLINE
});
Quill.register(offsetAttributor);
    quill.updateContents(
        new Delta()
            .retain(index)
            .insert(
                {
                    image: 'http://loremflickr.com/320/240'
                },
                {
                    width: '350',
                    nameClass: 'else',
                    alt: 'no working',
                    offset: 3,
                }
            ));

but it seems that based on that example i couldn’t figure it out how to add the class.

The rendered code is <p><span class="else"><img src="http://loremflickr.com/320/240" width="350" alt="no working"></span></p>

And i wanted the class else to be on the img 😄 ( New to quill still trying to figure it out how it works)

Issue Analytics

  • State:open
  • Created 6 years ago
  • Comments:13 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
MidaAiZcommented, Apr 14, 2018

What I do to fix it is rewriting the image format. In order to sanitize style preventing from attacks such as XSS Or unexpected style, I also add white list for style. Environment: React-quill

Like this:

import {Quill} from 'react-quill';
const Parchment = Quill.import('parchment');
const BaseImage = Quill.import('formats/image');

const ATTRIBUTES = [
  'alt',
  'height',
  'width',
  'style'
];

const WHITE_STYLE = ['margin', 'display', 'float'];

class Image extends BaseImage {
  static formats(domNode) {
    return ATTRIBUTES.reduce(function(formats, attribute) {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute);
      }
      return formats;
    }, {});
  }
  
  format(name, value) {
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        if (name === 'style') {
          value = this.sanitize_style(value);
        }
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name);
      }
    } else {
      super.format(name, value);
    }
  }

  sanitize_style(style) {
    let style_arr = style.split(";")
    let allow_style = "";
    style_arr.forEach((v, i) => {
      if (WHITE_STYLE.indexOf(v.trim().split(":")[0]) !== -1) {
        allow_style += v + ";"
      }
    })
    return allow_style;
  }
}

export default Image;

0reactions
mdathersajjadcommented, Oct 29, 2021

For me the custom attributes are not passing to format function of blot. I extended the default image blot and it consists of two node image, label to provide caption. I have listed the delta getting stored in db

{
  "ops": [
    { "insert": "My Draft\\nasdf   asf  sdf\\n \\n" },
    {
      "attributes": {
        "alt": "Image",
        "height": "493",
        "width": "739",
        "caption": "Image caption",
        "imagewidth": "",
        "url": ""
      },
      "insert": {
        "image": {
          "src": "https://images.unsplash.com/photo-1579546929662-711aa81148cf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTMxNTJ8MHwxfHNlYXJjaHwyfHxncmFkaWVudHxlbnwwfDB8fHwxNjM1NDg4NTk2&ixlib=rb-1.2.1&q=80&w=1080"
        }
      }
    },
    { "insert": "" }
  ]
}

I extended the image blot and stored necessary attributes which is getting persisted but when the editor is redrawn the value or height and width is passed to format(name, value) but the other attributes alt, caption is not passed. Tried adding this code to see if it works but it doesn’t work

//added this to register the attribute and also tried different scopes too const Caption = new Parchment.Attributor.Attribute(“caption”, “caption”, { scope: Parchment.Scope.ANY }) Quill.register(Caption)

Any help will be appreciated

Read more comments on GitHub >

github_iconTop Results From Across the Web

Designing the Delta Format - Quill Rich Text Editor
Quill is a free, open source WYSIWYG editor built for the modern web. Completely customize it for any need with its modular architecture...
Read more >
Quill js Question :- When I make changes to the delta will it ...
So I figured it out I stored delta to a variable, then I made changes to that variable and then I setContents(delta) to...
Read more >
How to Insert or Type the Delta Symbol in Word (Δ or δ)
Use the Insert Symbol command in the Ribbon; Use an Alt keyboard shortcut by pressing Alt and then typing a number sequence; Assign...
Read more >
CDS based data extraction – Part II Delta Handling - SAP Blogs
In case of an INSERT or UPDATE operation a scheduled job is ... is delta enabled and provides (overwrite) after images, which makes...
Read more >
Colorbar showing color scale - MathWorks
colorbar( location ) displays the colorbar in a specific location such as 'northoutside' . ... use the Position property to specify a custom...
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