New plugin: Orgmode CM6

Share & showcase
1

Introducing Orgmode CM6, my first obsidian plugin that allows to view/edit orgmode files (*.org), as opposed to markdown files (*.md). I am using it on desktop for my orgmode files coming from my phone with orgzly.

I was previously using obsidian-org-mode and wanted to customize the experience with some JS/CSS but was frustrated that it was using code mirror 5 like the legacy editor (feature removed in obsidian 1.5) and not code mirror 6 like current obsidian. So I wrote this plugin from scratch to do just that (CM6 is for code mirror 6), and a little more:

  • The syntax highlighting is not based on regexes but on a custom lezer grammar so it is much more accurate, even though not all orgmode syntax is implemented.
  • There are CSS classes to customize the syntax highlighting.
  • You can define your own todo/done keywords for the syntax highlighting.

Still not a fully-featured orgmode editor, but I hope it can be useful.

I would love to have your feedback about the plugin. I am also curious to know more about your orgmode/obsidian workflows, if you are into that.

8 Likes
2

I was hoping that someone would be brave enough to do this. Thank you so very much!

I’ll try out the plugin this weekend.

Initially when I was at least contemplating the idea of doing it myself, I looked at Lezer (nice idea like tree-sitter), but then I saw that CM6’s markdown mode was NOT done with lezer, I think due to its flexibility which supports a.o. embedded code blocks that also need to be correctly parsed. Does your parser support code blocks?

3

Thank you.

By CM6’s markdown mode, are you talking about @codemirror/lang-markdown which uses @lezer/markdown? It was done with lezer, just not using a grammar file. Markdown and Orgmode are similar in that their grammars are not context-free and cannot be expressed as a LR parser, but there are ways to implement them with Lezer.

My parser relies on external tokens. It doesn’t currently support code blocks, but there is no fundamental reason it couldn’t be implemented. CodeMirror and Lezer call this feature Mixed-Language Parsing.

Is that a feature you would be interested to use, or do you just want to know what is possible?

4

Hi @bbazard , I want to use this plugin on iPhone, is it possible?

5

Hi,

This plugin was not implemented on mobile. I never tried it on iOS but I tried it once on android and it didn’t work.

I am guessing some configuration is needed to make obsidian handle *.org files.
Since I don’t use obsidian on mobile, I didn’t look at how to make it work.

You can disable a flag in the manifest.json in your .obsidian to activate the plugin on mobile as described in Hacking Obsidian: Making a Desktop-only Plugin Work on your Phone or Tablet | Medium but it will probably still not work.

6

New version 2.0.0 available :tada:

  • The plugin now works on android and iOS
  • The orgmode files are now auto-saved
  • Experimental CodeBlockProcessor to see orgmode tasks in markdown files

See the details and a video of the experimental feature: Release 2.0.0 · BBazard/obsidian-orgmode-cm6 · GitHub

1 Like
7

With version 2.1.0 there is now support for text markup like bold and italic.

2024-05-21_23-10

1 Like
8

Now with Live Preview

Support for orgmode links

  • urls [[https://example.com][text]]
  • files inside the vault [[file.org]]
  • inline images [[image.png]]

Text markup markers are hidden.

2024-06-01_16-16

Video available in the Release 2.2.0 · BBazard/obsidian-orgmode-cm6 · GitHub

1 Like
9

Plugin broken: not anymore

Vim mode was accidentally enabled, causing the editor to misbehave (if you don’t expect vim).
Someone opened an issue on github about it and that’s how I discovered it.

Vim mode now follows the obsidian vim setting (restart obsidian if you decide to change the obsidian vim setting).

10

Thanks for making this! I’ll have to check it out. My workaround making my files .md but including at the top

-*- mode: org; -*-

so that emacs opened the appropriate mode but the files were available later on other devices via obsidian.
Thanks again!

1 Like
11

Hi there! Should header folding work on iPhone? All other features working for me except that.

An awesome step would be supporting org roam ID: links…

12

Hi!

I don’t have an iPhone to test it but yes it should work.

You have to tap on the left margin (the gutter) on the line of the heading, if the heading doesn’t contain any section or nested headings you cannot fold it. The fold marker is only visible after the heading is folded.

Can you tell me what are org roam ID: links? I don’t know org roam.

13

oh wow you’re right - it does work! a quick observation and suggestion:
(observation)
when I first open an org file with foldable content, there are no visual cues that it can fold (hence my question). However - when I click the empty margin, the content folds, and I get the “folded” icon in the margin. when I click the “folded” icon, the content then unfolds, and I get an “unfolded” icon.
(suggestion)
when an org file with foldable content loads - could it show the “unfolded” icon already?

re: ID links, they actually have nothing to do with roam, they are the fundamental org link structure:

:PROPERTIES:
:ID: abc
:END:

[[id:abc][My Link to Node abc]]

When the properties start the file, the ID is for the file itself and the link is to the file.

You can also of course add an ID property to any node, and link there directly, and link relatively to any child of an IDentified node using the :: syntax - but I’ll settle for just the first part for now!

I mentioned org-roam merely because that’s sometimes how ID links are created, but certainly not the only way.

Thanks for making such an awesome plugin!

14

I want to be consistent with obsidian for the foldable content. Looking again I see that I missed that the fold icon is always visible in obsidian when the cursor is inside the heading line. I believe it should solve the discoverability problem.

Concerning ID links, thank you for opening an issue about it. We can continue the discussion on github.

15

Bless you for this. :pray:
Just now migrating to Obsidian this will make my life easier.

1 Like
16

ID Links implemented

You can now use links like [[id:customid]] and be redirected to the corresponding org file/heading containing the id in its property drawer

* heading
:PROPERTIES:
:ID: customid
:END:
17

More links and markup

  • markup in links
  • links in markup
  • inline links

2024-07-14_16-57

18

Blocks implemented

  • Lesser Blocks implemented like #+BEGIN_EXAMPLE
  • Better live preview when selecting
  • Handling of deep nesting of text markup and links
  • More precise parsing of planning lines and comments
  • Auto-detect when Vim is enabled/disabled
  • Update README.md to show which org features are supported

19

Embedded code blocks highlighting

Supported languages: c, c++, css, html, java, javascript, json, php, python, rust, sass, xml

image

@cpbotha If you are still interested.

And also :

  • Use the same font as obsidian
  • Add option to hide the leading stars for custom CSS like:

image

CSS snippet used:

.org-heading.org-heading-1::before {
  content: '✤ ';
}
.org-heading-1::before {
  content: '     ';
}
.org-heading.org-heading-2::before {
  content: '     âś˝ ';
}
.org-heading-2::before {
  content: '          ';
}
1 Like
20

Orgzly search

It was already possible to display orgmode tasks in markdown files with a code block like:

```orgmode-tasks
filepath: Orgmode/Orgmode file.org
```

Now a powerful filtering is possible with orgzly search (see Orgzly | Notes & To-Do Lists)

```orgmode-tasks
filepath: Orgmode/Orgmode file.org
query: i.canceled and ( s.tomorrow or c.today )  # canceled tasks scheduled until tomorrow or closed today
```

This kind of code blocks renders like this:

image