[Feature Request] Command to select a block

Galacsh commented 1 year ago

          > From 0.1.1, since the style is manually injected in the `<head>...</head>`, the plugin doesn't need `styles.css`.

I've uploaded this video on the README.md. Check this out if this fits your needs.

@Galacsh thank you for the reply !

Let me ask you 2 questions to see if I understood correctly ...

1️⃣ From version 0.1.1 I have to execute a click operation before using the keyboard shortcuts ?

2️⃣ There is no support for Obsidian Mobile?

I am asking you this because my idea is to use your plugin 100% full keyboard hotkeys: open a note on Reading mode (make it the active note) and then hitting keyboard hotkeys to navigate between headers and callouts.

Moreover I use Obsidian Mobile on a iPad with a mouse and keyboard. If possible, I would like to have the same workflow on iPad that I have on Desktop 🙏

Thanks for reading this, my idea is to share with you my workflow to see if fits on your plugin idea

Let me know what you think !

Have a great day ☀️

Originally posted by @FelipeRearden in https://github.com/Galacsh/obsidian-reading-view-enhancer/issues/2#issuecomment-1490214879

Galacsh commented 1 year ago

Resolved by merging #4

Released in version 0.1.2

FelipeRearden commented 1 year ago

Hello @Galacsh !!!!

I did a detailed test on version 0.1.2 and I am gonna share my feedback.

Environment

Settings

58AF96F8-8115-42B9-B02F-604AEF13FFD2

I tested in 3 devices:

1️⃣ Obsidian Desktop Standard

2️⃣ Obsidian Desktop with Mobile Emulated using this ...

AB5AB9A6-BBF7-4661-AE98-E67E83AFF763

3️⃣ Obsidian Mobile on iPad with iPadOS 16.2

Results

1️⃣ Desktop Standard → ✅ Perfect

2️⃣ Desktop with Mobile Emulated → ✅ Perfect

3️⃣ Mobile on iPad with iPadOS 16.2 → ❌ Not Working with NO ERRORS in console :(

More about Mobile

The issue on Mobile is that I cant get to focus/highlight with the accent color the Header after doing one of this two actions:

🅰️ Clicking on the Header; 🅱️ Hitting the Command;

📺 Check Out ...

video

I hope this test triggers something on your mind that could help us to achieve this on iPad 🙏

Thanks for your help and kindness with my issue 💙

Galacsh commented 1 year ago

Hello @FelipeRearden !

Oh.. Since I just tested on the emulated mobile env, I didn't know that it actually doesn't work on Mobile. So sorry for that and So thank you for testing!

I'll try to fix it and let you know when it's fixed!

Again, thanks for your help! your issue is very helpful 😁

Galacsh commented 1 year ago

Hello again, @FelipeRearden

I've released the version 0.1.3(now, the latest) for fixing this problem. I've tested 0.1.3 with my iPhone + Bluetooth keyboard and it works well for me.

Let me know if it still doesn't work. Thank you 😃

📌 After updating, I recommend you to restart Obsidian

FelipeRearden commented 1 year ago

I've released the version 0.1.3(now, the latest) for fixing this problem. I've tested 0.1.3 with my iPhone + Bluetooth keyboard and it works well for me.

Working absolutely perfect on Obsidian Mobile with iPadOS 16.2 on version 0.1.3 🚀🚀🚀

Thank you very much for your effort to make this work, I am gonna start playing on my main vault after the merge and I let you now if I find something . I am so happy !!!!!!!

Question about CSS

Let me ask one more thing, now about CSS.

Would you mind sharing with me what is the css code that I have use to target the block selector style ? I want to test in my vault with border and/or box-shadow instead of background-color.

I don't know yet how I want to style, but I wanna test a few styles :)

Thank you very much @Galacsh !!! You are super 🥇

Galacsh commented 1 year ago

Working absolutely perfect on Obsidian Mobile with iPadOS 16.2 on version 0.1.3 🚀🚀🚀

Glad to hear that it works !! @FelipeRearden

Answer

This is the css that sets the style of selected block.

.rve-selected-block {
  position: relative;
}

.rve-selected-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: {{BLOCK_COLOR}}1a;
}

You can find this code here.

https://github.com/Galacsh/obsidian-reading-view-enhancer/blob/be4ade8e519c97ea71c1c61c7c7a4fd9f22ed627/src/styles.ts#L38-L51

And also in the released main.js line 78 ~ 91.

To override this css, you could do something like this in your CSS snippet, by using Specificity.

.markdown-preview-view .rve-selected-block::before {
  background-color: #0c7ef085;
}

FelipeRearden commented 1 year ago

That's perfect !!!!!

Thank you very much @Galacsh !!!

I wish you a fantastic day ☀️

Galacsh / obsidian-reading-view-enhancer