jpuri / jpuri/draftjs-utils

Error record is undefined when use toggleCustomInlineStyle on an entity (RawDraftEntity)

Open
#45 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
286
Forks
46
PR merge metrics
No merged PRs in 30d

Description

Hey,
I would like to know if it is possible to use the toggleCustomInlineStyle method on an entity (RawDraftEntity) ?
For example, I have an html code with custom tags
<var data-name="$test">

I use htmlToDraft method for convert this code with a customChunkRenderer

private static customChunkRenderer(nodeName: string, node: HTMLElement): RawDraftEntity | undefined {
        let draftEntity: RawDraftEntity | undefined;
        if (nodeName === 'var') {
            const data = {
                name: node.dataset.name
            };
            draftEntity = {
                type: VariableType,
                mutability: 'IMMUTABLE',
                data: data
            };
        }
        return draftEntity;
    }

When I want to change the text size of my item, with the toggleCustomInlineStyle method, I get the following error message

TypeError: record is undefined
removeStyle
.../node_modules/draft-js/lib/CharacterMetadata.js:56

  53 | };
  54 | 
  55 | CharacterMetadata.removeStyle = function removeStyle(record, style) {
> 56 |   var withoutStyle = record.set('style', record.getStyle().remove(style));
     | ^  57 |   return CharacterMetadata.create(withoutStyle);
  58 | };
  59 | 

Then I want to retrieve the HTML code with the style applied to my item, with draftToHtml and my method customEntityTransform

private static customEntityTransform(...args): any {
        const entity = args[0] as RawDraftEntity;
        let value: string | undefined;
        if (entity.type === VariableType) {
            value = '<var data-name="' + entity.data.name + '">';
        }

        return value;
    }

Thank you very much

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the failure through htmlToDraft with customChunkRenderer, then apply toggleCustomInlineStyle to the resulting RawDraftEntity and inspect the CharacterMetadata.removeStyle stack trace. Review how draftToHtml and customEntityTransform handle the styled entity. Done means establishing whether entity styling is supported and documenting or validating the resulting behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.