Very confused on how to customize editor behavior and style

wesruv · April 8, 2023, 5:11am

My confusion in v6 is pretty broad, v6 seems very powerful, but it’s been almost completely opaque to me so far.
I’m hoping to learn ‘how to fish’ by explaining my general confusion in the background bit here, and then I have two specific examples of my implementation/docs confusion that getting some feedback on might help me start figuring things out for myself.

Thanks for any time/help! I’d be willing to help create more examples/docs if my confusion points to a need for more examples/docs

Background

I’ve been doing front end web dev for over a decade and I’m have a hard time understanding the implementation approach in v6.

There’s a lot of documentation that seems quite good, but I can’t for the life of me figure out how to use a lot of it. Maybe this is implemented in a certain standard or concept that I can read up on and figure this out better? Maybe there’s docs or examples that I’ve missed that would help me grok this better?

Here’s where I’m at, I think I’ve grabbed the relevant code:

gist.github.com

https://gist.github.com/wesruv/44cd7a227958800790847d4a450158b3

markdown_live_preview.mjs

import { EditorView, basicSetup } from "codemirror";
import { keymap } from "@codemirror/view";
import { EditorState, Compartment } from "@codemirror/state";
import { indentWithTab } from "@codemirror/commands";
import { markdown } from "@codemirror/lang-markdown";
import { color, oneDark, oneDarkHighlightStyle, oneDarkTheme } from "@codemirror/theme-one-dark";

// Setup to update settings?
let language = new Compartment, tabSize = new Compartment;

This file has been truncated. show original

package.json

{
  "name": "markdown_editor",
  "version": "1.0.0",
  "description": "Install packages needed for markdown editor",
  "scripts": {},
  "author": "wesruv",
  "dependencies": {
    "@codemirror/lang-markdown": "^6.1.0",
    "@codemirror/theme-one-dark": "^6.1.1",
    "@rollup/plugin-node-resolve": "^15.0.2",

This file has been truncated. show original

rollup.config.mjs

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'markdown_live_preview.mjs',
  output: {
    dir: './',
    format: 'es',
  },
  plugins: [nodeResolve()]
};

Confusion updating the theme/colors using theme-one-dark

I did a lot of guess and checking, I can’t say I understand why the dark theme is working now, but I added code comments for what I think is happening.

The docs didn’t get me far at all with this, the main docs mention how I could create my own color scheme (was hoping to use standard ones like I did in v5), so I tried to grab theme-one-dark, but it doesn’t seem to have much for documentation. I feel like it’d benefit from implementation example in it’s README.

I found this forum post which got me close to having a functioning theme, but I had to fumble around more to get it to work: Dynamic light mode / dark mode - how?

With what I have in the gist, it is working, but I’m getting this error:

Uncaught RangeError: The value of a property (dependencies) should be a primitive value.

Which makes no sense to me, digging into the stack trace didn’t make it any clearer to me, I have no idea if this is a problem with my implementation or a bug?

Are the docs/examples that could have helped me figure out how to implement this theme? From my digging I was completely lost on how to approach this.

Confusion on how to add commenting code shortcut

I found the indentWithTabs functionality while poking around the examples, and I dug around in the typescript file and I see CommentTokens: commands/comment.ts at main · codemirror/commands · GitHub

Looks like something I want, it has a code comment about how to pass an open and closing comment token, but I can’t for the life of me figure out how I’d use this to update my editor behavior?

Is it an extension? Do I have to use a helper function, keymap.of or a different one? What docs/examples can I use to figure out how to implement this?