First attempt at an editor style

Erlend · November 1, 2025, 2:08pm

OK, so now I finally got some time to experiment with the new way of creating extensions/editor styles. My coding experience is that «I’m a novice when it comes to CSS» — so this isn’t easy for me. But I’ve had fun, and worked with Claude (fed as much documentation as possible) to try and learn stuff! (I don’t like vibe coding, as I want to be able to understand what’s going on, heh.)

Here’s the link to the part of the repo with the extension.

My Bike usage

I’ve always loved the way Bike works and feels. And I also find myself using lists a lot when writing notes — so an outliner is attractive to me. However, I’ve struggled to incorporate Bike into my workflow, especially because the info is so hard to get to on the go.

But using bikemd with .md files helps a lot here! So now I’m trying to go back to Bike for the Nth time.

I don’t use it for OBTF (One Big Text File) in the strictest sense — but perhaps more like SBTF (Some Big Text Files). So, I’ll take a quite large subject and collect everything about this in a large outline.

For instance I have a large file all about «Apps», where I have sections about most apps I use. Here I’ll write thoughts, pros/cons, feedback for the devs, what I learn about using them, etc. I’m also keeping notes about menu bar items, home screens, etc.

Another example is one large file regarding one of my customers (I freelance). I’ll keep tasks, meeting notes and more here.

I don’t currently use it for longer form writing — but I’d love to be able to do so in the future!

The reason I’m bringing this up, is that my choices might not make sense if your usage is very different to mine!

The goals behind the editor style:

First of all I just find it fun to customise things to my liking! The extension has two themes included (light and dark mode), and I’ve also tried to keep every colour in the style only using the three colours in themes and systemColours. This way it should work OK with other themes… (The screenshots here are with the default theme!)

But I’ve had a couple of issues with Bike that I’ve tried to «fix» (according to my preferences).

Headings

I’ve always found it completely baffling that Bike doesn’t separate between headings and just some bold text… So in my style, not only can you clearly see the difference between these — I’ve also made it so you can tell H1-H6 apart. (They’re currently colour coded with Apple’s six colours.)

Lists

Lists in Bike have always been a bit weird to me, as sort of everything is a list! What I have done is simply choosing some different compromises!

Generally, handles (the little triangles) are very subdued. They’re unfilled circles with low opacity. When something becomes a parent, it becomes a triangle outline (that’s filled if it’s collapsed). The triangles are clickable like by default. I like that, in general: triangle = is a parent.

Then, if you create a list/list item (unordered, ordered or task), it will only indent half a level, and at the same time the list marker (solid circle, number or square) will replace the handle.
- To me, this makes sense — as I’m used to lists indenting slightly, but I don’t want it to look like the list is part of the next level.
The circle, number or square will all subtly show if it’s a parent or not and if it’s collapsed/expanded.
The circle and number is also clickable now, and will expand/collapse like the triangles.
As task markers already does something on click (finish/unfinish), I’ll add a triangle if a task becomes a parent!

Also notice how the focus arrows tells you that an item has children.

I know this isn’t perfect either — but I think the “Having the list markers replace the handles, and do a half-indent” is better.

Other (mostly small) changes:

I’ve added a background to code and codeblocks. (Codeblocks have a visual selection bug I’m working on…)

The horisontal rule is a bit more pronounced, and doesn’t have a handle.

I’ve also done some small visual adjustments here and there.

I hope someone takes a look! The code base is probably very cumbersome and stuff, but the result still make Bike more useful and fun to me!

The next thing I’d like is to try the Tag extension posted elsewhere, and to get the headings in the sidebar somehow…

PS: I wrote this post in Bike — and getting it from there over here was terrible. None of the copy options work well…

jessegrosjean · November 1, 2025, 3:15pm

This is really great to see. That third screenshot of just standard outline items looks especially appealing. I’ll dig into this more and look over the theme file, but probably won’t be able to get to it until early next week.

Erlend · November 1, 2025, 4:22pm

Thanks!

Yeah, it’s hard to show how things in screenshots. The best thing is to test.

Thanks for a cool system!

Gorgonzola · November 1, 2025, 9:48pm

You inspired me to do some customising!

For some reason, I always preferred bullets to triangles for handles, so I had AI implement that, changed the unordered list to minus (that’s what I usually use in markdown) and a heading signifier I’m still unsure about.

In any case, being able to customise the interface this way is awesome. Great work, Jesse.

jessegrosjean · November 3, 2025, 3:10pm

That’s no good… can you explain the problems encountered in a bit more detail? Generally copy/paste into this form seems to be working OK for me.

I think the richest route is to:

Bike > Edit > Copy > Bike Markdown
Paste into this form’s editor when it is in Markdown mode

Erlend · November 3, 2025, 3:27pm

First of all, I think when copying as markdown things shouldn’t turn out as lists unless I’ve used ordered/unordered lists. One big annoyance was that there seemed like lots of copy options, but none that would give me rich text/markdown but no lists…

Secondly, there are issues with the markdown copying, as you can see here for instance:

This is from Bike. And below is what I got when pasting.

{“root-id”:“NZbx1JlIHaQP3uK-fqQl0”}

OK, so now I finally got some time to experiment with the new way of creating extensions/editor styles. My coding experience is that «I’m a novice when it comes to CSS» — so this isn’t easy for me. But I’ve had fun, and worked with Claude (fed as much documentation as possible) to try and learn stuff! (I don’t like vibe coding, as I want to be able to understand what’s going on, heh.)
Here’s the link[ to the part of the repo with the extension.]{strong}

---
{"root-id":"NZbx1JlIHaQP3uK-fqQl0"}
---
- OK, so now I finally got some time to experiment with the new way of creating extensions/editor styles. My coding experience is that «I’m a novice when it comes to CSS» — so this isn’t easy for me. 😅 But I’ve had fun, and worked with Claude \(fed as much documentation as possible\) to try and learn stuff! \(I don’t like vibe coding, as I want to be able to understand what’s going on, heh.\)
- [**Here’s the link**](https://codeberg.org/Havn/bike-extension-kit/src/branch/main/src/havn_style.bkext)[ to the part of the repo with the extension.]{strong}

It was also weird to me that rich text didn’t work well — but that’s perhaps up to Discourse not accepting rich text and changing it to Markdown…

jessegrosjean · November 3, 2025, 6:27pm

I think the solution here is to add a new “Copy as Markdown” command, that would be in addition to the current “Copy as Bike Markdown”.

For Bike’s format I decided to just lean into lists. They are the most strait forward way to represent an outline in Markdown, and the only way that I could figure where round tripping would encode all outline markdown/state without adding too much special syntax.

While converting outline to a flatter Markdown structure is desirable, it presents lots of edge cases where it’s not really clear what the correct behavior is. I think at some point in the future I would like to implement a “publish” system… that that does this in a flexible way, but until then I don’t expect I’ll work on additional Markdown export.

I think it wouldn’t be too hard to write your own Copy as Markdown command that works like you want. Use row.text.toMarkdown() to generate inline formatting, and then own logic to decide how to map rows to block level elements.

Eww… yes, will see if I can get that fixed.