refactor editor (#228)

* remove opinionated extensions from default editor

* fix website and example

* add changeset

.changeset/metal-rings-sip.md

@@ -0,0 +1,5 @@
+---
+'@orgajs/editor': patch
+---
+
+remove opinionated extensions from default editor

examples/editor/package.json

@@ -14,6 +14,7 @@
     "vite": "^4.4.9"
   },
   "dependencies": {
-    "@orgajs/editor": "workspace:^"
+    "@orgajs/editor": "workspace:^",
+    "cm6-theme-nord": "^0.2.0"
   }
 }

examples/editor/src/config.ts

@@ -1,11 +1,6 @@
-import { EditorView } from '@codemirror/view'
+import { nord } from 'cm6-theme-nord'
+import { cleanup } from '@orgajs/editor/extensions'
 
-export const theme = EditorView.theme({
-  '&': {
-    // background: 'gray',
-  },
-})
-
-const config = [theme]
+const config = [nord, cleanup]
 
 export default config

packages/editor/lib/setup.js → packages/editor/lib/battery.js

@@ -1,8 +1,6 @@
 import { foldGutter, toggleFold } from '@codemirror/language'
 import { EditorView, highlightActiveLine, keymap } from '@codemirror/view'
-import { org } from '@orgajs/cm-lang'
-import { cleanupPlugin } from './plugins/cleanup.js'
-import theme from './theme.js'
+import { cleanup } from './extensions/index.js'
 
 const keys = [
   {
@@ -11,15 +9,13 @@ const keys = [
   },
 ]
 
-export const setup = (() => [
+export const battery = (() => [
   highlightActiveLine(),
   foldGutter({
     openText: '▾',
     closedText: '▸',
   }),
-  org(),
-  theme,
   EditorView.lineWrapping,
-  cleanupPlugin,
+  cleanup,
   keymap.of(keys),
 ])()

packages/editor/lib/editor.js

@@ -12,8 +12,9 @@
  * @property {OnChange} [onChange=() => {}]
  */
 import { EditorView } from '@codemirror/view'
-import { setup } from './setup.js'
 import { Compartment, EditorState } from '@codemirror/state'
+import { org } from '@orgajs/cm-lang'
+import theme from './theme.js'
 
 /**
  * @param {Config} config
@@ -30,9 +31,10 @@ export function makeEditor(config) {
   const state = EditorState.create({
     doc: content,
     extensions: [
+      org(),
       themeConfig.of(EditorView.theme({}, { dark })),
+      theme,
       extensions,
-      setup,
     ],
   })
   const editor = new EditorView({

packages/editor/lib/plugins/cleanup.js → packages/editor/lib/extensions/cleanup.js

@@ -15,7 +15,7 @@ function overlap(a, b) {
 }
 
 // TODO: this plugin is getting big, in terms of responsibility, break it down
-export const cleanupPlugin = ViewPlugin.define(
+const cleanup = ViewPlugin.define(
   (view) => {
     let _data = createDecorations(view)
     let _selection = view.state.selection.main
@@ -66,7 +66,7 @@ export const cleanupPlugin = ViewPlugin.define(
         })
       },
     },
-  },
+  }
 )
 
 /**
@@ -158,3 +158,5 @@ function createDecorations(view, decorations = Decoration.none) {
   })
   return { decorations, links }
 }
+
+export default cleanup

packages/editor/lib/extensions/index.js

@@ -0,0 +1,2 @@
+import cleanup from './cleanup.js'
+export { cleanup }

packages/editor/lib/index.js

@@ -3,5 +3,5 @@
  */
 
 export { makeEditor } from './editor.js'
-export { setup } from './setup.js'
+export { battery } from './battery.js'
 export { tags } from '@orgajs/cm-lang'

packages/editor/package.json

@@ -8,6 +8,18 @@
     "lib",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./extensions": {
+      "import": "./lib/extensions/index.js",
+      "require": "./lib/extensions/index.js",
+      "types": "./dist/extensions/index.d.ts"
+    }
+  },
   "description": "react org-mode editor based on prose-mirror",
   "scripts": {
     "clean": "tsc --build --clean",

website/src/components/editor.tsx

@@ -1,5 +1,5 @@
 import { EditorView } from '@codemirror/view'
-import { makeEditor, type EditorConfig } from '@orgajs/editor'
+import { makeEditor, battery, type EditorConfig } from '@orgajs/editor'
 import { forwardRef, useEffect, useRef, useState } from 'react'
 import { useMergeRefs } from '../utils/merge-refs'
 import { setEditor } from './global'
@@ -16,6 +16,7 @@ const OrgEditor = forwardRef<HTMLDivElement, Partial<EditorConfig>>(
           target: innerRef.current,
           content: content,
           onChange,
+          extensions: [battery],
         })
         setEditorView(editor)
         setEditor(editor)