@elixpo/lixeditor 2.1.6

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@elixpo/lixeditor",
+  "version": "2.1.6",
+  "description": "A rich WYSIWYG block editor and renderer built on BlockNote — equations, mermaid diagrams, code highlighting, and more.",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles": "./dist/styles/index.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "node build.mjs",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "@blocknote/core": ">=0.30.0",
+    "@blocknote/react": ">=0.30.0",
+    "@blocknote/mantine": ">=0.30.0"
+  },
+  "dependencies": {
+    "katex": "^0.16.0",
+    "mermaid": "^11.0.0",
+    "shiki": "^3.0.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.24.0"
+  },
+  "keywords": [
+    "editor",
+    "wysiwyg",
+    "blocknote",
+    "rich-text",
+    "markdown",
+    "latex",
+    "mermaid",
+    "code-highlighting",
+    "react"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Elixpo-Gaming/lixeditor"
+  }
+}

package/src/blocks/BlockEquation.jsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { createReactBlockSpec } from '@blocknote/react';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import katex from 'katex';
+
+// Strip \[...\], $$...$$, \(...\), $...$ delimiters — KaTeX expects the inner expression only
+function stripDelimiters(raw) {
+  let s = raw.trim();
+  if (s.startsWith('\\[') && s.endsWith('\\]')) return s.slice(2, -2).trim();
+  if (s.startsWith('$$') && s.endsWith('$$')) return s.slice(2, -2).trim();
+  if (s.startsWith('\\(') && s.endsWith('\\)')) return s.slice(2, -2).trim();
+  if (s.startsWith('$') && s.endsWith('$') && s.length > 2) return s.slice(1, -1).trim();
+  return s;
+}
+
+function renderKaTeX(latex, displayMode = true) {
+  try {
+    return katex.renderToString(stripDelimiters(latex), { displayMode, throwOnError: false });
+  } catch {
+    return `<span style="color:#f87171">${latex}</span>`;
+  }
+}
+
+export const BlockEquation = createReactBlockSpec(
+  {
+    type: 'blockEquation',
+    propSchema: {
+      latex: { default: '' },
+    },
+    content: 'none',
+  },
+  {
+    render: ({ block, editor }) => {
+      const [editing, setEditing] = useState(!block.props.latex);
+      const [value, setValue] = useState(block.props.latex || '');
+      const [livePreview, setLivePreview] = useState(block.props.latex || '');
+      const inputRef = useRef(null);
+      const debounceRef = useRef(null);
+
+      useEffect(() => {
+        if (editing) inputRef.current?.focus();
+      }, [editing]);
+
+      const handleCodeChange = useCallback((e) => {
+        const v = e.target.value;
+        setValue(v);
+        clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => setLivePreview(v), 200);
+      }, []);
+
+      useEffect(() => {
+        return () => clearTimeout(debounceRef.current);
+      }, []);
+
+      const save = () => {
+        editor.updateBlock(block, { props: { latex: value } });
+        setEditing(false);
+      };
+
+      if (editing) {
+        return (
+          <div className="mermaid-block mermaid-block--editing">
+            <div className="mermaid-block-header">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#c4b5fd" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/>
+              </svg>
+              <span>LaTeX Equation</span>
+              <span style={{ marginLeft: 'auto', fontSize: '10px', color: 'var(--text-faint)' }}>Shift+Enter to save</span>
+            </div>
+            <textarea
+              ref={inputRef}
+              value={value}
+              onChange={handleCodeChange}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && e.shiftKey) { e.preventDefault(); save(); }
+                if (e.key === 'Escape') { setEditing(false); setValue(block.props.latex || ''); setLivePreview(block.props.latex || ''); }
+              }}
+              placeholder="E = mc^2"
+              rows={4}
+              className="mermaid-block-textarea"
+            />
+            {/* Live KaTeX preview */}
+            {livePreview.trim() && (
+              <div className="latex-live-preview">
+                <div className="latex-live-preview-label">Preview</div>
+                <div dangerouslySetInnerHTML={{ __html: renderKaTeX(livePreview) }} />
+              </div>
+            )}
+            <div className="mermaid-block-actions">
+              <button onClick={() => { setEditing(false); setValue(block.props.latex || ''); setLivePreview(block.props.latex || ''); }} className="mermaid-btn-cancel">Cancel</button>
+              <button onClick={save} className="mermaid-btn-save" disabled={!value.trim()}>Done</button>
+            </div>
+          </div>
+        );
+      }
+
+      const latex = block.props.latex;
+      if (!latex) {
+        return (
+          <div
+            onClick={() => setEditing(true)}
+            className="mermaid-block mermaid-block--empty"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/>
+            </svg>
+            <span>Click to add a block equation</span>
+          </div>
+        );
+      }
+
+      return (
+        <div
+          onClick={() => setEditing(true)}
+          className="editor-block-equation"
+          dangerouslySetInnerHTML={{ __html: renderKaTeX(latex) }}
+        />
+      );
+    },
+  }
+);

package/src/blocks/ButtonBlock.jsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { createReactBlockSpec } from '@blocknote/react';
+import { useState, useEffect, useRef } from 'react';
+
+const BUTTON_ACTIONS = [
+  { value: 'link', label: 'Open Link' },
+  { value: 'copy', label: 'Copy Text' },
+  { value: 'scroll-top', label: 'Scroll to Top' },
+  { value: 'share', label: 'Share Page' },
+];
+
+const BUTTON_VARIANTS = [
+  { value: 'primary', label: 'Primary', cls: 'bg-[#9b7bf7] text-[var(--text-primary)] hover:bg-[#b69aff]' },
+  { value: 'secondary', label: 'Secondary', cls: 'bg-[var(--bg-surface)] border border-[var(--border-default)] text-[var(--text-primary)] hover:border-[var(--border-hover)]' },
+  { value: 'accent', label: 'Accent', cls: 'bg-[#9b7bf7] text-[var(--text-primary)] hover:bg-[#b69aff]' },
+];
+
+export const ButtonBlock = createReactBlockSpec(
+  {
+    type: 'buttonBlock',
+    propSchema: {
+      label: { default: 'Button' },
+      action: { default: 'link' },
+      actionValue: { default: '' },
+      variant: { default: 'primary' },
+    },
+    content: 'none',
+  },
+  {
+    render: ({ block, editor }) => {
+      const [editing, setEditing] = useState(!block.props.label || block.props.label === 'Button');
+      const [label, setLabel] = useState(block.props.label);
+      const [action, setAction] = useState(block.props.action);
+      const [actionValue, setActionValue] = useState(block.props.actionValue);
+      const [variant, setVariant] = useState(block.props.variant);
+
+      const save = () => {
+        editor.updateBlock(block, { props: { label, action, actionValue, variant } });
+        setEditing(false);
+      };
+
+      if (editing) {
+        return (
+          <div className="border border-[var(--border-default)] rounded-xl bg-[var(--bg-surface)] p-4 my-2 space-y-3">
+            <p className="text-[11px] text-[var(--text-muted)] font-medium">Button Block</p>
+            <input
+              type="text"
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+              placeholder="Button label"
+              className="w-full bg-[var(--bg-app)] border border-[var(--border-default)] rounded-lg px-3 py-2 text-[13px] text-[var(--text-primary)] outline-none focus:border-[var(--border-hover)] placeholder-[#6b7a8d]"
+            />
+            <div className="flex gap-2">
+              <select value={action} onChange={(e) => setAction(e.target.value)} className="bg-[var(--bg-app)] border border-[var(--border-default)] rounded-lg px-3 py-2 text-[13px] text-[var(--text-primary)] outline-none flex-1">
+                {BUTTON_ACTIONS.map((a) => <option key={a.value} value={a.value}>{a.label}</option>)}
+              </select>
+              <select value={variant} onChange={(e) => setVariant(e.target.value)} className="bg-[var(--bg-app)] border border-[var(--border-default)] rounded-lg px-3 py-2 text-[13px] text-[var(--text-primary)] outline-none">
+                {BUTTON_VARIANTS.map((v) => <option key={v.value} value={v.value}>{v.label}</option>)}
+              </select>
+            </div>
+            {(action === 'link' || action === 'copy') && (
+              <input
+                type="text"
+                value={actionValue}
+                onChange={(e) => setActionValue(e.target.value)}
+                placeholder={action === 'link' ? 'https://...' : 'Text to copy'}
+                className="w-full bg-[var(--bg-app)] border border-[var(--border-default)] rounded-lg px-3 py-2 text-[13px] text-[var(--text-primary)] outline-none focus:border-[var(--border-hover)] placeholder-[#6b7a8d]"
+              />
+            )}
+            <div className="flex justify-end gap-2">
+              <button onClick={() => setEditing(false)} className="px-3 py-1 text-[12px] text-[#888] hover:text-[var(--text-primary)] transition-colors">Cancel</button>
+              <button onClick={save} className="px-3 py-1 text-[12px] bg-[#9b7bf7] text-[var(--text-primary)] rounded-md font-medium hover:bg-[#b69aff] transition-colors">Done</button>
+            </div>
+          </div>
+        );
+      }
+
+      const variantCls = BUTTON_VARIANTS.find((v) => v.value === variant)?.cls || BUTTON_VARIANTS[0].cls;
+
+      return (
+        <div className="my-2" onDoubleClick={() => setEditing(true)}>
+          <button className={`px-5 py-2 rounded-lg text-[13px] font-medium transition-colors ${variantCls}`}>
+            {label}
+          </button>
+        </div>
+      );
+    },
+  }
+);

package/src/blocks/DateInline.jsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { createReactInlineContentSpec } from '@blocknote/react';
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+function MiniCalendar({ selectedDate, onSelect, onClose, anchorEl }) {
+  const ref = useRef(null);
+  const [viewDate, setViewDate] = useState(() => {
+    const d = selectedDate ? new Date(selectedDate) : new Date();
+    return { year: d.getFullYear(), month: d.getMonth() };
+  });
+  const [pos, setPos] = useState(null);
+
+  useEffect(() => {
+    function handleClick(e) {
+      if (ref.current && !ref.current.contains(e.target)) onClose();
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [onClose]);
+
+  // Position below the anchor, clamped to viewport
+  useEffect(() => {
+    if (!anchorEl) return;
+    const rect = anchorEl.getBoundingClientRect();
+    const calWidth = 240;
+    let left = rect.left;
+    left = Math.max(8, Math.min(left, window.innerWidth - calWidth - 8));
+    setPos({ top: rect.bottom + 4, left });
+  }, [anchorEl]);
+
+  const { year, month } = viewDate;
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const today = new Date();
+  const todayStr = today.toISOString().split('T')[0];
+  const monthName = new Date(year, month).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+
+  const days = [];
+  for (let i = 0; i < firstDay; i++) days.push(null);
+  for (let d = 1; d <= daysInMonth; d++) days.push(d);
+
+  const prev = () => setViewDate(v => v.month === 0 ? { year: v.year - 1, month: 11 } : { ...v, month: v.month - 1 });
+  const next = () => setViewDate(v => v.month === 11 ? { year: v.year + 1, month: 0 } : { ...v, month: v.month + 1 });
+
+  const toDateStr = (d) => `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
+
+  if (!pos) return null;
+
+  return (
+    <div
+      ref={ref}
+      className="fixed z-[100] rounded-xl shadow-2xl overflow-hidden"
+      style={{ backgroundColor: 'var(--bg-app)', border: '1px solid var(--border-default)', width: '240px', top: pos.top, left: pos.left }}
+      onMouseDown={e => e.stopPropagation()}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2" style={{ borderBottom: '1px solid var(--divider)' }}>
+        <button onClick={prev} className="w-6 h-6 flex items-center justify-center rounded hover:bg-[var(--bg-hover)] transition-colors" style={{ color: 'var(--text-muted)' }}>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="15 18 9 12 15 6"/></svg>
+        </button>
+        <span className="text-[12px] font-semibold" style={{ color: 'var(--text-primary)' }}>{monthName}</span>
+        <button onClick={next} className="w-6 h-6 flex items-center justify-center rounded hover:bg-[var(--bg-hover)] transition-colors" style={{ color: 'var(--text-muted)' }}>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="9 18 15 12 9 6"/></svg>
+        </button>
+      </div>
+
+      {/* Day labels */}
+      <div className="grid grid-cols-7 px-2 pt-2">
+        {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(d => (
+          <div key={d} className="text-center text-[10px] font-medium py-1" style={{ color: 'var(--text-faint)' }}>{d}</div>
+        ))}
+      </div>
+
+      {/* Days grid */}
+      <div className="grid grid-cols-7 px-2 pb-2 gap-0.5">
+        {days.map((d, i) => {
+          if (!d) return <div key={`e${i}`} />;
+          const dateStr = toDateStr(d);
+          const isSelected = dateStr === selectedDate;
+          const isToday = dateStr === todayStr;
+          return (
+            <button
+              key={d}
+              onClick={() => { onSelect(dateStr); onClose(); }}
+              className="w-7 h-7 rounded-lg text-[11px] font-medium flex items-center justify-center transition-all"
+              style={{
+                backgroundColor: isSelected ? '#9b7bf7' : 'transparent',
+                color: isSelected ? 'white' : isToday ? '#9b7bf7' : 'var(--text-body)',
+                border: isToday && !isSelected ? '1px solid #9b7bf7' : '1px solid transparent',
+              }}
+              onMouseEnter={e => { if (!isSelected) e.currentTarget.style.backgroundColor = 'var(--bg-hover)'; }}
+              onMouseLeave={e => { if (!isSelected) e.currentTarget.style.backgroundColor = 'transparent'; }}
+            >
+              {d}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between px-3 py-1.5" style={{ borderTop: '1px solid var(--divider)' }}>
+        <button
+          onClick={() => { onSelect(''); onClose(); }}
+          className="text-[10px] font-medium transition-colors" style={{ color: 'var(--text-faint)' }}
+        >Clear</button>
+        <button
+          onClick={() => { onSelect(todayStr); onClose(); }}
+          className="text-[10px] font-medium transition-colors" style={{ color: '#9b7bf7' }}
+        >Today</button>
+      </div>
+    </div>
+  );
+}
+
+function DateChip({ inlineContent }) {
+  const [showPicker, setShowPicker] = useState(false);
+  const chipRef = useRef(null);
+  const d = inlineContent.props.date;
+
+  let formatted;
+  try {
+    formatted = new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  } catch {
+    formatted = d;
+  }
+
+  const handleSelect = useCallback((newDate) => {
+    if (newDate) {
+      inlineContent.props.date = newDate;
+    }
+    setShowPicker(false);
+  }, [inlineContent]);
+
+  return (
+    <span className="relative inline-flex items-center">
+      <span
+        ref={chipRef}
+        onClick={(e) => { e.preventDefault(); e.stopPropagation(); setShowPicker(!showPicker); }}
+        className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[13px] font-medium mx-0.5 cursor-pointer transition-all hover:ring-2 hover:ring-[#9b7bf7]/30"
+        style={{ color: '#9b7bf7', backgroundColor: 'rgba(155,123,247,0.06)', border: '1px solid rgba(155,123,247,0.15)' }}
+        title="Click to change date (Ctrl+D to insert)"
+      >
+        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2" strokeWidth={2} /><line x1="16" y1="2" x2="16" y2="6" strokeWidth={2} /><line x1="8" y1="2" x2="8" y2="6" strokeWidth={2} /><line x1="3" y1="10" x2="21" y2="10" strokeWidth={2} /></svg>
+        {formatted}
+      </span>
+      {showPicker && (
+        <MiniCalendar
+          selectedDate={d}
+          onSelect={handleSelect}
+          onClose={() => setShowPicker(false)}
+          anchorEl={chipRef.current}
+        />
+      )}
+    </span>
+  );
+}
+
+export const DateInline = createReactInlineContentSpec(
+  {
+    type: 'dateInline',
+    propSchema: {
+      date: { default: new Date().toISOString().split('T')[0] },
+    },
+    content: 'none',
+  },
+  {
+    render: (props) => <DateChip {...props} />,
+  }
+);