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

Indentation within code-blocks lost #13

Open
sronsiek opened this issue Oct 1, 2024 · 3 comments
Open

Indentation within code-blocks lost #13

sronsiek opened this issue Oct 1, 2024 · 3 comments

Comments

@sronsiek
Copy link

sronsiek commented Oct 1, 2024

When I paste code into Quill, or use tabs or spaces to indent code, that indentation seems to be lost in deltas, which is a shame.

However it is possible to use the Quill indent formatter to indent. This results in an 'indent: 1' attribute.
In your deltaToIntermediate.js file, this attribute is in a BlockInsert element. But when you combine block-code elements, only the child attributes are preserved - the parent block of all except the first BlockInsert element are discarded, so the indentation attribute is lost.

I was able to fix it as follows (there are probably more elegant ways - but it works):

/**
 * @param blocks {BlockInsert[]}
 */
function mergeAdjacentCodeBlocks(blocks) {
    for (let i = 0; i < blocks.length - 1; i++){
        if (blocks[i].attributes['code-block'] && blocks[i + 1].attributes['code-block']) {

            // SR: If the parent block being merged has attributes other than 'code-block',
            //     merge them into the children
            if ( Object.keys( blocks[i+1].attributes ).length > 1 ) {

                let parentAttrs = Object.assign({}, blocks[i + 1].attributes);
                delete parentAttrs['code-block'];
                blocks[i + 1].children.forEach( function( child ) {
                    Object.assign( child.attributes, parentAttrs );
                });
            }

            blocks[i].children.push(...blocks[i + 1].children);
            blocks.splice(i + 1, 1);
            // Decrement index since the array has been changed
            i--;
        }
    }
}
@jfhr
Copy link
Owner

jfhr commented Oct 3, 2024

I've tested this in the Quill playground, but in my tests there is no indent attribute, the indentation is just part of the text. Am I doing something wrong?

I've used this playground setup to try it out and I get the following delta:

{
  "ops": [
    {
      "insert": "  let i = 0;"
    },
    {
      "attributes": {
        "code-block": "plain"
      },
      "insert": "\n"
    }
  ]
}

@sronsiek
Copy link
Author

sronsiek commented Oct 5, 2024

What I'm referring to is use of the Quill indent button - add this to the toolbar:

` [{ 'list': 'ordered' }, { 'list': 'bullet'}, { 'indent': '-1' }, { 'indent': '+1' }],`

then use the indent Quill button to indent a line in the code.

@jfhr
Copy link
Owner

jfhr commented Oct 10, 2024

Ok thanks, I can reproduce the problem now. Would you like to open a pull request with your changes?

Don't forget to add one or more unit tests. You can use the test below and/or add your own if you like.

test('#13 preserve indentation within code blocks', t => {
    const expected = [
        {
            attributes: {
                'code-block': 'plain',
            },
            children: [
                {
                    attributes: {},
                    insert: 'let a;',
                },
                {
                    attributes: { 
                        indent: 1,
                    },
                    insert: 'let b;',
                },
            ],
        },
        {
            attributes: {},
            children: [],
        },

    ];
    const actual = deltaToIntermediateNormalized({
        "ops": [
            {
                "insert": "let a;"
            },
            {
                "attributes": {
                    "code-block": "plain"
                },
                "insert": "\n"
            },
            {
                "insert": "let b;"
            },
            {
                "attributes": {
                    "indent": 1,
                    "code-block": "plain"
                },
                "insert": "\n"
            }
        ]
    });
    t.deepEqual(actual, expected);
});

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

2 participants