Table of content (TOC)

plugin-idea

(Takuya Matsuyama) #10

I guess link hashes don’t work because the browser window will try to have the target named link at the top of the view. I mean, it will cause not only the preview but also the entire app view scrolled down.
So you need to handle clicking toc links to scroll to the right position in your plugin without using A links.


#11

Hi, hashe works, but yes, scroll all view. Can you point documentation on how making preview scroll programmatically plz?
Thanks!


(Takuya Matsuyama) #12

MDEPreview.remarkReactOptions is passed to the remark-react plugin. You can customize it as you like.

For example, you can override rendering A tag by doing something like:

const { MDEPreview } = inkdrop.components.classes
if (MDEPreview) {
  // just in case for other plugins
  var OrigA = MDEPreview.remarkReactOptions.remarkReactComponents.a
  MDEPreview.remarkReactOptions.remarkReactComponents.a = function CustomAComponent (props) {
    if (props.href && props.href.startsWith('#')) {
      // Add event handler
      return <a {...props} onClick={YOUR_HANDLER}>{props.children}</a>
    } else if (OrigA) {
      return <OrigA {...props}>{props.children}</OrigA>
    } else {
      return <a {...props}>{props.children}</a>
    }
  }
}

And in your click handler, scroll the .mde-preview viewport to the desired header.


#13

Thanks, how can I get .mde-preview element to do a XX.getElementById("YY").scrollIntoView()?


(Takuya Matsuyama) #14

Hint:

  • XX: Use JavaScript API
  • YY: Find a remark plugin to add slugs to headings

#15

Plugin coded, you can now generate table of contents by adding ‘table of contents’ or ‘toc’ to your markdown file.

https://app.inkdrop.info/plugins/inkdrop-toc

Do you have some code reviews advices?


Anchor tag causing UI to jump up on Mac
#16

Great job! I noticed the following:

  • Can you store a reference to the default behavior for MDEPreview.remarkReactOptions.remarkReactComponents.a in a variable and set it back on deactivation?
  • Scrolling using native JS instead of Jquery
  • Package name should be toc instead of inkdrop-toc

Looking forward to using your plugin!


#17

Thanks @anon29127703,
I removed jquery import but still using it (as jquery is part of electron inkdrop app) to keep animated scroll.
I rename package to toc
Not sure how to set back MDEPreview.remarkReactOptions.remarkReactComponents.a what would you do based on my code https://github.com/blacroix/inkdrop-toc/blob/master/src/inkdrop-toc.js? I tried something by I do not know if it will work.


(Takuya Matsuyama) #18

Great work!
BTW, I will remove user-content- prefix in the next version so that TOC links in exported HTML works as well.

Not sure how to set back MDEPreview.remarkReactOptions.remarkReactComponents.a

Just restore the original A value:

this.MDEPreview.remarkReactOptions.remarkReactComponents.a = this.OrigA

I’m planning to remove jquery from the app dependency in the future. So I would encourage using vanilla JS API.


Anchor tag causing UI to jump up on Mac
#19

Thanks!

  • jQuery removed, I now use pure Vanilla
  • remarkReactComponents.a is restored now (I think)

OK for user-content-, let me know when it’s removed.


(Nicolo Pitsch) #20

Thanks @anon956856!


(Takuya Matsuyama) #21

The TOC plugin author has unfortunately deleted his account. So I decided to take it over.
It is now an official plugin!
The plugin v2.0.3 is out, which supports Inkdrop v3.20.2:

https://app.inkdrop.info/plugins/toc


(Julio Venegas) #22

I’m using inkdrop in two different MacBook Pros, in one of them toc is working perfectly fine, in the other it is not working. Any suggestions on what to check to get it running on the computer where it does not work?


(Takuya Matsuyama) #23

Hi Julio,

Please try updating the plugin with:

ipm update

(Julio Venegas) #24

Hi Takuya! Thanks for the quick reply, ran ipm update, was already running on latest version :confused:

50


(Takuya Matsuyama) #25

That’s weird. You have also the plugin installed on the another MBP, right?
If so, please tell me if any error happens. You can check it on the console from Developer -> Toggle Developer Tools.


(Julio Venegas) #26

Found out what the issue was. TOC only works if there is at least one Header1 item (#) and my document had only Header2 items (##). That’s why it wasn’t generating one. Not sure if that is the expected behavior but it’s clear now why it wasn’t working!

Thanks a lot for the attention though, loving Inkdrop on a daily basis!


(Takuya Matsuyama) #27

Yes, that’s the expected behavior.
Here is how remark-toc works:

  • Looks for the first heading containing 'Table of Contents' , 'toc' , or 'table-of-contents' (case insensitive, supports alt/title attributes for links and images too)
  • Removes all following contents until an equal or higher heading is found
  • Inserts a list representation of the hierarchy of following headings
  • Adds links to following headings, using the same slugs as GitHub

Hope that helps!


(KING SABRI) #28

Thank you for the your response and all other commends
I’ve installed toc and updated all plugins as suggested by before then and still didn’t work

# Table of Contents

## H2

22222


### H3

333333

#### H4

44444

(Takuya Matsuyama) #29

You should write a h2 heading for Table of Contents:

## Table of Contents