Modify the code of typora to support mixed sorting of folders and files

Time:2021-11-28

Write notes with markdown files and classify them with folders. The whole note document project forms a tree structure. There is often a specific order between note articles and between articles and categories, so a numeric prefix is added in front of the file name to control the sorting. However, the windows file system always sorts folders and files separately. Generally, all folders are ranked before all ordinary files. Typora also adopts this strategy, which causes some inconvenience to my note organization. Therefore, I try to modify the program code of typora to support mixed sorting of folders and files.

image

Typora is an electron based application. The programming language is interpreted JavaScript rather than compiled language. Therefore, we should be able to find the JS file it executes and modify the code to add our own logic. Typora also allows you to open devtools, which makes it easier for us to debug.

Open devtools in typora and observe that it loads several JS files, one of which isC:\Program Files\Typora\resources\appsrc\window\frame.js, guess is the code for the entire application window. Add one at the end of the filealert(), restart typora and see a pop-up window, indicating that we can indeed execute our own code.

The JS files in typora are compiled and compressed. Before modification, format them with vscode or webstorm. Because it has been compiled, the variable name and the writing method of program flow are not easy to read and need some patience to understand.

image

Check the DOM structure of the file tree in the sidebar in devtools and find that all sub files (folders and ordinary files) under the folder node are located in.file-node-childrenElement, so you can implement custom sorting as long as you modify the logic of rendering the dom.

image

stayframe.jsSearch infile-node-children, there are 3 places in total. Through viewing, debugging and analysis, the core method of rendering file list is foundrenderNode()。 In each file node data, the subdirectory node is placed insubdirProperty (array), the sub article node is placed incontentAttributes (arrays), which are sorted and rendered separately. Then, you only need to merge the two arrays and put them together for one-time sorting and rendering to realize mixed sorting. Add the code, restart typora and find it successful.

image

image

image

In addition, we must continue to analyze and modify several other codes so that the file list can always be mixed and sorted correctly, such asonAddFile()If a file node is added to the method, the logic should also be adjusted to adapt to the new sorting method. The idea is similar to the process, so I won’t elaborate.

After some analysis, modification and debugging, the task was finally completed. It’s not difficult to realize. What’s important is to go through the process of reverse engineering and use the learned knowledge.

Recommended Today

On the mutation mechanism of Clickhouse (with source code analysis)

Recently studied a bit of CH code.I found an interesting word, mutation.The word Google has the meaning of mutation, but more relevant articles translate this as “revision”. The previous article analyzed background_ pool_ Size parameter.This parameter is related to the background asynchronous worker pool merge.The asynchronous merge and mutation work in Clickhouse kernel is completed […]