Merge pull request #217 from orgapp/website

build the new website

Author: xiaoxinghu

.changeset/twelve-radios-clap.md

@@ -0,0 +1,15 @@
+---
+'text-kit': minor
+'@orgajs/loader': minor
+'orga': minor
+'@orgajs/orgx': minor
+'@orgajs/cm-lang': patch
+'@orgajs/example-editor': patch
+'@orgajs/editor': patch
+'@orgajs/astro': patch
+'@orgajs/lezer': patch
+'website': patch
+'@orgajs/next': patch
+---
+
+implement editor

.ignore

@@ -1,6 +1,5 @@
 #+title: Orga
 #+subtitle: org-mode < JavaScript
-#+layout: './website/src/components/landing'
 
 * What Is It
 

README.org

@@ -7,6 +7,7 @@
  */
 import orga from '@orgajs/rollup'
 import { parse as parseMetadata } from '@orgajs/metadata'
+import astroJSXRenderer from 'astro/jsx/renderer.js'
 import { addAstroFragment } from './lib/plugin/recma-add-astro-fragment.js'
 
 /**
@@ -19,8 +20,14 @@ export default function org({ recmaPlugins, ...options }) {
     hooks: {
       // @ts-ignore - addPageExtension, addContentEntryType are internal APIs
       'astro:config:setup': async (/** @type {SetupHookParams} */ params) => {
-        const { addPageExtension, addContentEntryType, updateConfig } = params
+        const {
+          addPageExtension,
+          addContentEntryType,
+          updateConfig,
+          addRenderer,
+        } = params
         addPageExtension('.org')
+        addRenderer(astroJSXRenderer)
 
         addContentEntryType({
           extensions: ['.org'],
@@ -34,20 +41,44 @@ export default function org({ recmaPlugins, ...options }) {
               slug: Array.isArray(data.slug) ? data.slug[0] : data.slug,
             }
           },
+          handlePropagation: true,
         })
 
+        // TODO: add org-components support
+        // const components = new URL('org-components', config.srcDir)
+
         updateConfig({
           vite: {
+            /** @type {import('vite').Plugin[]} */
             plugins: [
               {
                 enforce: 'pre',
                 ...orga({
                   ...options,
                   jsxImportSource: 'astro',
+                  // providerImportSource: components.pathname,
                   recmaPlugins: [...(recmaPlugins ?? []), addAstroFragment],
                   elementAttributeNameCase: 'html',
                   development: false,
                 }),
+                configResolved(resolved) {
+                  // HACK: move ourselves before Astro's JSX plugin to transform things in the right order
+                  const jsxPluginIndex = resolved.plugins.findIndex(
+                    (p) => p.name === 'astro:jsx'
+                  )
+                  if (jsxPluginIndex !== -1) {
+                    const myPluginIndex = resolved.plugins.findIndex(
+                      (p) => p.name === '@orgajs/rollup'
+                    )
+                    if (myPluginIndex !== -1) {
+                      const myPlugin = resolved.plugins[myPluginIndex]
+                      // @ts-ignore-error ignore readonly annotation
+                      resolved.plugins.splice(myPluginIndex, 1)
+                      // @ts-ignore-error ignore readonly annotation
+                      resolved.plugins.splice(jsxPluginIndex, 0, myPlugin)
+                    }
+                  }
+                },
               },
               {
                 name: '@orgajs/org-postprocess',
@@ -57,7 +88,6 @@ export default function org({ recmaPlugins, ...options }) {
                  */
                 transform(code, id) {
                   if (!id.endsWith('.org')) return
-                  // console.log(code)
                   return { code, map: null }
                 },
               },

packages/astro/index.js

@@ -38,6 +38,7 @@
     "@types/estree": "^1.0.1",
     "@types/estree-jsx": "^1.0.0",
     "astro": "^2.10.15",
-    "unified": "^10.1.2"
+    "unified": "^10.1.2",
+    "vite": "^4.4.9"
   }
 }

packages/astro/package.json

@@ -1,19 +1,89 @@
+/** @typedef {import('@lezer/common').SyntaxNode} SyntaxNode */
+
 import {
+  defineLanguageFacet,
+  foldNodeProp,
+  foldService,
   Language,
   LanguageSupport,
-  defineLanguageFacet,
+  syntaxTree,
 } from '@codemirror/language'
-import { parser, tags as t } from '@orgajs/lezer'
+import { NodeProp } from '@lezer/common'
+import { parser as baseParser, tags as t } from '@orgajs/lezer'
 
 export const tags = t
 
 const data = defineLanguageFacet({})
 
+// --- folding ---
+/** @type {NodeProp<number>} */
+const headlineProp = new NodeProp()
+
+/**
+ * @param {import('@lezer/common').NodeType} type
+ */
+function isHeadline(type) {
+  let match = /^headline(\d)$/.exec(type.name)
+  return match ? +match[1] : undefined
+}
+
+/**
+ * @param {SyntaxNode} headerNode
+ * @param {number} level
+ */
+function findSectionEnd(headerNode, level) {
+  let last = headerNode
+  for (;;) {
+    let next = last.nextSibling
+    if (!next) break
+    const headline = isHeadline(next.type)
+    if (headline != null) {
+      if (headline <= level) {
+        return next.from - 1 // escape the newline. TODO: is this safe?
+      }
+    }
+    last = next
+  }
+  return last.to
+}
+
+const headerIndent = foldService.of((state, start, end) => {
+  for (
+    let /** @type {SyntaxNode | null} */ node = syntaxTree(state).resolveInner(
+        end,
+        -1
+      );
+    node;
+    node = node.parent
+  ) {
+    if (node.from < start) break
+    let headline = node.type.prop(headlineProp)
+    if (headline == null) continue
+    let upto = findSectionEnd(node, headline)
+    if (upto > end) return { from: end, to: upto }
+  }
+  return null
+})
+
+const parser = baseParser.configure({
+  props: [
+    foldNodeProp.add((type) => {
+      const m = isHeadline(type)
+      if (!m) return undefined
+      return (tree, state) => ({
+        from: state.doc.lineAt(tree.from).to,
+        to: state.doc.lineAt(tree.from).to,
+      })
+    }),
+    headlineProp.add(isHeadline),
+  ],
+})
+
 /**
  * @param {any} parser
  */
 function mkLang(parser) {
-  return new Language(data, parser, [], 'org')
+  return new Language(data, parser, [headerIndent], 'org')
 }
 
 export function org() {

packages/codemirror-lang/index.js

@@ -30,5 +30,8 @@
   "dependencies": {
     "@codemirror/language": "^6.9.0",
     "@orgajs/lezer": "workspace:^"
+  },
+  "devDependencies": {
+    "@lezer/common": "^1.1.0"
   }
 }

packages/codemirror-lang/package.json

@@ -2,20 +2,32 @@ import { EditorView } from '@codemirror/view'
 import { setup } from './setup.js'
 import { Compartment, EditorState } from '@codemirror/state'
 
+/**
+ * @callback OnChange
+ * @param {EditorState} state
+ */
+
 /**
  * @typedef Config
  * @property {Element} target
  * @property {string} [content='']
  * @property {import('@codemirror/state').Extension} [extensions=[]]
  * @property {boolean} [dark=false]
+ * @property {OnChange} [onChange=() => {}]
  */
 
 /**
  * @param {Config} config
  */
 export function makeEditor(config) {
   const themeConfig = new Compartment()
-  const { target, content = '', extensions = [], dark = false } = config
+  const {
+    target,
+    content = '',
+    extensions = [],
+    dark = false,
+    onChange,
+  } = config
   const state = EditorState.create({
     doc: content,
     extensions: [
@@ -27,6 +39,10 @@ export function makeEditor(config) {
   const editor = new EditorView({
     state,
     parent: target,
+    dispatch: (tr) => {
+      editor.update([tr])
+      tr.docChanged && onChange && onChange(editor.state)
+    },
   })
 
   /** @param {boolean} dark */

packages/editor/lib/editor.js

@@ -1,3 +1,7 @@
+/**
+ * @typedef {import('./editor.js').Config} EditorConfig
+ */
+
 export { makeEditor } from './editor.js'
 export { setup } from './setup.js'
 export { tags } from '@orgajs/cm-lang'