@particle-academy/fancy-code 0.4.7 → 0.5.1

package/README.md

@@ -1,5 +1,7 @@
 # @particle-academy/fancy-code
 
+[![Fancified](art/fancified.svg)](https://particle.academy)
+
 Lightweight embedded code editor with syntax highlighting, custom toolbar buttons, and extensible language and theme registries. Part of the `@particle-academy` component ecosystem.
 
 ## Installation
@@ -83,3 +85,9 @@ import { CodeEditor } from "@particle-academy/fancy-code";
 ## License
 
 MIT
+
+---
+
+## ⭐ Star Fancy UI
+
+If this package is useful to you, a quick ⭐ on the repo really helps us build a better kit. Thank you!

package/dist/index.cjs

@@ -1037,7 +1037,80 @@ var tokenizeGo = (source) => {
   return tokens;
 };
 
+// src/engine/tokenizer.ts
+function tok(type, s, e) {
+  return { type, start: s, end: e };
+}
+
+// src/engine/tokenizers/markdown.ts
+function tokenizeMarkdown(source) {
+  const tokens = [];
+  const lines = source.split("\n");
+  let offset = 0;
+  let inFence = false;
+  for (const line of lines) {
+    const base = offset;
+    const len = line.length;
+    offset += len + 1;
+    if (/^\s*(```|~~~)/.test(line)) {
+      tokens.push(tok("string", base, base + len));
+      inFence = !inFence;
+      continue;
+    }
+    if (inFence) {
+      tokens.push(tok("string", base, base + len));
+      continue;
+    }
+    if (/^#{1,6}\s/.test(line)) {
+      tokens.push(tok("keyword", base, base + len));
+      continue;
+    }
+    if (/^\s*>/.test(line)) {
+      tokens.push(tok("comment", base, base + len));
+      continue;
+    }
+    const list = line.match(/^(\s*)([-*+]|\d+\.)\s/);
+    if (list) {
+      const start = base + list[1].length;
+      tokens.push(tok("operator", start, start + list[2].length));
+    }
+    pushInline(line, base, tokens);
+  }
+  return tokens;
+}
+function pushInline(line, base, out) {
+  if (line.length > 5e3) return;
+  const spans = [];
+  const add = (type, start, end) => {
+    spans.push(tok(type, base + start, base + end));
+  };
+  let m;
+  const code = /`[^`]+`/g;
+  while (m = code.exec(line)) add("string", m.index, m.index + m[0].length);
+  const emph = /(\*\*|__)(?=\S)([\s\S]*?\S)\1|(\*|_)(?=\S)([\s\S]*?\S)\3/g;
+  while (m = emph.exec(line)) add("type", m.index, m.index + m[0].length);
+  const link = /!?\[[^\]]*\]\(([^)]+)\)/g;
+  while (m = link.exec(line)) {
+    add("tag", m.index, m.index + m[0].length - m[1].length - 1);
+    const urlStart = m.index + m[0].length - m[1].length - 1;
+    add("attributeValue", urlStart, urlStart + m[1].length);
+  }
+  spans.sort((a, b) => a.start - b.start || b.end - a.end);
+  let lastEnd = -1;
+  for (const s of spans) {
+    if (s.start >= lastEnd) {
+      out.push(s);
+      lastEnd = s.end;
+    }
+  }
+}
+
 // src/languages/builtin.ts
+registerLanguage({
+  name: "Markdown",
+  aliases: ["md", "markdown", "mkd"],
+  tokenize: tokenizeMarkdown
+});
 registerLanguage({
   name: "JavaScript",
   aliases: ["js", "javascript", "jsx"],
@@ -1607,6 +1680,159 @@ var CodeEditor = Object.assign(CodeEditorRoot, {
   Panel: CodeEditorPanel,
   StatusBar: CodeEditorStatusBar
 });
+
+// src/engine/markdown-render.ts
+function escapeHtml2(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr(s) {
+  return s.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function inline(text) {
+  return text.replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, alt, src, title) => `<img src="${escapeAttr(src)}" alt="${escapeAttr(alt)}"${title ? ` title="${escapeAttr(title)}"` : ""}>`).replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, t, href, title) => `<a href="${escapeAttr(href)}"${title ? ` title="${escapeAttr(title)}"` : ""} rel="noopener">${t}</a>`).replace(/`([^`]+)`/g, (_m, c) => `<code>${c}</code>`).replace(/(\*\*|__)(?=\S)([\s\S]*?\S)\1/g, "<strong>$2</strong>").replace(/(\*|_)(?=\S)([\s\S]*?\S)\1/g, "<em>$2</em>");
+}
+function renderMarkdown(markdown) {
+  const lines = markdown.replace(/\r\n?/g, "\n").split("\n");
+  const out = [];
+  let i = 0;
+  let para = [];
+  let listType = null;
+  const flushPara = () => {
+    if (para.length) {
+      out.push(`<p>${inline(para.join(" "))}</p>`);
+      para = [];
+    }
+  };
+  const closeList = () => {
+    if (listType) {
+      out.push(`</${listType}>`);
+      listType = null;
+    }
+  };
+  while (i < lines.length) {
+    const line = lines[i];
+    const fence = line.match(/^\s*(```|~~~)(.*)$/);
+    if (fence) {
+      flushPara();
+      closeList();
+      const lang = fence[2].trim();
+      const body = [];
+      i++;
+      while (i < lines.length && !/^\s*(```|~~~)/.test(lines[i])) {
+        body.push(lines[i]);
+        i++;
+      }
+      i++;
+      out.push(`<pre><code${lang ? ` class="language-${escapeAttr(escapeHtml2(lang))}"` : ""}>${escapeHtml2(body.join("\n"))}</code></pre>`);
+      continue;
+    }
+    const esc = escapeHtml2(line);
+    if (/^\s*$/.test(line)) {
+      flushPara();
+      closeList();
+      i++;
+      continue;
+    }
+    const heading = esc.match(/^(#{1,6})\s+(.*)$/);
+    if (heading) {
+      flushPara();
+      closeList();
+      const level = heading[1].length;
+      out.push(`<h${level}>${inline(heading[2])}</h${level}>`);
+      i++;
+      continue;
+    }
+    if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(line)) {
+      flushPara();
+      closeList();
+      out.push("<hr>");
+      i++;
+      continue;
+    }
+    const quote = esc.match(/^\s*&gt;\s?(.*)$/);
+    if (quote) {
+      flushPara();
+      closeList();
+      out.push(`<blockquote>${inline(quote[1])}</blockquote>`);
+      i++;
+      continue;
+    }
+    const ol = esc.match(/^\s*\d+\.\s+(.*)$/);
+    const ul = esc.match(/^\s*[-*+]\s+(.*)$/);
+    if (ol || ul) {
+      flushPara();
+      const type = ol ? "ol" : "ul";
+      if (listType !== type) {
+        closeList();
+        out.push(`<${type}>`);
+        listType = type;
+      }
+      out.push(`<li>${inline((ol ?? ul)[1])}</li>`);
+      i++;
+      continue;
+    }
+    closeList();
+    para.push(esc);
+    i++;
+  }
+  flushPara();
+  closeList();
+  return out.join("\n");
+}
+function MarkdownEditor({
+  value,
+  defaultValue = "",
+  onValueChange,
+  mode = "split",
+  theme = "auto",
+  readOnly = false,
+  lineNumbers = false,
+  wordWrap = true,
+  placeholder,
+  minHeight,
+  maxHeight,
+  className,
+  renderPreview = renderMarkdown
+}) {
+  const [content, setContent] = reactFancy.useControllableState(value, defaultValue, onValueChange);
+  const showEditor = mode !== "preview";
+  const showPreview = mode !== "edit";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-fancy-markdown-editor": "",
+      "data-mode": mode,
+      className: reactFancy.cn("fancy-md-editor", className),
+      children: [
+        showEditor && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fancy-md-editor-pane", children: /* @__PURE__ */ jsxRuntime.jsx(
+          CodeEditor,
+          {
+            value: content,
+            onChange: setContent,
+            language: "markdown",
+            theme,
+            readOnly,
+            lineNumbers,
+            wordWrap,
+            placeholder,
+            minHeight,
+            maxHeight,
+            children: /* @__PURE__ */ jsxRuntime.jsx(CodeEditor.Panel, {})
+          }
+        ) }),
+        showPreview && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-fancy-markdown-preview": "",
+            className: "fancy-md-preview",
+            dangerouslySetInnerHTML: { __html: renderPreview(content) }
+          }
+        )
+      ]
+    }
+  );
+}
+MarkdownEditor.displayName = "MarkdownEditor";
 function useCodeEditorInputTagAdapter() {
   const ctx = useCodeEditor();
   return react.useMemo(() => reactFancy.textareaAdapter(ctx.textareaRef), [ctx.textareaRef]);
@@ -1618,12 +1844,15 @@ function CodeEditorInputTag(props) {
 
 exports.CodeEditor = CodeEditor;
 exports.CodeEditorInputTag = CodeEditorInputTag;
+exports.MarkdownEditor = MarkdownEditor;
 exports.getLanguage = getLanguage;
 exports.getRegisteredLanguages = getRegisteredLanguages;
 exports.getRegisteredThemes = getRegisteredThemes;
 exports.getTheme = getTheme;
 exports.registerLanguage = registerLanguage;
 exports.registerTheme = registerTheme;
+exports.renderMarkdown = renderMarkdown;
+exports.tokenizeMarkdown = tokenizeMarkdown;
 exports.useCodeEditor = useCodeEditor;
 exports.useCodeEditorInputTagAdapter = useCodeEditorInputTagAdapter;
 //# sourceMappingURL=index.cjs.map