hypermd-uplift 0.4.0 → 0.4.2

package/dist/features/fold.d.ts

@@ -1,11 +1,12 @@
 import { Decoration, DecorationSet, EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';
 import { Extension } from '@codemirror/state';
+import { SyntaxNodeRef } from '@lezer/common';
 
 export type NodeDecorator = (node: {
     name: string;
     from: number;
     to: number;
-    node: any;
+    node: SyntaxNodeRef;
 }, view: EditorView) => Decoration | null;
 export declare function createDecorationPlugin(decorators: NodeDecorator[]): ViewPlugin<{
     decorations: DecorationSet;

package/dist/features/styling.d.ts

@@ -0,0 +1,4 @@
+import { Extension } from '@codemirror/state';
+
+export declare const hypermdBaseTheme: Extension;
+export declare function hypermdStyling(): Extension;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { Extension } from '@codemirror/state';
+import { hypermdStyling } from './features/styling';
 import { hypermdFold } from './features/fold';
 import { hypermdMath } from './features/math';
 import { hypermdMedia } from './features/media';
@@ -8,4 +9,4 @@ import { hypermdTable } from './features/table';
 export interface HyperMDConfig {
 }
 export declare function hypermd(_config?: HyperMDConfig): Extension;
-export { hypermdFold, hypermdMath, hypermdMedia, hypermdInteraction, hypermdTable };
+export { hypermdStyling, hypermdFold, hypermdMath, hypermdMedia, hypermdInteraction, hypermdTable };

package/dist/index.js

@@ -1,42 +1,96 @@
-var y = Object.defineProperty;
-var D = (e, t, r) => t in e ? y(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var a = (e, t, r) => (D(e, typeof t != "symbol" ? t + "" : t, r), r);
+var b = Object.defineProperty;
+var x = (e, t, r) => t in e ? b(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var c = (e, t, r) => (x(e, typeof t != "symbol" ? t + "" : t, r), r);
 import { markdown as w } from "@codemirror/lang-markdown";
-import { EditorView as c, ViewPlugin as m, Decoration as i, MatchDecorator as b, WidgetType as d } from "@codemirror/view";
-import { syntaxTree as u } from "@codemirror/language";
-import x from "katex";
-const v = c.theme({
-  "&": {
+import { EditorView as d, ViewPlugin as l, Decoration as s, WidgetType as m, MatchDecorator as D } from "@codemirror/view";
+import { syntaxTree as h } from "@codemirror/language";
+import C from "katex";
+const M = d.theme({
+  ".cm-content": {
     fontFamily: "var(--hypermd-font-family, system-ui, sans-serif)",
     lineHeight: "1.6"
-  }
+  },
+  // Headings
+  ".cm-line .cm-header-1": { fontSize: "2em", fontWeight: "bold" },
+  ".cm-line .cm-header-2": { fontSize: "1.5em", fontWeight: "bold" },
+  ".cm-line .cm-header-3": { fontSize: "1.25em", fontWeight: "bold" },
+  ".cm-line .cm-header-4": { fontSize: "1.1em", fontWeight: "bold" },
+  // Lists (We will hide the marker and replace with a widget, but basic styling here)
+  ".cm-line .cm-list": { paddingLeft: "5px" },
+  ".cm-line .cm-quote": { borderLeft: "4px solid #ccc", paddingLeft: "10px", color: "#666" }
 });
-function f(e) {
-  return m.fromClass(
+class W extends m {
+  toDOM() {
+    const t = document.createElement("span");
+    return t.textContent = "•", t.style.fontWeight = "bold", t.style.marginRight = "5px", t;
+  }
+}
+class v extends m {
+  toDOM() {
+    return document.createElement("span");
+  }
+  // Empty span
+}
+function u(e) {
+  const t = [];
+  for (const { from: r, to: n } of e.visibleRanges)
+    h(e.state).iterate({
+      from: r,
+      to: n,
+      enter: (o) => {
+        const a = o.name;
+        if (a.startsWith("HeaderMark") && t.push(s.replace({
+          widget: new v()
+        }).range(o.from, o.to)), a === "ListMark") {
+          const i = e.state.sliceDoc(o.from, o.to);
+          ["-", "*", "+"].includes(i.trim()) && t.push(s.replace({
+            widget: new W()
+          }).range(o.from, o.to));
+        }
+      }
+    });
+  return s.set(t);
+}
+function E() {
+  return [
+    M,
+    l.fromClass(class {
+      constructor(e) {
+        c(this, "decorations");
+        this.decorations = u(e);
+      }
+      update(e) {
+        (e.docChanged || e.viewportChanged) && (this.decorations = u(e.view));
+      }
+    }, { decorations: (e) => e.decorations })
+  ];
+}
+function p(e) {
+  return l.fromClass(
     class {
       constructor(t) {
-        a(this, "decorations");
+        c(this, "decorations");
         this.decorations = this.buildDecorations(t);
       }
       update(t) {
         (t.docChanged || t.viewportChanged || t.selectionSet) && (this.decorations = this.buildDecorations(t.view));
       }
       buildDecorations(t) {
-        const r = [], o = t.state.selection.main;
-        for (const { from: n, to: p } of t.visibleRanges)
-          u(t.state).iterate({
-            from: n,
-            to: p,
-            enter: (s) => {
-              if (!(o.from >= s.from && o.to <= s.to))
-                for (const g of e) {
-                  const l = g({ name: s.name, from: s.from, to: s.to, node: s }, t);
-                  if (l)
-                    return r.push(l.range(s.from, s.to)), !1;
+        const r = [], n = t.state.selection.main;
+        for (const { from: o, to: a } of t.visibleRanges)
+          h(t.state).iterate({
+            from: o,
+            to: a,
+            enter: (i) => {
+              if (!(n.from >= i.from && n.to <= i.to))
+                for (const y of e) {
+                  const f = y({ name: i.name, from: i.from, to: i.to, node: i }, t);
+                  if (f)
+                    return r.push(f.range(i.from, i.to)), !1;
                 }
             }
           });
-        return i.set(r);
+        return s.set(r);
       }
     },
     {
@@ -44,10 +98,10 @@ function f(e) {
     }
   );
 }
-function C(e = []) {
-  return e.length === 0 ? [] : f(e);
+function $(e = []) {
+  return e.length === 0 ? [] : p(e);
 }
-class M extends d {
+class k extends m {
   constructor(t, r) {
     super(), this.code = t, this.display = r;
   }
@@ -58,7 +112,7 @@ class M extends d {
     const t = document.createElement("span");
     t.className = "hypermd-math";
     try {
-      x.render(this.code, t, { displayMode: this.display, throwOnError: !1 });
+      C.render(this.code, t, { displayMode: this.display, throwOnError: !1 });
     } catch {
       t.textContent = this.code;
     }
@@ -68,33 +122,33 @@ class M extends d {
     return !1;
   }
 }
-const h = new b({
+const g = new D({
   regexp: /\$\$([\s\S]+?)\$\$|\$([^$\n]+)\$/g,
   decoration: (e) => {
     const t = !!e[1], r = t ? e[1] : e[2];
-    return i.replace({
-      widget: new M(r, t)
+    return s.replace({
+      widget: new k(r, t)
     });
   }
 });
-function $() {
-  return m.fromClass(class {
+function S() {
+  return l.fromClass(class {
     constructor(e) {
-      a(this, "math");
-      this.math = h.createDeco(e);
+      c(this, "math");
+      this.math = g.createDeco(e);
     }
     update(e) {
-      this.math = h.updateDeco(e, this.math);
+      this.math = g.updateDeco(e, this.math);
     }
   }, {
     decorations: (e) => e.math,
-    provide: (e) => c.atomicRanges.of((t) => {
+    provide: (e) => d.atomicRanges.of((t) => {
       var r;
-      return ((r = t.plugin(e)) == null ? void 0 : r.math) || i.none;
+      return ((r = t.plugin(e)) == null ? void 0 : r.math) || s.none;
     })
   });
 }
-class E extends d {
+class O extends m {
   constructor(t, r) {
     super(), this.url = t, this.title = r;
   }
@@ -106,14 +160,14 @@ class E extends d {
     return t.src = this.url, t.alt = this.title, t.title = this.title, t.className = "hypermd-image", t.style.maxWidth = "100%", t;
   }
 }
-function k() {
-  return f([
+function R() {
+  return p([
     (e, t) => {
       if (e.name === "Image") {
-        const r = t.state.sliceDoc(e.from, e.to), o = /^!\[(.*?)\]\((.*?)\)$/.exec(r);
-        if (o)
-          return i.replace({
-            widget: new E(o[2], o[1])
+        const r = t.state.sliceDoc(e.from, e.to), n = /^!\[(.*?)\]\((.*?)\)$/.exec(r);
+        if (n)
+          return s.replace({
+            widget: new O(n[2], n[1])
           });
       }
       return null;
@@ -121,15 +175,15 @@ function k() {
   ]);
 }
 function T() {
-  return c.domEventHandlers({
+  return d.domEventHandlers({
     click: (e, t) => {
     }
   });
 }
-function W() {
-  return m.fromClass(class {
+function z() {
+  return l.fromClass(class {
     constructor(e) {
-      a(this, "decorations");
+      c(this, "decorations");
       this.decorations = this.buildDecorations(e);
     }
     update(e) {
@@ -137,38 +191,39 @@ function W() {
     }
     buildDecorations(e) {
       const t = [];
-      for (const { from: r, to: o } of e.visibleRanges)
-        u(e.state).iterate({
+      for (const { from: r, to: n } of e.visibleRanges)
+        h(e.state).iterate({
           from: r,
-          to: o,
-          enter: (n) => {
-            n.name === "Table" && t.push(i.mark({
+          to: n,
+          enter: (o) => {
+            o.name === "Table" && t.push(s.mark({
               class: "hypermd-table"
-            }).range(n.from, n.to));
+            }).range(o.from, o.to));
           }
         });
-      return i.set(t);
+      return s.set(t);
     }
   }, {
     decorations: (e) => e.decorations
   });
 }
-function F(e = {}) {
+function P(e = {}) {
   return [
-    v,
     w(),
-    C(),
+    E(),
     $(),
-    k(),
+    S(),
+    R(),
     T(),
-    W()
+    z()
   ];
 }
 export {
-  F as hypermd,
-  C as hypermdFold,
+  P as hypermd,
+  $ as hypermdFold,
   T as hypermdInteraction,
-  $ as hypermdMath,
-  k as hypermdMedia,
-  W as hypermdTable
+  S as hypermdMath,
+  R as hypermdMedia,
+  E as hypermdStyling,
+  z as hypermdTable
 };

package/dist/index.umd.cjs

@@ -1 +1 @@
-(function(r,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("@codemirror/lang-markdown"),require("@codemirror/view"),require("@codemirror/language"),require("katex")):typeof define=="function"&&define.amd?define(["exports","@codemirror/lang-markdown","@codemirror/view","@codemirror/language","katex"],i):(r=typeof globalThis<"u"?globalThis:r||self,i(r["HyperMD-uplift"]={},r.CM.lang.markdown,r.CM.view,r.CM.language,r.katex))})(this,function(r,i,o,m,M){"use strict";var E=Object.defineProperty;var q=(r,i,o)=>i in r?E(r,i,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[i]=o;var d=(r,i,o)=>(q(r,typeof i!="symbol"?i+"":i,o),o);const b=o.EditorView.theme({"&":{fontFamily:"var(--hypermd-font-family, system-ui, sans-serif)",lineHeight:"1.6"}});function u(t){return o.ViewPlugin.fromClass(class{constructor(e){d(this,"decorations");this.decorations=this.buildDecorations(e)}update(e){(e.docChanged||e.viewportChanged||e.selectionSet)&&(this.decorations=this.buildDecorations(e.view))}buildDecorations(e){const n=[],s=e.state.selection.main;for(const{from:c,to:x}of e.visibleRanges)m.syntaxTree(e.state).iterate({from:c,to:x,enter:a=>{if(!(s.from>=a.from&&s.to<=a.to))for(const w of t){const D=w({name:a.name,from:a.from,to:a.to,node:a},e);if(D)return n.push(D.range(a.from,a.to)),!1}}});return o.Decoration.set(n)}},{decorations:e=>e.decorations})}function l(t=[]){return t.length===0?[]:u(t)}class C extends o.WidgetType{constructor(e,n){super(),this.code=e,this.display=n}eq(e){return e.code==this.code&&e.display==this.display}toDOM(){const e=document.createElement("span");e.className="hypermd-math";try{M.render(this.code,e,{displayMode:this.display,throwOnError:!1})}catch{e.textContent=this.code}return e}ignoreEvent(){return!1}}const h=new o.MatchDecorator({regexp:/\$\$([\s\S]+?)\$\$|\$([^$\n]+)\$/g,decoration:t=>{const e=!!t[1],n=e?t[1]:t[2];return o.Decoration.replace({widget:new C(n,e)})}});function f(){return o.ViewPlugin.fromClass(class{constructor(t){d(this,"math");this.math=h.createDeco(t)}update(t){this.math=h.updateDeco(t,this.math)}},{decorations:t=>t.math,provide:t=>o.EditorView.atomicRanges.of(e=>{var n;return((n=e.plugin(t))==null?void 0:n.math)||o.Decoration.none})})}class T extends o.WidgetType{constructor(e,n){super(),this.url=e,this.title=n}eq(e){return this.url===e.url&&this.title===e.title}toDOM(){const e=document.createElement("img");return e.src=this.url,e.alt=this.title,e.title=this.title,e.className="hypermd-image",e.style.maxWidth="100%",e}}function p(){return u([(t,e)=>{if(t.name==="Image"){const n=e.state.sliceDoc(t.from,t.to),s=/^!\[(.*?)\]\((.*?)\)$/.exec(n);if(s)return o.Decoration.replace({widget:new T(s[2],s[1])})}return null}])}function g(){return o.EditorView.domEventHandlers({click:(t,e)=>{}})}function y(){return o.ViewPlugin.fromClass(class{constructor(t){d(this,"decorations");this.decorations=this.buildDecorations(t)}update(t){(t.docChanged||t.viewportChanged)&&(this.decorations=this.buildDecorations(t.view))}buildDecorations(t){const e=[];for(const{from:n,to:s}of t.visibleRanges)m.syntaxTree(t.state).iterate({from:n,to:s,enter:c=>{c.name==="Table"&&e.push(o.Decoration.mark({class:"hypermd-table"}).range(c.from,c.to))}});return o.Decoration.set(e)}},{decorations:t=>t.decorations})}function k(t={}){return[b,i.markdown(),l(),f(),p(),g(),y()]}r.hypermd=k,r.hypermdFold=l,r.hypermdInteraction=g,r.hypermdMath=f,r.hypermdMedia=p,r.hypermdTable=y,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
+(function(o,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("@codemirror/lang-markdown"),require("@codemirror/view"),require("@codemirror/language"),require("katex")):typeof define=="function"&&define.amd?define(["exports","@codemirror/lang-markdown","@codemirror/view","@codemirror/language","katex"],i):(o=typeof globalThis<"u"?globalThis:o||self,i(o["HyperMD-uplift"]={},o.CM.lang.markdown,o.CM.view,o.CM.language,o.katex))})(this,function(o,i,r,l,C){"use strict";var P=Object.defineProperty;var V=(o,i,r)=>i in o?P(o,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[i]=r;var d=(o,i,r)=>(V(o,typeof i!="symbol"?i+"":i,r),r);const W=r.EditorView.theme({".cm-content":{fontFamily:"var(--hypermd-font-family, system-ui, sans-serif)",lineHeight:"1.6"},".cm-line .cm-header-1":{fontSize:"2em",fontWeight:"bold"},".cm-line .cm-header-2":{fontSize:"1.5em",fontWeight:"bold"},".cm-line .cm-header-3":{fontSize:"1.25em",fontWeight:"bold"},".cm-line .cm-header-4":{fontSize:"1.1em",fontWeight:"bold"},".cm-line .cm-list":{paddingLeft:"5px"},".cm-line .cm-quote":{borderLeft:"4px solid #ccc",paddingLeft:"10px",color:"#666"}});class T extends r.WidgetType{toDOM(){const e=document.createElement("span");return e.textContent="•",e.style.fontWeight="bold",e.style.marginRight="5px",e}}class k extends r.WidgetType{toDOM(){return document.createElement("span")}}function h(t){const e=[];for(const{from:n,to:c}of t.visibleRanges)l.syntaxTree(t.state).iterate({from:n,to:c,enter:s=>{const m=s.name;if(m.startsWith("HeaderMark")&&e.push(r.Decoration.replace({widget:new k}).range(s.from,s.to)),m==="ListMark"){const a=t.state.sliceDoc(s.from,s.to);["-","*","+"].includes(a.trim())&&e.push(r.Decoration.replace({widget:new T}).range(s.from,s.to))}}});return r.Decoration.set(e)}function u(){return[W,r.ViewPlugin.fromClass(class{constructor(t){d(this,"decorations");this.decorations=h(t)}update(t){(t.docChanged||t.viewportChanged)&&(this.decorations=h(t.view))}},{decorations:t=>t.decorations})]}function f(t){return r.ViewPlugin.fromClass(class{constructor(e){d(this,"decorations");this.decorations=this.buildDecorations(e)}update(e){(e.docChanged||e.viewportChanged||e.selectionSet)&&(this.decorations=this.buildDecorations(e.view))}buildDecorations(e){const n=[],c=e.state.selection.main;for(const{from:s,to:m}of e.visibleRanges)l.syntaxTree(e.state).iterate({from:s,to:m,enter:a=>{if(!(c.from>=a.from&&c.to<=a.to))for(const q of t){const x=q({name:a.name,from:a.from,to:a.to,node:a},e);if(x)return n.push(x.range(a.from,a.to)),!1}}});return r.Decoration.set(n)}},{decorations:e=>e.decorations})}function g(t=[]){return t.length===0?[]:f(t)}class E extends r.WidgetType{constructor(e,n){super(),this.code=e,this.display=n}eq(e){return e.code==this.code&&e.display==this.display}toDOM(){const e=document.createElement("span");e.className="hypermd-math";try{C.render(this.code,e,{displayMode:this.display,throwOnError:!1})}catch{e.textContent=this.code}return e}ignoreEvent(){return!1}}const p=new r.MatchDecorator({regexp:/\$\$([\s\S]+?)\$\$|\$([^$\n]+)\$/g,decoration:t=>{const e=!!t[1],n=e?t[1]:t[2];return r.Decoration.replace({widget:new E(n,e)})}});function y(){return r.ViewPlugin.fromClass(class{constructor(t){d(this,"math");this.math=p.createDeco(t)}update(t){this.math=p.updateDeco(t,this.math)}},{decorations:t=>t.math,provide:t=>r.EditorView.atomicRanges.of(e=>{var n;return((n=e.plugin(t))==null?void 0:n.math)||r.Decoration.none})})}class S extends r.WidgetType{constructor(e,n){super(),this.url=e,this.title=n}eq(e){return this.url===e.url&&this.title===e.title}toDOM(){const e=document.createElement("img");return e.src=this.url,e.alt=this.title,e.title=this.title,e.className="hypermd-image",e.style.maxWidth="100%",e}}function D(){return f([(t,e)=>{if(t.name==="Image"){const n=e.state.sliceDoc(t.from,t.to),c=/^!\[(.*?)\]\((.*?)\)$/.exec(n);if(c)return r.Decoration.replace({widget:new S(c[2],c[1])})}return null}])}function M(){return r.EditorView.domEventHandlers({click:(t,e)=>{}})}function b(){return r.ViewPlugin.fromClass(class{constructor(t){d(this,"decorations");this.decorations=this.buildDecorations(t)}update(t){(t.docChanged||t.viewportChanged)&&(this.decorations=this.buildDecorations(t.view))}buildDecorations(t){const e=[];for(const{from:n,to:c}of t.visibleRanges)l.syntaxTree(t.state).iterate({from:n,to:c,enter:s=>{s.name==="Table"&&e.push(r.Decoration.mark({class:"hypermd-table"}).range(s.from,s.to))}});return r.Decoration.set(e)}},{decorations:t=>t.decorations})}function w(t={}){return[i.markdown(),u(),g(),y(),D(),M(),b()]}o.hypermd=w,o.hypermdFold=g,o.hypermdInteraction=M,o.hypermdMath=y,o.hypermdMedia=D,o.hypermdStyling=u,o.hypermdTable=b,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
-"name": "hypermd-uplift",
-  "version": "0.4.0",
+  "name": "hypermd-uplift",
+  "version": "0.4.2",
   "description": "A full-featured Markdown editor, breaks the wall between writing and preview.",
   "type": "module",
   "main": "./dist/index.umd.js",
@@ -39,13 +39,12 @@
     "url":  "https://github.com/Keshav-writes-code/HyperMD-uplift.git"
   },
   "peerDependencies": {
+    "@codemirror/lang-markdown": "^6.0.0",
+    "@codemirror/language": "^6.0.0",
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
-    "@codemirror/language": "^6.0.0",
-    "@codemirror/lang-markdown": "^6.0.0",
     "katex": "^0.16.0"
   },
-  "dependencies": {},
   "devDependencies": {
     "@codemirror/autocomplete": "^6.0.0",
     "@codemirror/commands": "^6.0.0",
@@ -55,6 +54,7 @@
     "@codemirror/search": "^6.0.0",
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
+    "@lezer/common": "^1.5.0",
     "@types/node": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",