@mdxeditor/editor 0.4.1 → 0.5.0

package/dist/CodeBlockEditor-7e15d01c.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@codesandbox/sandpack-react"),r=require("react"),i=require("./index-731c8e58.cjs"),a=require("./useCodeMirrorRef-cba12130.cjs");require("@lexical/react/LexicalComposer"),require("@lexical/react/LexicalContentEditable"),require("@lexical/react/LexicalErrorBoundary"),require("@lexical/react/LexicalHorizontalRulePlugin"),require("@lexical/react/LexicalLinkPlugin"),require("@lexical/react/LexicalListPlugin"),require("@lexical/react/LexicalRichTextPlugin"),require("@lexical/react/LexicalTabIndentationPlugin"),require("classnames"),require("lexical"),require("@lexical/code"),require("@lexical/link"),require("@lexical/list"),require("@lexical/react/LexicalHorizontalRuleNode"),require("@lexical/rich-text"),require("mdast-util-directive"),require("mdast-util-from-markdown"),require("mdast-util-frontmatter"),require("mdast-util-gfm-table"),require("mdast-util-mdx"),require("micromark-extension-directive"),require("micromark-extension-frontmatter"),require("micromark-extension-gfm-table"),require("micromark-extension-mdxjs"),require("@lexical/utils"),require("@lexical/react/LexicalComposerContext"),require("@lexical/selection"),require("@lexical/react/LexicalHistoryPlugin"),require("mdast-util-to-markdown"),require("@radix-ui/react-popover"),require("@radix-ui/react-tooltip"),require("downshift"),require("@lexical/markdown"),require("@lexical/react/LexicalMarkdownShortcutPlugin"),require("@codemirror/lang-markdown"),require("react-diff-view"),require("unidiff"),require("@radix-ui/react-toolbar"),require("@radix-ui/react-select"),require("@radix-ui/react-dialog");exports.CodeBlockEditor=({nodeKey:t,code:l,language:c,onChange:u,focusEmitter:o})=>{const[n]=i.useEmitterValues("activeEditor"),d=a.useCodeMirrorRef(t,"codeblock",c),s=i.usePublisher("activeEditorType");r.useEffect((()=>{o.subscribe((()=>{var e,r;null==(r=null==(e=null==d?void 0:d.current)?void 0:e.getCodemirror())||r.focus(),s({type:"codeblock",nodeKey:t})}))}),[o,d,s,t]);const x=r.useCallback((e=>{null==n||n.update((()=>{u(e)}))}),[u,n]);return r.createElement("div",{className:i.styles.sandpackWrapper},r.createElement(e.SandpackProvider,null,r.createElement(e.CodeEditor,{showLineNumbers:!0,initMode:"immediate",key:c,filePath:`file.${c||"txt"}`,code:l,onCodeUpdate:x,ref:d})))};

package/dist/CodeBlockEditor-85a8b6b0.js

@@ -0,0 +1,79 @@
+import { SandpackProvider, CodeEditor } from "@codesandbox/sandpack-react";
+import React__default from "react";
+import { u as useEmitterValues, a as usePublisher, s as styles } from "./index-11db5fbf.js";
+import { u as useCodeMirrorRef } from "./useCodeMirrorRef-89746e60.js";
+import "@lexical/react/LexicalComposer";
+import "@lexical/react/LexicalContentEditable";
+import "@lexical/react/LexicalErrorBoundary";
+import "@lexical/react/LexicalHorizontalRulePlugin";
+import "@lexical/react/LexicalLinkPlugin";
+import "@lexical/react/LexicalListPlugin";
+import "@lexical/react/LexicalRichTextPlugin";
+import "@lexical/react/LexicalTabIndentationPlugin";
+import "classnames";
+import "lexical";
+import "@lexical/code";
+import "@lexical/link";
+import "@lexical/list";
+import "@lexical/react/LexicalHorizontalRuleNode";
+import "@lexical/rich-text";
+import "mdast-util-directive";
+import "mdast-util-from-markdown";
+import "mdast-util-frontmatter";
+import "mdast-util-gfm-table";
+import "mdast-util-mdx";
+import "micromark-extension-directive";
+import "micromark-extension-frontmatter";
+import "micromark-extension-gfm-table";
+import "micromark-extension-mdxjs";
+import "@lexical/utils";
+import "@lexical/react/LexicalComposerContext";
+import "@lexical/selection";
+import "@lexical/react/LexicalHistoryPlugin";
+import "mdast-util-to-markdown";
+import "@radix-ui/react-popover";
+import "@radix-ui/react-tooltip";
+import "downshift";
+import "@lexical/markdown";
+import "@lexical/react/LexicalMarkdownShortcutPlugin";
+import "@codemirror/lang-markdown";
+import "react-diff-view";
+import "unidiff";
+import "@radix-ui/react-toolbar";
+import "@radix-ui/react-select";
+import "@radix-ui/react-dialog";
+const CodeBlockEditor = ({ nodeKey, code, language, onChange, focusEmitter }) => {
+  const [activeEditor] = useEmitterValues("activeEditor");
+  const codeMirrorRef = useCodeMirrorRef(nodeKey, "codeblock", language);
+  const setActiveEditorType = usePublisher("activeEditorType");
+  React__default.useEffect(() => {
+    focusEmitter.subscribe(() => {
+      var _a, _b;
+      (_b = (_a = codeMirrorRef == null ? void 0 : codeMirrorRef.current) == null ? void 0 : _a.getCodemirror()) == null ? void 0 : _b.focus();
+      setActiveEditorType({ type: "codeblock", nodeKey });
+    });
+  }, [focusEmitter, codeMirrorRef, setActiveEditorType, nodeKey]);
+  const wrappedOnChange = React__default.useCallback(
+    (code2) => {
+      activeEditor == null ? void 0 : activeEditor.update(() => {
+        onChange(code2);
+      });
+    },
+    [onChange, activeEditor]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.sandpackWrapper }, /* @__PURE__ */ React__default.createElement(SandpackProvider, null, /* @__PURE__ */ React__default.createElement(
+    CodeEditor,
+    {
+      showLineNumbers: true,
+      initMode: "immediate",
+      key: language,
+      filePath: `file.${language || "txt"}`,
+      code,
+      onCodeUpdate: wrappedOnChange,
+      ref: codeMirrorRef
+    }
+  )));
+};
+export {
+  CodeBlockEditor
+};

package/dist/FrontmatterEditor-a8263f5d.js

@@ -0,0 +1,119 @@
+import YamlParser from "js-yaml";
+import * as React from "react";
+import React__default from "react";
+import { useForm, useFieldArray } from "react-hook-form";
+import classNames from "classnames";
+import { s as styles } from "./index-11db5fbf.js";
+import "@lexical/react/LexicalComposer";
+import "@lexical/react/LexicalContentEditable";
+import "@lexical/react/LexicalErrorBoundary";
+import "@lexical/react/LexicalHorizontalRulePlugin";
+import "@lexical/react/LexicalLinkPlugin";
+import "@lexical/react/LexicalListPlugin";
+import "@lexical/react/LexicalRichTextPlugin";
+import "@lexical/react/LexicalTabIndentationPlugin";
+import "lexical";
+import "@lexical/code";
+import "@lexical/link";
+import "@lexical/list";
+import "@lexical/react/LexicalHorizontalRuleNode";
+import "@lexical/rich-text";
+import "mdast-util-directive";
+import "mdast-util-from-markdown";
+import "mdast-util-frontmatter";
+import "mdast-util-gfm-table";
+import "mdast-util-mdx";
+import "micromark-extension-directive";
+import "micromark-extension-frontmatter";
+import "micromark-extension-gfm-table";
+import "micromark-extension-mdxjs";
+import "@lexical/utils";
+import "@lexical/react/LexicalComposerContext";
+import "@lexical/selection";
+import "@lexical/react/LexicalHistoryPlugin";
+import "mdast-util-to-markdown";
+import "@radix-ui/react-popover";
+import "@radix-ui/react-tooltip";
+import "downshift";
+import "@lexical/markdown";
+import "@lexical/react/LexicalMarkdownShortcutPlugin";
+import "@codemirror/lang-markdown";
+import "@codesandbox/sandpack-react";
+import "react-diff-view";
+import "unidiff";
+import "@radix-ui/react-toolbar";
+import "@radix-ui/react-select";
+import "@radix-ui/react-dialog";
+const SvgArrowRight = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 24, height: 24, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+  maskType: "alpha"
+} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h24v24H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M10 17V7l5 5-5 5Z" })));
+const ArrowRight = SvgArrowRight;
+const SvgArrowDropDown = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 24, height: 24, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+  maskType: "alpha"
+} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h24v24H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "m12 15-5-5h10l-5 5Z" })));
+const ArrowDown = SvgArrowDropDown;
+const SvgDelete = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+  maskType: "alpha"
+} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h20v20H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M5 17V6.5H4V5h4V4h4v1h4v1.5h-1V17H5Zm1.5-1.5h7v-9h-7v9ZM8 14h1.5V8H8v6Zm2.5 0H12V8h-1.5v6Z" })));
+const DeleteIcon = SvgDelete;
+const FrontmatterEditor = ({ yaml, onChange }) => {
+  const [expanded, setExpanded] = React__default.useState(true);
+  const yamlConfig = React__default.useMemo(() => {
+    if (!yaml) {
+      return [];
+    }
+    return Object.entries(YamlParser.load(yaml)).map(([key, value]) => ({ key, value }));
+  }, [yaml]);
+  const { register, control, watch } = useForm({
+    defaultValues: {
+      yamlConfig
+    }
+  });
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "yamlConfig"
+  });
+  React__default.useEffect(() => {
+    const subscription = watch(({ yamlConfig: yamlConfig2 }) => {
+      const yaml2 = yamlConfig2.reduce((acc, { key, value }) => {
+        if (key && value) {
+          acc[key] = value;
+        }
+        return acc;
+      }, {});
+      onChange(YamlParser.dump(yaml2).trim());
+    });
+    return () => subscription.unsubscribe();
+  }, [watch, onChange]);
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.frontmatterWrapper, "data-expanded": expanded, "data-editor-type": "frontmatter" }, /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      className: styles.frontmatterToggleButton,
+      onClick: (e) => {
+        e.preventDefault();
+        setExpanded((v) => !v);
+      }
+    },
+    expanded ? /* @__PURE__ */ React__default.createElement(ArrowDown, null) : /* @__PURE__ */ React__default.createElement(ArrowRight, null),
+    "Document frontmatter"
+  ), expanded && /* @__PURE__ */ React__default.createElement("form", null, /* @__PURE__ */ React__default.createElement("table", { className: styles.frontmatterEditorTable }, /* @__PURE__ */ React__default.createElement("colgroup", null, /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null)), /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null, "Key"), /* @__PURE__ */ React__default.createElement("th", null, "Value"), /* @__PURE__ */ React__default.createElement("th", null))), /* @__PURE__ */ React__default.createElement("tbody", null, fields.map((item, index) => {
+    return /* @__PURE__ */ React__default.createElement("tr", { key: item.id }, /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(TableInput, { ...register(`yamlConfig.${index}.key`, { required: true }), autofocusIfEmpty: true })), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(TableInput, { ...register(`yamlConfig.${index}.value`, { required: true }) })), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement("button", { type: "button", onClick: () => remove(index), className: styles.iconButton }, /* @__PURE__ */ React__default.createElement(DeleteIcon, null))));
+  })), /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      className: styles.primaryButton,
+      type: "button",
+      onClick: () => {
+        append({ key: "", value: "" });
+      }
+    },
+    "Add new key"
+  )))))));
+};
+const TableInput = React__default.forwardRef(({ className, autofocusIfEmpty, ...props }, ref) => {
+  props.autoFocus = Boolean(!props.value && autofocusIfEmpty);
+  return /* @__PURE__ */ React__default.createElement("input", { className: classNames(styles.frontmatterInput, className), ...props, ref });
+});
+export {
+  FrontmatterEditor
+};

package/dist/FrontmatterEditor-bd112c96.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("js-yaml"),t=require("react"),r=require("react-hook-form"),l=require("classnames"),a=require("./index-731c8e58.cjs");function i(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const r in e)if("default"!==r){const l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:()=>e[r]})}return t.default=e,Object.freeze(t)}require("@lexical/react/LexicalComposer"),require("@lexical/react/LexicalContentEditable"),require("@lexical/react/LexicalErrorBoundary"),require("@lexical/react/LexicalHorizontalRulePlugin"),require("@lexical/react/LexicalLinkPlugin"),require("@lexical/react/LexicalListPlugin"),require("@lexical/react/LexicalRichTextPlugin"),require("@lexical/react/LexicalTabIndentationPlugin"),require("lexical"),require("@lexical/code"),require("@lexical/link"),require("@lexical/list"),require("@lexical/react/LexicalHorizontalRuleNode"),require("@lexical/rich-text"),require("mdast-util-directive"),require("mdast-util-from-markdown"),require("mdast-util-frontmatter"),require("mdast-util-gfm-table"),require("mdast-util-mdx"),require("micromark-extension-directive"),require("micromark-extension-frontmatter"),require("micromark-extension-gfm-table"),require("micromark-extension-mdxjs"),require("@lexical/utils"),require("@lexical/react/LexicalComposerContext"),require("@lexical/selection"),require("@lexical/react/LexicalHistoryPlugin"),require("mdast-util-to-markdown"),require("@radix-ui/react-popover"),require("@radix-ui/react-tooltip"),require("downshift"),require("@lexical/markdown"),require("@lexical/react/LexicalMarkdownShortcutPlugin"),require("@codemirror/lang-markdown"),require("@codesandbox/sandpack-react"),require("react-diff-view"),require("unidiff"),require("@radix-ui/react-toolbar"),require("@radix-ui/react-select"),require("@radix-ui/react-dialog");const n=i(t),c=e=>n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24",...e},n.createElement("mask",{id:"a",width:24,height:24,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},n.createElement("path",{d:"M0 0h24v24H0z"})),n.createElement("g",{mask:"url(#a)"},n.createElement("path",{d:"M10 17V7l5 5-5 5Z"}))),u=e=>n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24",...e},n.createElement("mask",{id:"a",width:24,height:24,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},n.createElement("path",{d:"M0 0h24v24H0z"})),n.createElement("g",{mask:"url(#a)"},n.createElement("path",{d:"m12 15-5-5h10l-5 5Z"}))),o=e=>n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 0 20 20",...e},n.createElement("mask",{id:"a",width:20,height:20,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},n.createElement("path",{d:"M0 0h20v20H0z"})),n.createElement("g",{mask:"url(#a)"},n.createElement("path",{d:"M5 17V6.5H4V5h4V4h4v1h4v1.5h-1V17H5Zm1.5-1.5h7v-9h-7v9ZM8 14h1.5V8H8v6Zm2.5 0H12V8h-1.5v6Z"}))),m=t.forwardRef((({className:e,autofocusIfEmpty:r,...i},n)=>(i.autoFocus=Boolean(!i.value&&r),t.createElement("input",{className:l(a.styles.frontmatterInput,e),...i,ref:n}))));exports.FrontmatterEditor=({yaml:l,onChange:i})=>{const[n,s]=t.useState(!0),d=t.useMemo((()=>l?Object.entries(e.load(l)).map((([e,t])=>({key:e,value:t}))):[]),[l]),{register:x,control:h,watch:E}=r.useForm({defaultValues:{yamlConfig:d}}),{fields:f,append:p,remove:q}=r.useFieldArray({control:h,name:"yamlConfig"});return t.useEffect((()=>{const t=E((({yamlConfig:t})=>{const r=t.reduce(((e,{key:t,value:r})=>(t&&r&&(e[t]=r),e)),{});i(e.dump(r).trim())}));return()=>t.unsubscribe()}),[E,i]),t.createElement("div",{className:a.styles.frontmatterWrapper,"data-expanded":n,"data-editor-type":"frontmatter"},t.createElement("button",{className:a.styles.frontmatterToggleButton,onClick:e=>{e.preventDefault(),s((e=>!e))}},n?t.createElement(u,null):t.createElement(c,null),"Document frontmatter"),n&&t.createElement("form",null,t.createElement("table",{className:a.styles.frontmatterEditorTable},t.createElement("colgroup",null,t.createElement("col",null),t.createElement("col",null),t.createElement("col",null)),t.createElement("thead",null,t.createElement("tr",null,t.createElement("th",null,"Key"),t.createElement("th",null,"Value"),t.createElement("th",null))),t.createElement("tbody",null,f.map(((e,r)=>t.createElement("tr",{key:e.id},t.createElement("td",null,t.createElement(m,{...x(`yamlConfig.${r}.key`,{required:!0}),autofocusIfEmpty:!0})),t.createElement("td",null,t.createElement(m,{...x(`yamlConfig.${r}.value`,{required:!0})})),t.createElement("td",null,t.createElement("button",{type:"button",onClick:()=>q(r),className:a.styles.iconButton},t.createElement(o,null))))))),t.createElement("tfoot",null,t.createElement("tr",null,t.createElement("td",null,t.createElement("button",{className:a.styles.primaryButton,type:"button",onClick:()=>{p({key:"",value:""})}},"Add new key")))))))};

package/dist/JsxEditor-4511b188.js

@@ -0,0 +1,110 @@
+import * as React from "react";
+import React__default from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import * as RadixPopover from "@radix-ui/react-popover";
+import { useForm } from "react-hook-form";
+import { u as useEmitterValues } from "./index-11db5fbf.js";
+import "@lexical/react/LexicalComposer";
+import "@lexical/react/LexicalHorizontalRulePlugin";
+import "@lexical/react/LexicalLinkPlugin";
+import "@lexical/react/LexicalListPlugin";
+import "@lexical/react/LexicalTabIndentationPlugin";
+import "classnames";
+import "lexical";
+import "@lexical/code";
+import "@lexical/link";
+import "@lexical/list";
+import "@lexical/react/LexicalHorizontalRuleNode";
+import "@lexical/rich-text";
+import "mdast-util-directive";
+import "mdast-util-from-markdown";
+import "mdast-util-frontmatter";
+import "mdast-util-gfm-table";
+import "mdast-util-mdx";
+import "micromark-extension-directive";
+import "micromark-extension-frontmatter";
+import "micromark-extension-gfm-table";
+import "micromark-extension-mdxjs";
+import "@lexical/utils";
+import "@lexical/selection";
+import "@lexical/react/LexicalHistoryPlugin";
+import "mdast-util-to-markdown";
+import "@radix-ui/react-tooltip";
+import "downshift";
+import "@lexical/markdown";
+import "@lexical/react/LexicalMarkdownShortcutPlugin";
+import "@codemirror/lang-markdown";
+import "@codesandbox/sandpack-react";
+import "react-diff-view";
+import "unidiff";
+import "@radix-ui/react-toolbar";
+import "@radix-ui/react-select";
+import "@radix-ui/react-dialog";
+const SvgSettings = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 24, height: 24, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+  maskType: "alpha"
+} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h24v24H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "m9.25 22-.4-3.2a3.79 3.79 0 0 1-.613-.3 8.266 8.266 0 0 1-.562-.375L4.7 19.375l-2.75-4.75 2.575-1.95a2.387 2.387 0 0 1-.025-.338v-.675c0-.108.008-.22.025-.337L1.95 9.375l2.75-4.75 2.975 1.25c.183-.133.375-.258.575-.375.2-.117.4-.217.6-.3l.4-3.2h5.5l.4 3.2c.217.083.42.183.612.3.192.117.38.242.563.375l2.975-1.25 2.75 4.75-2.575 1.95c.017.117.025.23.025.338v.675c0 .108-.017.22-.05.337l2.575 1.95-2.75 4.75-2.95-1.25a6.842 6.842 0 0 1-.575.375c-.2.117-.4.217-.6.3l-.4 3.2h-5.5Zm2.8-6.5c.967 0 1.792-.342 2.475-1.025A3.372 3.372 0 0 0 15.55 12c0-.967-.342-1.792-1.025-2.475A3.373 3.373 0 0 0 12.05 8.5c-.983 0-1.813.342-2.488 1.025A3.393 3.393 0 0 0 8.55 12c0 .967.337 1.792 1.012 2.475.676.683 1.505 1.025 2.488 1.025Zm0-2c-.417 0-.77-.146-1.063-.438A1.446 1.446 0 0 1 10.55 12c0-.417.146-.77.438-1.063a1.446 1.446 0 0 1 1.062-.437c.417 0 .77.146 1.063.438.291.291.437.645.437 1.062 0 .417-.146.77-.438 1.063a1.447 1.447 0 0 1-1.062.437ZM11 20h1.975l.35-2.65a5.61 5.61 0 0 0 1.438-.588c.441-.258.845-.57 1.212-.937l2.475 1.025.975-1.7-2.15-1.625c.083-.233.142-.48.175-.738a6.153 6.153 0 0 0 0-1.575 3.535 3.535 0 0 0-.175-.737l2.15-1.625-.975-1.7-2.475 1.05a5.556 5.556 0 0 0-1.213-.962 5.607 5.607 0 0 0-1.437-.588L13 4h-1.975l-.35 2.65c-.517.133-.996.33-1.438.587a6.015 6.015 0 0 0-1.212.938L5.55 7.15l-.975 1.7 2.15 1.6c-.083.25-.142.5-.175.75a6.122 6.122 0 0 0 0 1.575c.033.25.092.5.175.75l-2.15 1.625.975 1.7 2.475-1.05c.367.383.77.704 1.212.962.442.259.921.455 1.438.588L11 20Z" })));
+const SettingsIcon = SvgSettings;
+const PopoverContent = React__default.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React__default.createElement(RadixPopover.Content, { ...props, className: "", ref });
+  }
+);
+const PopoverTrigger = React__default.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React__default.createElement(RadixPopover.Trigger, { ...props, className: "", ref });
+  }
+);
+function JsxEditor({ kind, attributes, componentName, editor, onSubmit, theme }) {
+  if (kind === "flow") {
+    return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", null, componentName), /* @__PURE__ */ React__default.createElement(LexicalNestedComposer, { initialEditor: editor, initialTheme: theme }, /* @__PURE__ */ React__default.createElement(RichTextPlugin, { contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, null), placeholder: /* @__PURE__ */ React__default.createElement("div", null, "Type here.."), ErrorBoundary: LexicalErrorBoundary })));
+  }
+  return /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(InlineJsxComponent, { attributes, componentName, onSubmit })), /* @__PURE__ */ React__default.createElement("span", null, componentName, /* @__PURE__ */ React__default.createElement(LexicalNestedComposer, { initialEditor: editor, initialTheme: theme }, /* @__PURE__ */ React__default.createElement(
+    RichTextPlugin,
+    {
+      contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, { style: { padding: 5, border: "1px solid red" } }),
+      placeholder: /* @__PURE__ */ React__default.createElement("div", null, "Type here.."),
+      ErrorBoundary: LexicalErrorBoundary
+    }
+  ))));
+}
+const InlineJsxComponent = ({ attributes, componentName, onSubmit }) => {
+  const [open, setOpen] = React__default.useState(false);
+  const decoratedOnSubmit = React__default.useCallback(
+    (values) => {
+      onSubmit(values);
+      setOpen(false);
+    },
+    [onSubmit]
+  );
+  return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, { open, onOpenChange: (v) => setOpen(v) }, /* @__PURE__ */ React__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React__default.createElement(SettingsIcon, null)), /* @__PURE__ */ React__default.createElement(RadixPopover.Portal, null, /* @__PURE__ */ React__default.createElement(PopoverContent, null, /* @__PURE__ */ React__default.createElement(JsxPropertyPanel, { attributes, componentName, onSubmit: decoratedOnSubmit }))));
+};
+const JsxPropertyPanel = ({ attributes, componentName, onSubmit }) => {
+  const [jsxComponentDescriptors] = useEmitterValues("jsxComponentDescriptors");
+  const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === componentName);
+  const [editor] = useLexicalComposerContext();
+  const { register, handleSubmit } = useForm({
+    defaultValues: attributes.reduce((acc, attribute) => {
+      acc[attribute.name] = attribute.value;
+      return acc;
+    }, {})
+  });
+  return /* @__PURE__ */ React__default.createElement(
+    "form",
+    {
+      onSubmit: handleSubmit((data) => {
+        editor.update(() => {
+          onSubmit(data);
+        });
+      })
+    },
+    /* @__PURE__ */ React__default.createElement("table", null, /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null, "Attribute"), /* @__PURE__ */ React__default.createElement("th", null, "Value"))), /* @__PURE__ */ React__default.createElement("tbody", null, descriptor.props.map((propDescriptor) => /* @__PURE__ */ React__default.createElement("tr", { key: propDescriptor.name }, /* @__PURE__ */ React__default.createElement("td", null, " ", propDescriptor.name, " "), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement("input", { ...register(propDescriptor.name) })))))),
+    /* @__PURE__ */ React__default.createElement("button", { type: "submit" }, "Submit")
+  );
+};
+export {
+  JsxEditor
+};

package/dist/JsxEditor-85e636d6.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("@lexical/react/LexicalComposerContext"),r=require("@lexical/react/LexicalContentEditable"),l=require("@lexical/react/LexicalErrorBoundary"),a=require("@lexical/react/LexicalNestedComposer"),i=require("@lexical/react/LexicalRichTextPlugin"),n=require("@radix-ui/react-popover"),c=require("react-hook-form"),u=require("./index-731c8e58.cjs");function o(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const r in e)if("default"!==r){const l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:()=>e[r]})}return t.default=e,Object.freeze(t)}require("@lexical/react/LexicalComposer"),require("@lexical/react/LexicalHorizontalRulePlugin"),require("@lexical/react/LexicalLinkPlugin"),require("@lexical/react/LexicalListPlugin"),require("@lexical/react/LexicalTabIndentationPlugin"),require("classnames"),require("lexical"),require("@lexical/code"),require("@lexical/link"),require("@lexical/list"),require("@lexical/react/LexicalHorizontalRuleNode"),require("@lexical/rich-text"),require("mdast-util-directive"),require("mdast-util-from-markdown"),require("mdast-util-frontmatter"),require("mdast-util-gfm-table"),require("mdast-util-mdx"),require("micromark-extension-directive"),require("micromark-extension-frontmatter"),require("micromark-extension-gfm-table"),require("micromark-extension-mdxjs"),require("@lexical/utils"),require("@lexical/selection"),require("@lexical/react/LexicalHistoryPlugin"),require("mdast-util-to-markdown"),require("@radix-ui/react-tooltip"),require("downshift"),require("@lexical/markdown"),require("@lexical/react/LexicalMarkdownShortcutPlugin"),require("@codemirror/lang-markdown"),require("@codesandbox/sandpack-react"),require("react-diff-view"),require("unidiff"),require("@radix-ui/react-toolbar"),require("@radix-ui/react-select"),require("@radix-ui/react-dialog");const m=o(e),s=o(n),d=e=>m.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24",...e},m.createElement("mask",{id:"a",width:24,height:24,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},m.createElement("path",{d:"M0 0h24v24H0z"})),m.createElement("g",{mask:"url(#a)"},m.createElement("path",{d:"m9.25 22-.4-3.2a3.79 3.79 0 0 1-.613-.3 8.266 8.266 0 0 1-.562-.375L4.7 19.375l-2.75-4.75 2.575-1.95a2.387 2.387 0 0 1-.025-.338v-.675c0-.108.008-.22.025-.337L1.95 9.375l2.75-4.75 2.975 1.25c.183-.133.375-.258.575-.375.2-.117.4-.217.6-.3l.4-3.2h5.5l.4 3.2c.217.083.42.183.612.3.192.117.38.242.563.375l2.975-1.25 2.75 4.75-2.575 1.95c.017.117.025.23.025.338v.675c0 .108-.017.22-.05.337l2.575 1.95-2.75 4.75-2.95-1.25a6.842 6.842 0 0 1-.575.375c-.2.117-.4.217-.6.3l-.4 3.2h-5.5Zm2.8-6.5c.967 0 1.792-.342 2.475-1.025A3.372 3.372 0 0 0 15.55 12c0-.967-.342-1.792-1.025-2.475A3.373 3.373 0 0 0 12.05 8.5c-.983 0-1.813.342-2.488 1.025A3.393 3.393 0 0 0 8.55 12c0 .967.337 1.792 1.012 2.475.676.683 1.505 1.025 2.488 1.025Zm0-2c-.417 0-.77-.146-1.063-.438A1.446 1.446 0 0 1 10.55 12c0-.417.146-.77.438-1.063a1.446 1.446 0 0 1 1.062-.437c.417 0 .77.146 1.063.438.291.291.437.645.437 1.062 0 .417-.146.77-.438 1.063a1.447 1.447 0 0 1-1.062.437ZM11 20h1.975l.35-2.65a5.61 5.61 0 0 0 1.438-.588c.441-.258.845-.57 1.212-.937l2.475 1.025.975-1.7-2.15-1.625c.083-.233.142-.48.175-.738a6.153 6.153 0 0 0 0-1.575 3.535 3.535 0 0 0-.175-.737l2.15-1.625-.975-1.7-2.475 1.05a5.556 5.556 0 0 0-1.213-.962 5.607 5.607 0 0 0-1.437-.588L13 4h-1.975l-.35 2.65c-.517.133-.996.33-1.438.587a6.015 6.015 0 0 0-1.212.938L5.55 7.15l-.975 1.7 2.15 1.6c-.083.25-.142.5-.175.75a6.122 6.122 0 0 0 0 1.575c.033.25.092.5.175.75l-2.15 1.625.975 1.7 2.475-1.05c.367.383.77.704 1.212.962.442.259.921.455 1.438.588L11 20Z"}))),x=e.forwardRef(((t,r)=>e.createElement(s.Content,{...t,className:"",ref:r}))),E=e.forwardRef(((t,r)=>e.createElement(s.Trigger,{...t,className:"",ref:r})));const p=({attributes:t,componentName:r,onSubmit:l})=>{const[a,i]=e.useState(!1),n=e.useCallback((e=>{l(e),i(!1)}),[l]);return e.createElement(s.Root,{open:a,onOpenChange:e=>i(e)},e.createElement(E,null,e.createElement(d,null)),e.createElement(s.Portal,null,e.createElement(x,null,e.createElement(q,{attributes:t,componentName:r,onSubmit:n}))))},q=({attributes:r,componentName:l,onSubmit:a})=>{const[i]=u.useEmitterValues("jsxComponentDescriptors"),n=i.find((e=>e.name===l)),[o]=t.useLexicalComposerContext(),{register:m,handleSubmit:s}=c.useForm({defaultValues:r.reduce(((e,t)=>(e[t.name]=t.value,e)),{})});return e.createElement("form",{onSubmit:s((e=>{o.update((()=>{a(e)}))}))},e.createElement("table",null,e.createElement("thead",null,e.createElement("tr",null,e.createElement("th",null,"Attribute"),e.createElement("th",null,"Value"))),e.createElement("tbody",null,n.props.map((t=>e.createElement("tr",{key:t.name},e.createElement("td",null," ",t.name," "),e.createElement("td",null,e.createElement("input",{...m(t.name)}))))))),e.createElement("button",{type:"submit"},"Submit"))};exports.JsxEditor=function({kind:t,attributes:n,componentName:c,editor:u,onSubmit:o,theme:m}){return"flow"===t?e.createElement("div",null,e.createElement("div",null,c),e.createElement(a.LexicalNestedComposer,{initialEditor:u,initialTheme:m},e.createElement(i.RichTextPlugin,{contentEditable:e.createElement(r.ContentEditable,null),placeholder:e.createElement("div",null,"Type here.."),ErrorBoundary:l}))):e.createElement("span",null,e.createElement("span",null,e.createElement(p,{attributes:n,componentName:c,onSubmit:o})),e.createElement("span",null,c,e.createElement(a.LexicalNestedComposer,{initialEditor:u,initialTheme:m},e.createElement(i.RichTextPlugin,{contentEditable:e.createElement(r.ContentEditable,{style:{padding:5,border:"1px solid red"}}),placeholder:e.createElement("div",null,"Type here.."),ErrorBoundary:l}))))};

package/dist/SandpackEditor-04d3c3ce.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@codesandbox/sandpack-react"),r=require("@lexical/react/LexicalComposerContext"),i=require("react"),a=require("./index-731c8e58.cjs"),t=require("./useCodeMirrorRef-cba12130.cjs");require("@lexical/react/LexicalComposer"),require("@lexical/react/LexicalContentEditable"),require("@lexical/react/LexicalErrorBoundary"),require("@lexical/react/LexicalHorizontalRulePlugin"),require("@lexical/react/LexicalLinkPlugin"),require("@lexical/react/LexicalListPlugin"),require("@lexical/react/LexicalRichTextPlugin"),require("@lexical/react/LexicalTabIndentationPlugin"),require("classnames"),require("lexical"),require("@lexical/code"),require("@lexical/link"),require("@lexical/list"),require("@lexical/react/LexicalHorizontalRuleNode"),require("@lexical/rich-text"),require("mdast-util-directive"),require("mdast-util-from-markdown"),require("mdast-util-frontmatter"),require("mdast-util-gfm-table"),require("mdast-util-mdx"),require("micromark-extension-directive"),require("micromark-extension-frontmatter"),require("micromark-extension-gfm-table"),require("micromark-extension-mdxjs"),require("@lexical/utils"),require("@lexical/selection"),require("@lexical/react/LexicalHistoryPlugin"),require("mdast-util-to-markdown"),require("@radix-ui/react-popover"),require("@radix-ui/react-tooltip"),require("downshift"),require("@lexical/markdown"),require("@lexical/react/LexicalMarkdownShortcutPlugin"),require("@codemirror/lang-markdown"),require("react-diff-view"),require("unidiff"),require("@radix-ui/react-toolbar"),require("@radix-ui/react-select"),require("@radix-ui/react-dialog");const l=({onChange:r,snippetFileName:i})=>{const{sandpack:a}=e.useSandpack();return r(a.files[i].code),null};exports.SandpackEditor=({nodeKey:c,code:n,meta:u,onChange:o,focusEmitter:s})=>{const[d]=r.useLexicalComposerContext(),[m]=a.useEmitterValues("sandpackConfig"),x=t.useCodeMirrorRef(c,"sandpack","jsx"),q=a.usePublisher("activeEditorType");i.useEffect((()=>{s.subscribe((()=>{var e,r;null==(r=null==(e=null==x?void 0:x.current)?void 0:e.getCodemirror())||r.focus(),q({type:"sandpack",nodeKey:c})}))}),[s,x,q,c]);const p=i.useCallback((e=>{d.update((()=>{o(e)}))}),[o,d]),f=function(e,r){return r.presets.find((r=>r.meta===e))||r.presets.find((e=>e.name===r.defaultPreset))}(u,m);if(!f)throw new Error(`No sandpack preset found for meta: ${u}`);return i.createElement(e.SandpackProvider,{template:f.sandpackTemplate,theme:f.sandpackTheme,files:{[f.snippetFileName]:n,...Object.entries(f.files||{}).reduce(((e,[r,i])=>({...e,[r]:{code:i,readOnly:!0}})),{})},customSetup:{dependencies:f.dependencies}},i.createElement(e.SandpackLayout,null,i.createElement(e.SandpackCodeEditor,{showLineNumbers:!0,showInlineErrors:!0,ref:x}),i.createElement(e.SandpackPreview,null)),i.createElement(l,{onChange:p,snippetFileName:f.snippetFileName}))};

package/dist/SandpackEditor-0a3bfaf0.js

@@ -0,0 +1,99 @@
+import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview, useSandpack } from "@codesandbox/sandpack-react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import React__default from "react";
+import { u as useEmitterValues, a as usePublisher } from "./index-11db5fbf.js";
+import { u as useCodeMirrorRef } from "./useCodeMirrorRef-89746e60.js";
+import "@lexical/react/LexicalComposer";
+import "@lexical/react/LexicalContentEditable";
+import "@lexical/react/LexicalErrorBoundary";
+import "@lexical/react/LexicalHorizontalRulePlugin";
+import "@lexical/react/LexicalLinkPlugin";
+import "@lexical/react/LexicalListPlugin";
+import "@lexical/react/LexicalRichTextPlugin";
+import "@lexical/react/LexicalTabIndentationPlugin";
+import "classnames";
+import "lexical";
+import "@lexical/code";
+import "@lexical/link";
+import "@lexical/list";
+import "@lexical/react/LexicalHorizontalRuleNode";
+import "@lexical/rich-text";
+import "mdast-util-directive";
+import "mdast-util-from-markdown";
+import "mdast-util-frontmatter";
+import "mdast-util-gfm-table";
+import "mdast-util-mdx";
+import "micromark-extension-directive";
+import "micromark-extension-frontmatter";
+import "micromark-extension-gfm-table";
+import "micromark-extension-mdxjs";
+import "@lexical/utils";
+import "@lexical/selection";
+import "@lexical/react/LexicalHistoryPlugin";
+import "mdast-util-to-markdown";
+import "@radix-ui/react-popover";
+import "@radix-ui/react-tooltip";
+import "downshift";
+import "@lexical/markdown";
+import "@lexical/react/LexicalMarkdownShortcutPlugin";
+import "@codemirror/lang-markdown";
+import "react-diff-view";
+import "unidiff";
+import "@radix-ui/react-toolbar";
+import "@radix-ui/react-select";
+import "@radix-ui/react-dialog";
+const CodeUpdateEmitter = ({ onChange, snippetFileName }) => {
+  const { sandpack } = useSandpack();
+  onChange(sandpack.files[snippetFileName].code);
+  return null;
+};
+function getPresetOrDefault(meta, config) {
+  return config.presets.find((preset) => preset.meta === meta) || config.presets.find((preset) => preset.name === config.defaultPreset);
+}
+const SandpackEditor = ({ nodeKey, code, meta, onChange, focusEmitter }) => {
+  const [editor] = useLexicalComposerContext();
+  const [config] = useEmitterValues("sandpackConfig");
+  const codeMirrorRef = useCodeMirrorRef(nodeKey, "sandpack", "jsx");
+  const setActiveEditorType = usePublisher("activeEditorType");
+  React__default.useEffect(() => {
+    focusEmitter.subscribe(() => {
+      var _a, _b;
+      (_b = (_a = codeMirrorRef == null ? void 0 : codeMirrorRef.current) == null ? void 0 : _a.getCodemirror()) == null ? void 0 : _b.focus();
+      setActiveEditorType({ type: "sandpack", nodeKey });
+    });
+  }, [focusEmitter, codeMirrorRef, setActiveEditorType, nodeKey]);
+  const wrappedOnChange = React__default.useCallback(
+    (code2) => {
+      editor.update(() => {
+        onChange(code2);
+      });
+    },
+    [onChange, editor]
+  );
+  const preset = getPresetOrDefault(meta, config);
+  if (!preset) {
+    throw new Error(`No sandpack preset found for meta: ${meta}`);
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    SandpackProvider,
+    {
+      template: preset.sandpackTemplate,
+      theme: preset.sandpackTheme,
+      files: {
+        [preset.snippetFileName]: code,
+        ...Object.entries(preset.files || {}).reduce(
+          (acc, [filePath, fileContents]) => ({ ...acc, ...{ [filePath]: { code: fileContents, readOnly: true } } }),
+          {}
+        )
+      },
+      customSetup: {
+        dependencies: preset.dependencies
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(SandpackLayout, null, /* @__PURE__ */ React__default.createElement(SandpackCodeEditor, { showLineNumbers: true, showInlineErrors: true, ref: codeMirrorRef }), /* @__PURE__ */ React__default.createElement(SandpackPreview, null)),
+    /* @__PURE__ */ React__default.createElement(CodeUpdateEmitter, { onChange: wrappedOnChange, snippetFileName: preset.snippetFileName })
+  );
+};
+export {
+  SandpackEditor
+};