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

[Feature Request] Multiline Indentation with Tab Key #97

Open
StevenEWright opened this issue May 11, 2023 · 6 comments
Open

[Feature Request] Multiline Indentation with Tab Key #97

StevenEWright opened this issue May 11, 2023 · 6 comments
Labels

Comments

@StevenEWright
Copy link

@antonmedv

It appears #64 was closed as complete, but I don't think this feature exists in codejar.

If you're open to it, I may be willing to contribute the feature, but I wanted to ask your opinion before I bothered.

Is this something codejar would like to have, and would you be open to a PR for it?

Thanks,

Steve

@antonmedv
Copy link
Owner

This feature seems very complicated. I think there are a lot of things to do. For example, improve the handling of newline in empty editor.

@StevenEWright
Copy link
Author

Could you elaborate on why you think it may be complicated?

It seems like a relatively straight forward change to the tab handling routine to simply iterate over the selected lines and insert (or remove, if it's shift-ed) a tab character from the beginning of each line. Is there some complexity to it I'm missing?

Please let me know if this is something you'd be willing to work with me on if I send you a PR or if you'd prefer to focus your time on other things like the newline problems.

Thanks for the response!

Steve

@antonmedv
Copy link
Owner

Check it in chrome,safari and firefox.

@julianpoemp
Copy link
Contributor

julianpoemp commented May 12, 2023

perhaps a solution could be:

  1. Get raw code of selected HTML
  2. Apply multiline indentation on raw code (for each line prefix with tab).
  3. Apply highlighting on raw code => new HTML code
  4. Replace selected HTML with new HTML code.

Am I missing something?

Edit: Perhaps the problem could be to find the start and end position of selected HTML if the selection starts/ends between the start and/or end line.

@panoply
Copy link

panoply commented Jun 16, 2023

This feature seems very complicated. I think there are a lot of things to do.

@antonmedv This can sometimes be a tad extraneous when loc sizes are in the thousands.

Perhaps the problem could be to find the start and end position of selected HTML if the selection starts/ends between the start and/or end line.

@julianpoemp You can just leverage the existing logic. Based on what I quickly browsed over in the source for CodeJar, the below should work for a few hundred loc~line. Supports dedent and indent.

Someone should test.

EDIT 1

Consider moving around tab Indent handler

/* add with the keydown event, in codejar that is here */

on('keydown', (event) => {
  
    // other code .....
   
   // pass directly after the options.history recording,
   handleMultilineIndent(event)
   
})

/*  the multiline tab indent */
function handleMultilineIndent (event: KeyboardEvent) {


    if (event.key === 'Tab') {

      event.preventDefault();

 
      // Obtain selection
      const sel = getSelection().getRangeAt(0).toString();  
       // Newlines
      const nwl = sel.split('\n');  
      // Cached length 
      const itm = nwl.length;

      let len = 0; // Holds the increment/decrement for restore()

      if (event.shiftKey) { // Dedent, ie: shift + tab

         const pos = save();  // Save pos

        for (let i = 0; i < itm; i++) {

          // We want the padding upto the first non whitespace character
         // while regex here is a little extraneous it suffices.
          const space = nwl[i].slice(0, nwl[i].search(/\S/));
          
          // Handle dedents
          if (space.length > options.tab.length) {
            nwl[i] = nwl[i].slice(options.tab.length);
            len = len + options.tab.length;
          } else if (options.tab.length > 0) {
            len = len + 1;
            nwl[i] = nwl[i].slice(1);
          }

        }

        insert(nwl.join('\n'));  // Rejoin

        if (pos.dir === '->') {
          restore({ start: pos.start - len, end: pos.end });
        } else {
          restore({ start: pos.start, end: pos.end - len });
        }

      } else {

       // Tab indent on multiline
       const pos = save();

        for (let i = 0; i < itm; i++) {
          nwl[i] = options.tab + nwl[i];
          len = len + options.tab.length;
        }

        insert(nwl.join('\n'));

        if (pos.dir === '->') {
          restore({ start: pos.start + len, end: pos.end });
        } else {
          restore({ start: pos.start, end: pos.end + len });
        }
      }

    }
  }

@StevenEWright
Copy link
Author

@panoply Thank you for the jump-start. Please checkout my PR - I'd be interested in hearing your thoughts on the Firefox situation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants