@frontlit/text-editor 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/prose.css

@@ -399,3 +399,308 @@
   border-radius: 0.5rem;
   margin: 1rem auto;
 }
+
+/* Rich docs blocks. Colours come from the site theme tokens; callout accents
+   mix a fixed hue into them so they read in light and dark themes. */
+.tiptap-renderer .te-code-block__title {
+  border: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
+  border-bottom: none;
+  border-radius: 0.5rem 0.5rem 0 0;
+  color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+  font-family:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
+    monospace;
+  font-size: 0.8125rem;
+  padding: 0.5rem 1rem;
+  padding-right: 2.75rem;
+}
+
+.tiptap-renderer .te-code-block__title + pre {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.tiptap-renderer .te-callout {
+  --te-callout-accent: var(--primary, hsl(222.2 47.4% 11.2%));
+  display: flex;
+  gap: 0.75rem;
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+  border: 1px solid color-mix(in srgb, var(--te-callout-accent) 35%, transparent);
+  border-radius: 0.5rem;
+  background: color-mix(in srgb, var(--te-callout-accent) 7%, transparent);
+}
+
+.tiptap-renderer .te-callout[data-type="tip"] {
+  --te-callout-accent: hsl(142 71% 36%);
+}
+
+.tiptap-renderer .te-callout[data-type="warning"] {
+  --te-callout-accent: hsl(38 92% 45%);
+}
+
+.tiptap-renderer .te-callout[data-type="danger"] {
+  --te-callout-accent: hsl(0 72% 51%);
+}
+
+.tiptap-renderer .te-callout[data-type="note"] {
+  --te-callout-accent: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+}
+
+.tiptap-renderer .te-callout__icon {
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  margin-top: 0.2rem;
+  color: var(--te-callout-accent);
+}
+
+.tiptap-renderer .te-callout__body {
+  min-width: 0;
+  flex: 1;
+}
+
+.tiptap-renderer .te-callout__body > :first-child {
+  margin-top: 0;
+}
+
+.tiptap-renderer .te-callout__body > :last-child {
+  margin-bottom: 0;
+}
+
+.tiptap-renderer .te-callout__title {
+  font-weight: 600;
+}
+
+.tiptap-renderer .te-tabs {
+  margin: 1rem 0;
+}
+
+.tiptap-renderer .te-tabs__list {
+  display: flex;
+  gap: 0.25rem;
+  overflow-x: auto;
+  border-bottom: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
+}
+
+.tiptap-renderer .te-tabs__tab {
+  appearance: none;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  padding: 0.5rem 0.75rem;
+  color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.tiptap-renderer .te-tabs__tab[aria-selected="true"] {
+  border-bottom-color: var(--primary, hsl(222.2 47.4% 11.2%));
+  color: var(--foreground, hsl(222.2 84% 4.9%));
+}
+
+.tiptap-renderer .te-tabs__panel > :first-child {
+  margin-top: 0.75rem;
+}
+
+.tiptap-renderer .te-code-group .te-code-block__title {
+  display: none;
+}
+
+.tiptap-renderer .te-steps {
+  counter-reset: te-step;
+  margin: 1rem 0;
+  padding-left: 0;
+}
+
+.tiptap-renderer .te-steps > .te-step {
+  counter-increment: te-step;
+  list-style: none;
+  position: relative;
+  padding-left: 2.75rem;
+  padding-bottom: 0.5rem;
+}
+
+.tiptap-renderer .te-steps > .te-step::before {
+  content: counter(te-step);
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
+  border-radius: 9999px;
+  background: var(--muted, hsl(210 40% 96.1%));
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.tiptap-renderer .te-steps > .te-step::after {
+  content: "";
+  position: absolute;
+  left: 0.875rem;
+  top: 2.25rem;
+  bottom: 0.25rem;
+  border-left: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
+}
+
+.tiptap-renderer .te-steps > .te-step > :first-child {
+  margin-top: 0;
+}
+
+.tiptap-renderer .te-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  gap: 0.75rem;
+  margin: 1rem 0;
+}
+
+.tiptap-renderer .te-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 1rem;
+  border: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
+  border-radius: 0.5rem;
+  background: var(--card, transparent);
+  color: inherit;
+  text-decoration: none;
+}
+
+.tiptap-renderer a.te-card:hover {
+  background: var(--muted, hsl(210 40% 96.1%));
+}
+
+.tiptap-renderer .te-card__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-bottom: 0.25rem;
+  color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+}
+
+.tiptap-renderer .te-card__title {
+  font-weight: 600;
+}
+
+.tiptap-renderer .te-card__body {
+  color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+  font-size: 0.875rem;
+}
+
+.tiptap-renderer .te-card__body > * {
+  margin: 0;
+}
+
+.tiptap-renderer .te-accordions {
+  margin: 1rem 0;
+  border: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
+  border-radius: 0.5rem;
+}
+
+.tiptap-renderer .te-accordion + .te-accordion {
+  border-top: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
+}
+
+.tiptap-renderer .te-accordion__title {
+  padding: 0.75rem 1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.tiptap-renderer .te-accordion__body {
+  padding: 0 1rem;
+}
+
+.tiptap-renderer .te-type-table {
+  overflow-x: auto;
+}
+
+.tiptap-renderer .te-type-table table {
+  table-layout: auto;
+}
+
+.tiptap-renderer .te-type-table__required {
+  color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
+  font-size: 0.75rem;
+}
+
+/* Rich docs blocks in the editor: a labelled frame per block with its props. */
+.tiptap-editor .ProseMirror .te-block {
+  margin: 0.75rem 0;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+}
+
+.tiptap-editor .ProseMirror .te-block__bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--muted);
+  border-radius: 0.5rem 0.5rem 0 0;
+  font-size: 0.75rem;
+}
+
+.tiptap-editor .ProseMirror .te-block__label {
+  font-weight: 600;
+  color: var(--muted-foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.tiptap-editor .ProseMirror .te-block__content {
+  padding: 0.25rem 0.75rem;
+}
+
+.tiptap-editor .ProseMirror .te-block-item {
+  margin: 0.5rem 0;
+  border: 1px dashed var(--border);
+  border-radius: 0.375rem;
+}
+
+.tiptap-editor .ProseMirror .te-block-item > .te-block__bar {
+  background: transparent;
+}
+
+.tiptap-editor .ProseMirror .te-block[data-block="steps"] > .te-block__content {
+  counter-reset: te-step;
+}
+
+.tiptap-editor .ProseMirror .te-block-item[data-block="step"]::before {
+  counter-increment: te-step;
+  content: "Step " counter(te-step);
+  display: block;
+  padding: 0.25rem 0.75rem 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--muted-foreground);
+}
+
+.tiptap-editor .ProseMirror .te-block-code {
+  margin: 0.75rem 0;
+}
+
+.tiptap-editor .ProseMirror .te-block-code pre {
+  margin-top: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.tiptap-editor .ProseMirror .te-block-table {
+  table-layout: auto;
+  margin: 0.5rem 0;
+}
+
+.tiptap-editor .ProseMirror .te-block-table th,
+.tiptap-editor .ProseMirror .te-block-table td {
+  padding: 0.25rem;
+}

package/dist/renderer/index.js

@@ -82,6 +82,95 @@ var CodeMirrorNode = Node.create({
   }
 });
 
+// src/docs/blocks.ts
+import { Extension, Node as Node2 } from "@tiptap/core";
+import Code from "@tiptap/extension-code";
+function attr(name, fallback = null) {
+  return {
+    [name]: {
+      default: fallback,
+      parseHTML: (element) => {
+        const value = element.getAttribute(`data-${name}`);
+        if (value === null) return fallback;
+        try {
+          return JSON.parse(value);
+        } catch {
+          return fallback;
+        }
+      },
+      renderHTML: (attributes) => attributes[name] === null || attributes[name] === void 0 ? {} : { [`data-${name}`]: JSON.stringify(attributes[name]) }
+    }
+  };
+}
+function block(name, spec) {
+  const tag = `div[data-docs-block="${name}"]`;
+  return Node2.create({
+    name,
+    group: spec.group,
+    content: spec.content,
+    atom: spec.atom,
+    defining: true,
+    isolating: true,
+    addAttributes() {
+      return Object.assign(
+        {},
+        ...Object.entries(spec.attrs ?? {}).map(([key, value]) => attr(key, value))
+      );
+    },
+    parseHTML() {
+      return [{ tag }];
+    },
+    renderHTML({ HTMLAttributes }) {
+      return spec.atom ? ["div", { ...HTMLAttributes, "data-docs-block": name }] : ["div", { ...HTMLAttributes, "data-docs-block": name }, 0];
+    }
+  });
+}
+var DocsCode = Code.extend({ excludes: "" });
+function createDocsBlockExtensions() {
+  return [
+    DocsCode,
+    block("callout", {
+      group: "block",
+      content: "block+",
+      attrs: { type: null, title: null }
+    }),
+    block("tabs", { group: "block", content: "tab+" }),
+    block("tab", { content: "block+", attrs: { label: "" } }),
+    block("steps", { group: "block", content: "step+" }),
+    block("step", { content: "block+" }),
+    block("cards", { group: "block", content: "card+" }),
+    block("card", {
+      content: "block*",
+      attrs: { title: "", href: null, icon: null }
+    }),
+    block("accordions", {
+      group: "block",
+      content: "accordion+",
+      attrs: { type: null }
+    }),
+    block("accordion", { content: "block+", attrs: { title: "" } }),
+    block("codeGroup", { group: "block", content: "codeBlock+" }),
+    block("typeTable", { group: "block", atom: true, attrs: { rows: [] } })
+  ];
+}
+var CodeBlockTitle = Extension.create({
+  name: "codeBlockTitle",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["codeBlock"],
+        attributes: {
+          title: {
+            default: null,
+            parseHTML: (element) => element.getAttribute("data-title"),
+            renderHTML: (attributes) => attributes.title ? { "data-title": attributes.title } : {}
+          }
+        }
+      }
+    ];
+  }
+});
+
 // src/extensions.ts
 lowlight.registerLanguage("javascript", javascript);
 lowlight.registerLanguage("typescript", typescript);
@@ -92,6 +181,7 @@ var createExtensions = ({
   placeholder
 } = {}) => [
   StarterKit.configure({
+    code: false,
     codeBlock: false,
     // Configured/replaced explicitly below (custom options or a
     // `.extend()`) — disabled here to avoid tiptap's duplicate-extension
@@ -151,7 +241,9 @@ var createExtensions = ({
     }
   }),
   Highlight,
-  CodeMirrorNode
+  CodeMirrorNode,
+  CodeBlockTitle,
+  ...createDocsBlockExtensions()
 ];
 
 // src/lib/cn.ts
@@ -179,10 +271,12 @@ function textFromChildren(node) {
 function RenderedCodeBlock({
   node,
   children,
-  language
+  language,
+  title
 }) {
   const source = extractTextFromNode(node) || textFromChildren(children);
   return /* @__PURE__ */ jsxs("div", { className: "te-code-block", children: [
+    title && /* @__PURE__ */ jsx("div", { className: "te-code-block__title", children: title }),
     /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : void 0, children }) }),
     /* @__PURE__ */ jsx(CopyCodeButton, { source })
   ] });
@@ -219,8 +313,109 @@ function extractDocsHeadings(json2) {
   return headings;
 }
 
+// src/components/docs-blocks.tsx
+import { CircleAlert, Info, Lightbulb, OctagonAlert, StickyNote } from "lucide-react";
+import { DynamicIcon } from "lucide-react/dynamic";
+import { DocsTabs } from "./islands/docs-tabs.js";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var childAttrs = (node) => {
+  const attrs = [];
+  node.forEach((child) => {
+    attrs.push(child.attrs);
+  });
+  return attrs;
+};
+var CALLOUT_ICONS = {
+  note: StickyNote,
+  tip: Lightbulb,
+  info: Info,
+  warning: CircleAlert,
+  danger: OctagonAlert
+};
+function Callout({ node, children }) {
+  const type = node.attrs.type ?? "info";
+  const Icon = CALLOUT_ICONS[type] ?? Info;
+  return /* @__PURE__ */ jsxs2("div", { className: "te-callout", "data-type": type, role: "note", children: [
+    /* @__PURE__ */ jsx2(Icon, { className: "te-callout__icon", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs2("div", { className: "te-callout__body", children: [
+      node.attrs.title && /* @__PURE__ */ jsx2("p", { className: "te-callout__title", children: node.attrs.title }),
+      children
+    ] })
+  ] });
+}
+function Tabs({ node, children }) {
+  return /* @__PURE__ */ jsx2(DocsTabs, { className: "te-tabs", labels: childAttrs(node).map((attrs) => attrs.label), children });
+}
+function CodeGroup({ node, children }) {
+  const labels = childAttrs(node).map(
+    (attrs, index) => attrs.title ?? attrs.language ?? `Code ${index + 1}`
+  );
+  return /* @__PURE__ */ jsx2(DocsTabs, { className: "te-tabs te-code-group", labels, children });
+}
+function Steps({ children }) {
+  return /* @__PURE__ */ jsx2("ol", { className: "te-steps", children });
+}
+function Step({ children }) {
+  return /* @__PURE__ */ jsx2("li", { className: "te-step", children });
+}
+function Cards({ children }) {
+  return /* @__PURE__ */ jsx2("div", { className: "te-cards", children });
+}
+var iconName = (name) => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Za-z])([0-9])/g, "$1-$2").toLowerCase();
+function Card({ node, children }) {
+  const { title, href, icon } = node.attrs;
+  const body = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx2(DynamicIcon, { name: iconName(icon), className: "te-card__icon", "aria-hidden": true }),
+    /* @__PURE__ */ jsx2("span", { className: "te-card__title", children: title }),
+    node.childCount > 0 && /* @__PURE__ */ jsx2("div", { className: "te-card__body", children })
+  ] });
+  return href ? /* @__PURE__ */ jsx2("a", { className: "te-card", href, children: body }) : /* @__PURE__ */ jsx2("div", { className: "te-card", children: body });
+}
+function Accordions({ children }) {
+  return /* @__PURE__ */ jsx2("div", { className: "te-accordions", children });
+}
+function Accordion({ node, children }) {
+  return /* @__PURE__ */ jsxs2("details", { className: "te-accordion", children: [
+    /* @__PURE__ */ jsx2("summary", { className: "te-accordion__title", children: node.attrs.title }),
+    /* @__PURE__ */ jsx2("div", { className: "te-accordion__body", children })
+  ] });
+}
+function TypeTable({ node }) {
+  const rows = node.attrs.rows ?? [];
+  return /* @__PURE__ */ jsx2("div", { className: "te-type-table", children: /* @__PURE__ */ jsxs2("table", { children: [
+    /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+      /* @__PURE__ */ jsx2("th", { children: "Prop" }),
+      /* @__PURE__ */ jsx2("th", { children: "Type" }),
+      /* @__PURE__ */ jsx2("th", { children: "Default" }),
+      /* @__PURE__ */ jsx2("th", { children: "Description" })
+    ] }) }),
+    /* @__PURE__ */ jsx2("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs2("tr", { children: [
+      /* @__PURE__ */ jsxs2("td", { children: [
+        /* @__PURE__ */ jsx2("code", { children: row.name }),
+        row.required && /* @__PURE__ */ jsx2("span", { className: "te-type-table__required", children: " (required)" })
+      ] }),
+      /* @__PURE__ */ jsx2("td", { children: /* @__PURE__ */ jsx2("code", { children: row.type }) }),
+      /* @__PURE__ */ jsx2("td", { children: row.default === null ? "\u2014" : /* @__PURE__ */ jsx2("code", { children: row.default }) }),
+      /* @__PURE__ */ jsx2("td", { children: row.description ?? "" })
+    ] }, row.name)) })
+  ] }) });
+}
+var docsBlockMapping = {
+  callout: Callout,
+  tabs: Tabs,
+  tab: ({ children }) => /* @__PURE__ */ jsx2(Fragment, { children }),
+  codeGroup: CodeGroup,
+  steps: Steps,
+  step: Step,
+  cards: Cards,
+  card: Card,
+  accordions: Accordions,
+  accordion: Accordion,
+  typeTable: TypeTable
+};
+
 // src/text-renderer.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var typographyClasses = (typography) => [
   typography?.fontFamily,
   typography?.fontSize,
@@ -278,30 +473,30 @@ function TextRenderer({
             "text-base",
             ...typographyClasses(theme?.typography?.text1)
           );
-          return /* @__PURE__ */ jsx2("p", { className: classes, children });
+          return /* @__PURE__ */ jsx3("p", { className: classes, children });
         },
-        hardBreak: () => /* @__PURE__ */ jsx2("br", {}),
+        hardBreak: () => /* @__PURE__ */ jsx3("br", {}),
         heading: ({ node, children }) => {
           const level = node?.attrs?.level ?? 1;
           const textContent = extractTextFromNode(node);
           const id = profile === "documentation" ? headingIds.get(node) : createId(textContent);
           if (!theme) {
             const Tag2 = `h${level}`;
-            return /* @__PURE__ */ jsx2(Tag2, { id, children });
+            return /* @__PURE__ */ jsx3(Tag2, { id, children });
           }
           if (level === 1) {
             const classes2 = cn(
               "scroll-m-20 text-4xl font-bold tracking-tight",
               ...typographyClasses(theme?.typography?.header1)
             );
-            return /* @__PURE__ */ jsx2("h1", { id, className: classes2, children });
+            return /* @__PURE__ */ jsx3("h1", { id, className: classes2, children });
           }
           if (level === 2) {
             const classes2 = cn(
               "scroll-m-20 text-3xl font-bold tracking-tight",
               ...typographyClasses(theme?.typography?.header2)
             );
-            return /* @__PURE__ */ jsx2("h2", { id, className: classes2, children });
+            return /* @__PURE__ */ jsx3("h2", { id, className: classes2, children });
           }
           const classes = cn(
             "scroll-m-20 text-2xl font-semibold tracking-normal",
@@ -310,10 +505,19 @@ function TextRenderer({
             )
           );
           const Tag = profile === "documentation" ? `h${level}` : "h3";
-          return /* @__PURE__ */ jsx2(Tag, { id, className: classes, children });
+          return /* @__PURE__ */ jsx3(Tag, { id, className: classes, children });
         },
-        codeBlock: ({ node, children }) => /* @__PURE__ */ jsx2(RenderedCodeBlock, { node, language: node?.attrs?.language, children }),
-        codeMirror: ({ node, children }) => /* @__PURE__ */ jsx2(RenderedCodeBlock, { node, children })
+        ...docsBlockMapping,
+        codeBlock: ({ node, children }) => /* @__PURE__ */ jsx3(
+          RenderedCodeBlock,
+          {
+            node,
+            language: node?.attrs?.language,
+            title: node?.attrs?.title,
+            children
+          }
+        ),
+        codeMirror: ({ node, children }) => /* @__PURE__ */ jsx3(RenderedCodeBlock, { node, children })
       },
       markMapping: {
         link: ({ mark, children }) => {
@@ -329,7 +533,7 @@ function TextRenderer({
             linkStyle?.border?.style,
             linkStyle?.custom
           );
-          return /* @__PURE__ */ jsx2(
+          return /* @__PURE__ */ jsx3(
             "a",
             {
               href,
@@ -343,12 +547,12 @@ function TextRenderer({
             }
           );
         },
-        highlight: ({ children }) => /* @__PURE__ */ jsx2("mark", { className: "bg-accent text-accent-foreground", children })
+        highlight: ({ children }) => /* @__PURE__ */ jsx3("mark", { className: "bg-accent text-accent-foreground", children })
       }
     }
   });
   const combinedClassName = ["tiptap-renderer", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx2("div", { className: "text-editor flex flex-col gap-4", children: /* @__PURE__ */ jsx2("div", { className: combinedClassName, children: rendered }) });
+  return /* @__PURE__ */ jsx3("div", { className: "text-editor flex flex-col gap-4", children: /* @__PURE__ */ jsx3("div", { className: combinedClassName, children: rendered }) });
 }
 export {
   TextRenderer