Feature request: Live Preview support

[kabo1234]

Hi,

this is a great plugin! And now that Dataview tables work in live preview, it would be great if Sortable would work in live preview as well!

At the moment I have to switch to reading mode to sort, and when I return to live preview the order returns to Dataview default…

is this something that is possible?

[alexandru-dinu]

Hello,

Thanks for bringing this up!

First, it appears that Sortable behaves fine in live preview mode (without Dataview).
It provides a view of the sorted table, so in editing mode you still get the raw (unsorted) data.

To further investigate this, can you please provide a description of a workflow (using Dataview) that I can reproduce and use for testing?

-- Alex

[kabo1234]

Hi Alex,

thanks for the quick reply! Here is a screen recording that shows the issue (it's the same for table view as for cards view):

https://capture.dropbox.com/CE6hwR64W9I148B3?src=ss

you can see that when I go to preview mode ti works fine, but in LP sortable doesn't react to my clicking.

I'm using the minimal theme, in case that might be the interfering issue? I'll try it in a test vault as well.

Thanks,
KB

EDIT: In a test vault, the option to sort doesn't even show in Live Preview, but it works fine in Reading mode!

[alexandru-dinu]

Hi KB,

Thanks for providing additional info. Will look into this and try to provide a fix.

-- Alex

[alexandru-dinu]

Hi,

First, Sortable appears to work correctly in Live Preview, even with Dataview tables (for simple queries).
However, when trying to replicate your example, I ran into some issues.

I have 3 files {foo,bar,baz}.md, each containing just frontmatter data:

# foo
---
tags: dv-test
idx: 10
cover: assets/foo.png
---

# bar
---
tags: dv-test
idx: 1
cover: assets/bar.png
---

# baz
---
tags: dv-test
idx: 4
cover: assets/baz.png
---

Then I constructed the following Dataview query (similar to yours):

TABLE WITHOUT ID
("![](" + cover + ")") as Cover,
file.link as Title,
idx as Index
FROM #dv-test

Which does not render the images:

Also, I enabled:

• Live preview
• Minimal theme with "Image grids" setting

Thus, I am assuming there is something else going on.
I notice you have a cssclasses keyword, which I think is responsible for your custom rendering.
Also, what is the purpose of Sort number(meta(sem-week).display) asc -- is it a Dataview query as well?

Can you please confirm that sorting just by sem-week (without cover and cssclasses) works as expected?

[kabo1234]

Hi, thanks for looking into this!

that's great that Sortable works in Live Preview!

I should have been more clear...

• Sort number(meta(sem-week).display) asc I have taken out of the query and just parked there as text for future reference - it does nothing
• in Minimal, the cssclass is actually 'cards' not image grid
• I tried the same query in a different vault with no snippets and just the default theme, and using table view (just normal), and Sortable still only works in Reading mode, not Live Preview. There is no indicator to sort the table, only when I swap to Reading Mode (no change if I take out the cover images). I can't sort by title or week unless I go to Reading Mode...
• I remember reading something about the difference between using local images and online images, but unfortunately I can't remember what the issue was there...for what it's worth, the YAML in the originating file looks like this:

---
cover: https://m.media-amazon.com/images/M/MV5BNjQ1NTQyYjktZDc5My00NDA1LWI1NmItY2ViNjQ0NDk4NmRjXkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg
---

'Title' is derived from 'file.link' and 'Week' is an inline dataview field, eg
week:: [[2022-CourseID-Week 5|5]]

I tried using a plain text field, such as 'year:: 1992' to check whether it is the links that are the problem, but that makes no difference, still can't sort until go to Reading mode.

dataview
table WITHOUT ID file.link as Title, year as Year, sem-week as Week
from "02 Research/films and tv series" 

Could you show me a sample where the sorting works in Live Preview, and maybe I can see what's different to my setup?

[alexandru-dinu]

Hi,

Sorry for the delay and thank you for the info!

Sortable still only works in Reading mode, not Live Preview.

I mistook "live preview" for "reading mode", I apologize.

Sortable works only in the reading (i.e. non-editing) mode. This is mentioned in the readme -- although there I used "preview mode" to refer to "reading mode" (will update to avoid confusion).

In my comment above, I thought that there's a bug that makes Sortable unusuable when editing tables in "live preview" mode, then switching to "reading mode".

Sortable still only works in Reading mode, not Live Preview. There is no indicator to sort the table, only when I swap to Reading Mode (no change if I take out the cover images). I can't sort by title or week unless I go to Reading Mode...

Yes, that is expected and it is the default behaviour. You cannot use Sortable when you're in an editing mode (either classical or live preview).

For the moment, one workaround may be to keep two open panes for a given file: one in editing mode (live preview), the other in reading mode -- you can interact with tables in reading mode and do the editing using live preview.

Hopefully this clarifies the issue. Do let me know if you have any questions!

-- Alex

[nousernameavailableanymore]

+1 for making this work in Live Preview.

[alexandru-dinu]

Hi, It doesn't /shouldn't work in Live Preview. Can you please verify again? Thanks -- Alex

…

On Mon, 14 Mar 2022, 21:35 nousernameavailableanymore, < ***@***.***> wrote: +1 for making this work in Live Preview. — Reply to this email directly, view it on GitHub <#22 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADLU3ZYUDRAKERV5ZSBA3H3U76IGNANCNFSM5OGHSC3A> . You are receiving this because you commented.Message ID: ***@***.***>

[nousernameavailableanymore]

Hi, It doesn't /shouldn't work in Live Preview. Can you please verify again? Thanks -- Alex

I can confirm that it does not work in Live Preview.
This was meant as "I would also appreciate to see this work in LP" :)

[alexandru-dinu]

Thank you.

For tables, Obsidian currently makes a distinction between reading and live preview modes.
I am not quite sure what the required changes are in order to support this. I think Obsidian's live preview is not yet mature enough to enable such behaviour -- I may be wrong, though, I have to do some more research.

Please share your thoughts on a desired UX in the dedicated discussion: #23

-- Alex

[alexandru-dinu]

Introduced in https://github.com/alexandru-dinu/obsidian-sortable/releases/tag/0.2.3.