Bike 2.0 (Preview 235)

  • Improved block quote styling
  • Improved block selection styling
  • Changed mergeDistance style property to mergable
  • Fixed crash when Option-Return in line with spaces
  • Fixed editor.transaction API to return result of passed closure
  • Fixed block selection to show selection for all rows, not just ends

Lots of work on styling internals that enables new rounded styles for block selection and blockquote rows. Also refined decoration animations to stay in better sync with text content.

Download:

1 Like

Here’s an experimental style demo that uses new mergable for rows:

1 Like

Pleasingly quietened and organic feel to the indenting edge of multiple row selections :slight_smile:

( one left edge rather than many – less distracting to the eye )
:+1:

( wouldn’t have occurred to me )

Yeah, just a demo at this point, but I’ve always wondered what it would feel like to highlight the outline structure this way in a full theme. Block selection now gives a somewhat similar effect in the default theme. Highlights the outline structure much more then before I think.

Core style rule to enable this effect is:

row(`.*`, (editor, row) => {
  row.padding = new Insets(0, 0, 0, 28)
  row.text.padding = new Insets(5, 5, 5, 5)
  row.decoration('background', (background, layout) => {
    background.anchor.x = 0
    background.anchor.y = 0
    background.x = layout.leadingContent
    background.y = layout.top
    background.width = layout.width.offset(layout.leadingContent.scale(-1))
    background.height = layout.text.bottom.minus(layout.top).offset(row.text.margin.bottom)
    background.color = Color.systemGreen().withFraction(0.7, Color.black())
    background.corners.radius = 6
    background.mergable = true
    background.zPosition = -2
  })
})
1 Like

Haven’t yet tested things extensively, but just a little feedback:

  • Maybe would be nicer to have row highlighting without those lines in between by default?

  • ⌃+O is a system command that usually splits the line at the cursor but keeps the caret in the original row. In Bike 2.0 it does something strange, it adds a new empty row beneath the current one (without splitting it), and then snaps the cursor to the end of the original row. This seems to work fine in Bike 1.0.
  • I don’t quite see the difference between ⌘+Return and ⌥+Return. Seems like they do the same thing, which is to trigger New row command?

There are a few reasons that I like them at the moment:

  1. I want to show distinction between text and block mode. They help make it clear that you are in block mode… selecting entire rows.
  2. The line border in general makes it possible to have a lighter selection color, while still allowing the selection to be distinct and easily visible.
  3. Maybe most important … not possible in current implementation to have line border, but no internal borders, for row level decorations… but even so I think I would still keep them for reason #1

Reserver the right to change my mind at any point! :slight_smile:

It is possible to just turn the border lines off (if you have bike-extension-kit installed) by modifying the default bike-style.ts style like this:

...
style.layer('selection', (row, run, caret, viewport, include) => {
  row(`.selection() = block`, (editor, row) => {
    let values = computeValues(editor)
    row.decoration('selection', (background, layout) => {
      ...
      // background.border.color = values.selectionColor
      background.border.color = Color.none()

Thanks, fixed for next release.

They will be different in next release. There is a core cocoa command insertNewlineIgnoringFieldEditor that is trigged by system in both Control+O and Option+Return cases. I had implemented that command as “New Row”, but I now see it’s generally supposed to work just like insertNewLine in non-field text editors.

In my current option this option looks good too, but I like the lines version a little better.

I still need to revisit all the keybindings for splitting/inserting rows in Bike 2.0, but I’ve at least fixed the above issues for next release.

2 Likes