Toggle Edit Mode - checkboxes, command palette, desktop

[jdiercks]

Hi @zefhemel , I have a couple suggestions for refinements for the new Edit Toggle behavior:

1. When editing is disabled, currently task checkboxes are still active and will change status when tapped, which I like, BUT those changes in non-editing mode are not saved, and there is no indication that the changes are not being saved, until you return to the page later and task statuses are reverted. Please allow task status updates to save even in non-editing mode.

2. I’d like Toggle Edit Mode to be listed in the command palette, so I can customize where its icon appears in the taskbar, and assign it a hotkey.

3. I’d like Toggle Edit Mode to be available on desktop as well as mobile - the text caret can be bothersome if I’m not editing, as my screen magnification tools will try to track it. Also if I’m not editing I usually don’t want to cause live markdown preview to mess with text if I click on it.

Thanks!

[spiffytech]

To offer a data point to inform prioritization: one of the first things I did after setting up SilverBullet was take my shopping list to the store, whereupon my checkbox state got eaten and I didn't know why. Not a great first impression 😉

I don't see edit mode or the pencil icon documented anywhere besides the 0.8.1 changelog, so I didn't know what that button did. The UI doesn't change much when I have edit mode on or off, so I have to pay close attention to know if my checkboxes are really being checked.

[jdiercks]

@zefhemel , did the Edit Toggle feature get removed? I've been on 0.10.1 for an embarrassingly long time, and just now looking at latest v2. Not seeing this feature on mobile anymore. Couldn't find any references in change log. Am I missing something?

[zefhemel]

Yes I think I removed it, but we can bring it back. I think there is a space lua way to rebuild it.

[jdiercks]

Yes I think I removed it, but we can bring it back. I think there is a space lua way to rebuild it.

Ah that sounds even better - hopefully implementing in space lua will allow for more granularity? Like prevent text edits, but still allow Task checkbox state changes to be active and saved to the file?

[jdiercks]

I think I've almost got this working in space lua; stand by, I'll post my code here when I'm more sure it's working as expected.

[jdiercks]

Think I got it. What do you think?

-- ===== Reader Mode settings (tweak as you like) =====
config.set {
  readerMode = {
    shortcut = "ctrl-alt-e",     -- set to "" to disable the hotkey
    persistent = true,           -- remember per-device
    lockCheckboxes = false,      -- disable clicking checkboxes in read mode
    showActionButton = true,     -- button in the toolbar
    actionButtonPosition = 2,    -- position relative to other existing icons
    enabledIcon = "eye",         -- icon when read-only is ON
    disabledIcon = "edit"        -- icon when read-only is OFF
  }
}

-- ===== Helper: apply or remove read-only UI affordances =====
local function applyReaderUIGuards(enabled)
  -- Toggle editor read-only via UI option and rebuild state
  editor.setUiOption("forcedROMode", enabled)
  editor.rebuildEditorState()
  editor.reloadConfigAndCommands()

  -- (Optional) prevent accidental checkbox clicks
  local styleId = "sb-reader-checkbox-lock"
  local document = js.window.document
  local head = document.getElementsByTagName("head").item(0)
  local cssNode = document.getElementById(styleId)
  
  if enabled and config.get("readerMode").lockCheckboxes then
    if cssNode == nil then
      local styleEl = document.createElement("style")
      styleEl.id = styleId
      styleEl.textContent = [[
        .sb-checkbox input[type='checkbox']{
          pointer-events: none;
          opacity: .5;
          cursor: default;
        }
      ]]
      head.appendChild(styleEl)
    end
  else
    if cssNode ~= nil then
      local parent = cssNode.parentNode
      if parent ~= nil then
        parent.removeChild(cssNode)
      end
    end
  end
end

-- ===== Toggle command =====
local function toggleReaderMode()
  local currently = editor.getUiOption("forcedROMode") or false
  local next = not currently
  applyReaderUIGuards(next)

  if config.get("readerMode").persistent then
    clientStore.set("readerMode.enabled", next)
  end

  editor.flashNotification(next and "Reader Mode: ON" or "Reader Mode: OFF", "info")
end

command.define {
  name = "Editor: Toggle Reader Mode",
  key = config.get("readerMode").shortcut ~= "" and config.get("readerMode").shortcut or nil,
  run = toggleReaderMode
}

-- ===== Optional toolbar button =====
if config.get("readerMode").showActionButton then
  local buttons = config.get("actionButtons") or {}
  local readerButton = {
    icon = editor.getUiOption("forcedROMode") and config.get("readerMode").enabledIcon
           or config.get("readerMode").disabledIcon,
    description = editor.getUiOption("forcedROMode") and "Disable Reader Mode"
                  or "Enable Reader Mode",
    run = function() editor.invokeCommand("Editor: Toggle Reader Mode") end
  }

  table.insert(buttons, config.get("readerMode").actionButtonPosition or 1, readerButton)
  config.set { actionButtons = buttons }
end

-- ===== Auto-restore on startup (if persistent) =====
event.listen {
  name = "system:ready",
  run = function()
    if not config.get("readerMode").persistent then return end
    local wanted = clientStore.get("readerMode.enabled")
    local current = editor.getUiOption("forcedROMode") or false
    if wanted ~= nil and wanted ~= current then
      applyReaderUIGuards(wanted)
    end
  end
}

[jorti]

Think I got it. What do you think?

This is great. Thank you!

I'm testing it and one thing I noticed is that in read-only mode the tables are converted to markdown when you click on them. Is it possible to avoid that?

[jdiercks]

Not just tables, but basically any underlying markdown will still be revealed if you click/tap into it. This is just the way Live Preview normally behaves, except that in reader mode you can't make changes.

It should be possible to add an option to suppress that behavior... it would require some DOM/CSS manipulation similar to what's already in there for checkboxes. I doubt I'll have time to pursue it in the near term, and it's not something I think I would use. It seems valuable to me to keep the option of revealing underlying markdown even in reader mode. I'm just careful to swipe for scroll and only tap if I want to take action like click a link or reveal the markdown.

I had a lot of help from ChatGPT on the code above. If you feed that code into your own instance of ChatGPT, and give it some context about how you want to enhance/modify it, you might get a decent jump-start on wiring it up the way you want.