Better formula editor

Suggestion Box
21

For me the “starts with”-trick that @Paul_Danyliuk introduced works.
At least for me it works with or without the double quotes.

After a while trying to understand why your code I copy-pasted was not working I noticed few small problems and I managed to make it work.

The form plugin used here changes text not marked as code or preformatted text: double quote pairs to quotation marks and two adjacent dashes to a different kind of dash which explains why I had problems making your code work.

I’m guessing the reason the code was not working for you is one missing double quote after formula_editor--root. The working code should be:

div[class^="formula_builder--root"],
div[class^="formula_editor--root"],
div[class^="canvas_formula--popover"]
{ background-color: pink; width: 1800px; }

As I mentioned I also use " User JavaScript and CSS" https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

I originally found @GJ_Roelofs 's awesome post about creating a Table of contents via JS using that extension. I added the rules on top of that.

For me my CSS additions work if with different settings. It only needs to be Enabled, eg. Highest Priority CSS is not needed.

As domain I use: https://coda.io/d

By the way, an easy way to test CSS rules is to inject CSS via Dev tools console like this (I find this easier to copy-paste than using the styles panel or using an extension):

(function(){
    let style = `<style>

    div[class^="formula_builder--root"],
    div[class^="formula_editor--root"],
    div[class^="canvas_formula--popover"]
    { background-color: pink; width: 1800px; } 
    </style>`;

document.head.insertAdjacentHTML("beforeend", style);
})();
1 Like
22

@Jami_Haavisto you nailed it I was missing that double quote " and when added it fixed it 🤦

However that gave me width and pink but no height which is what I really desire. I was able to get that working with:

div[class^=“editable–root”] {max-height: 420px;}

Thanks this will make using Coda.io much more enjoyable :pray:

1 Like
23

Just FYI double quotes (or single quotes) aren’t necessary if there are no spaces in the argument value.

24

Here’s my variant of the CSS:

*[class*="formula_editor"] {
  max-height: 420px;
}
*[class^="formula_builder--root"],
*[class^="canvas_formula--popover"] {
  width: auto;
  min-width: 420px;
}

width: auto stops at screen end, unlike the fixed width of 1800px as suggested above. Height still may overflow though. I’m not super versed in CSS to find the bulletproof hack.

also wth would you want your editor to be pink? :thinking:

UPD: Full script to copy and paste into console when opening the doc:

(function(){
  let style = `<style>
    *[class*="formula_editor"] {
      max-height: 420px;
    }
    *[class^="formula_builder--root"],
    *[class^="canvas_formula--popover"] {
      width: auto;
      min-width: 420px;
    }
  </style>`;
  document.head.insertAdjacentHTML("beforeend", style);
})();
3 Likes
25

@Paul_Danyliuk you don’t edit your code with a pink background???

j/k when I am debugging CSS many times I will set background colors on elements which I am targeting to see if I am on target. Much easier to see a white background go pink or red than a margin-top increasing from 12px > 16px.

AND by the way, your CSS is perfect. I’m using it on my machines and have installed it on 3 team members. <3 thank you so much for all the great contributions you keep making to this community and product. This makes this great product even more enjoyable to use!

26

Oh goodness, it’s far away from perfect. I’m not using it myself actually — Formula editor width jumps all the time when I’m writing my formulas.

I’m not really a front-end dev. Last time I did CSS was back when Bootstrap and jQuery ruled the scene and it was still hip to layout with float: left. However, I have a friend who’s a HTML/CSS pro (and fanatically a freelancer as well, even has his own YouTube channel where he promotes freelancer lifestyle, but it’s in Russian) — I think I’ll just ask him for proper styles somewhere this week.

1 Like
27

Updated code, since they moved onto obfuscated class names:

(function(){
  let style = `<style>
    .m-Hp5xET._2vfTdh9o {
      max-height: 420px;
    }
    ._3J-qBubo._2GINOaoP._3yaQ6jOH ._3yaQ6jOH,
    ._3J-qBubo._3uTdWl5d ._3yaQ6jOH {
      width: auto!important;
      min-width: 480px;
      max-width: 1200px!important;
    }
  </style>`;
  document.head.insertAdjacentHTML("beforeend", style);
})();

It ain’t perfect, but it seems to do the job for now.

UPD: oh sorry, it also makes all popup menus wider. Oh well, don’t have much time to fix that now; just need larger formula spaces.

2 Likes
28

This is an amazing improvement!! @coda_team, please make this apart of the core product :slight_smile:

1 Like
29

Thanks for your amazing contributions. +1 on some native fix for the code editor window. I am really amazed there aren’t dozens of people here claiming for this, editing code is a nightmare as it becomes complex, and it usually does!

I have at least one or two columns in every table where I pray to never again having to touch its formula, as it requires full focus, photographic memory, and seven dragon balls to successfully edit them.

Also, almost every button column I create have big formulas where, again, hell unleash its burning flames.

Really, @coda_team, I love your platform but every time I edit code I am remembering your related people. Jokes apart, please take a look into this problem.

3 Likes
30

After some frustration trying to manage a bigger coda formula I came back here to beg, pretty please for some easy fixes to the formula editor…

  • Bigger area - both width and height, expand row like solution would be wonderful - should be an easy CSS fix, my css hacks don’t work anymore
  • support for comments
  • optional autoindenting for multiline formulas
4 Likes
31

To everyone on this thread — this is now live:

3 Likes
32

There is no way to comment out a line in a formula yet right? I’ve been trying to figure out how to comment out a line lol

1 Like