@mdxeditor/editor 3.0.7 → 3.1.0

package/dist/index.js

@@ -27,7 +27,7 @@ import { toolbarContents$, toolbarPlugin } from "./plugins/toolbar/index.js";
 import { cmExtensions$, diffMarkdown$, diffSourcePlugin, readOnlyDiff$ } from "./plugins/diff-source/index.js";
 import { markdownShortcutPlugin } from "./plugins/markdown-shortcut/index.js";
 import { BlockTypeSelect } from "./plugins/toolbar/components/BlockTypeSelect.js";
-import { BoldItalicUnderlineToggles } from "./plugins/toolbar/components/BoldItalicUnderlineToggles.js";
+import { BoldItalicUnderlineToggles, StrikeThroughSupSubToggles } from "./plugins/toolbar/components/BoldItalicUnderlineToggles.js";
 import { ChangeAdmonitionType, admonitionLabelsMap } from "./plugins/toolbar/components/ChangeAdmonitionType.js";
 import { ChangeCodeMirrorLanguage } from "./plugins/toolbar/components/ChangeCodeMirrorLanguage.js";
 import { CodeToggle } from "./plugins/toolbar/components/CodeToggle.js";
@@ -129,6 +129,7 @@ export {
   ShowSandpackInfo,
   SingleChoiceToggleGroup,
   SingleToggleGroup,
+  StrikeThroughSupSubToggles,
   TYPE_NAME,
   TableNode,
   ToggleSingleGroupWithItem,

package/dist/jsx-editors/GenericJsxEditor.js

@@ -3,7 +3,7 @@ import { useMdastNodeUpdater, NestedLexicalEditor } from "../plugins/core/Nested
 import { PropertyPopover } from "../plugins/core/PropertyPopover.js";
 import styles from "../styles/ui.module.css.js";
 const isExpressionValue = (value) => {
-  if (typeof value === "object" && value !== null && "type" in value && value.type === "mdxJsxAttributeValueExpression" && "value" in value && typeof value.value === "string") {
+  if (value !== null && typeof value === "object" && "type" in value && "value" in value && typeof value.value === "string") {
     return true;
   }
   return false;

package/dist/mdastUtilHtmlComment.js

@@ -12,10 +12,10 @@ function commentFromMarkdown(_options) {
     exit: {
       comment(token) {
         const text = this.resume();
-        if (_options == null ? void 0 : _options.ast) {
+        if (_options.ast) {
           this.enter(
             {
-              // @ts-expect-error: hush.
+              // @ts-expect-error: not typing this
               type: "comment",
               value: "",
               commentValue: text.slice(0, -2)

package/dist/node_modules/micromark-extension-gfm-strikethrough/lib/syntax.js

@@ -0,0 +1,114 @@
+import { splice } from "../../micromark-util-chunked/index.js";
+import { classifyCharacter } from "../../micromark-util-classify-character/index.js";
+import { resolveAll } from "../../micromark-util-resolve-all/index.js";
+function gfmStrikethrough(options) {
+  const options_ = options || {};
+  let single = options_.singleTilde;
+  const tokenizer = {
+    tokenize: tokenizeStrikethrough,
+    resolveAll: resolveAllStrikethrough
+  };
+  if (single === null || single === void 0) {
+    single = true;
+  }
+  return {
+    text: {
+      [126]: tokenizer
+    },
+    insideSpan: {
+      null: [tokenizer]
+    },
+    attentionMarkers: {
+      null: [126]
+    }
+  };
+  function resolveAllStrikethrough(events, context) {
+    let index = -1;
+    while (++index < events.length) {
+      if (events[index][0] === "enter" && events[index][1].type === "strikethroughSequenceTemporary" && events[index][1]._close) {
+        let open = index;
+        while (open--) {
+          if (events[open][0] === "exit" && events[open][1].type === "strikethroughSequenceTemporary" && events[open][1]._open && // If the sizes are the same:
+          events[index][1].end.offset - events[index][1].start.offset === events[open][1].end.offset - events[open][1].start.offset) {
+            events[index][1].type = "strikethroughSequence";
+            events[open][1].type = "strikethroughSequence";
+            const strikethrough = {
+              type: "strikethrough",
+              start: Object.assign({}, events[open][1].start),
+              end: Object.assign({}, events[index][1].end)
+            };
+            const text = {
+              type: "strikethroughText",
+              start: Object.assign({}, events[open][1].end),
+              end: Object.assign({}, events[index][1].start)
+            };
+            const nextEvents = [
+              ["enter", strikethrough, context],
+              ["enter", events[open][1], context],
+              ["exit", events[open][1], context],
+              ["enter", text, context]
+            ];
+            const insideSpan = context.parser.constructs.insideSpan.null;
+            if (insideSpan) {
+              splice(
+                nextEvents,
+                nextEvents.length,
+                0,
+                resolveAll(insideSpan, events.slice(open + 1, index), context)
+              );
+            }
+            splice(nextEvents, nextEvents.length, 0, [
+              ["exit", text, context],
+              ["enter", events[index][1], context],
+              ["exit", events[index][1], context],
+              ["exit", strikethrough, context]
+            ]);
+            splice(events, open - 1, index - open + 3, nextEvents);
+            index = open + nextEvents.length - 2;
+            break;
+          }
+        }
+      }
+    }
+    index = -1;
+    while (++index < events.length) {
+      if (events[index][1].type === "strikethroughSequenceTemporary") {
+        events[index][1].type = "data";
+      }
+    }
+    return events;
+  }
+  function tokenizeStrikethrough(effects, ok, nok) {
+    const previous = this.previous;
+    const events = this.events;
+    let size = 0;
+    return start;
+    function start(code) {
+      if (previous === 126 && events[events.length - 1][1].type !== "characterEscape") {
+        return nok(code);
+      }
+      effects.enter("strikethroughSequenceTemporary");
+      return more(code);
+    }
+    function more(code) {
+      const before = classifyCharacter(previous);
+      if (code === 126) {
+        if (size > 1)
+          return nok(code);
+        effects.consume(code);
+        size++;
+        return more;
+      }
+      if (size < 2 && !single)
+        return nok(code);
+      const token = effects.exit("strikethroughSequenceTemporary");
+      const after = classifyCharacter(code);
+      token._open = !after || after === 2 && Boolean(before);
+      token._close = !before || before === 2 && Boolean(after);
+      return ok(code);
+    }
+  }
+}
+export {
+  gfmStrikethrough
+};

package/dist/node_modules/micromark-util-chunked/index.js

@@ -0,0 +1,29 @@
+function splice(list, start, remove, items) {
+  const end = list.length;
+  let chunkStart = 0;
+  let parameters;
+  if (start < 0) {
+    start = -start > end ? 0 : end + start;
+  } else {
+    start = start > end ? end : start;
+  }
+  remove = remove > 0 ? remove : 0;
+  if (items.length < 1e4) {
+    parameters = Array.from(items);
+    parameters.unshift(start, remove);
+    list.splice(...parameters);
+  } else {
+    if (remove)
+      list.splice(start, remove);
+    while (chunkStart < items.length) {
+      parameters = items.slice(chunkStart, chunkStart + 1e4);
+      parameters.unshift(start, 0);
+      list.splice(...parameters);
+      chunkStart += 1e4;
+      start += 1e4;
+    }
+  }
+}
+export {
+  splice
+};

package/dist/node_modules/micromark-util-classify-character/index.js

@@ -0,0 +1,12 @@
+import { markdownLineEndingOrSpace, unicodeWhitespace, unicodePunctuation } from "micromark-util-character";
+function classifyCharacter(code) {
+  if (code === null || markdownLineEndingOrSpace(code) || unicodeWhitespace(code)) {
+    return 1;
+  }
+  if (unicodePunctuation(code)) {
+    return 2;
+  }
+}
+export {
+  classifyCharacter
+};

package/dist/node_modules/micromark-util-resolve-all/index.js

@@ -0,0 +1,15 @@
+function resolveAll(constructs, events, context) {
+  const called = [];
+  let index = -1;
+  while (++index < constructs.length) {
+    const resolve = constructs[index].resolveAll;
+    if (resolve && !called.includes(resolve)) {
+      events = resolve(events, context);
+      called.push(resolve);
+    }
+  }
+  return events;
+}
+export {
+  resolveAll
+};

package/dist/plugins/codeblock/index.js

@@ -21,12 +21,12 @@ const insertCodeBlock$ = Signal((r) => {
 const appendCodeBlockEditorDescriptor$ = Appender(codeBlockEditorDescriptors$);
 const codeBlockPlugin = realmPlugin({
   update(realm, params) {
-    realm.pub(defaultCodeBlockLanguage$, (params == null ? void 0 : params.defaultCodeBlockLanguage) || "");
+    realm.pub(defaultCodeBlockLanguage$, (params == null ? void 0 : params.defaultCodeBlockLanguage) ?? "");
   },
   init(realm, params) {
     realm.pubIn({
       [addActivePlugin$]: "codeblock",
-      [codeBlockEditorDescriptors$]: (params == null ? void 0 : params.codeBlockEditorDescriptors) || [],
+      [codeBlockEditorDescriptors$]: (params == null ? void 0 : params.codeBlockEditorDescriptors) ?? [],
       [addImportVisitor$]: MdastCodeVisitor,
       [addLexicalNode$]: CodeBlockNode,
       [addExportVisitor$]: CodeBlockVisitor

package/dist/plugins/codemirror/index.js

@@ -30,15 +30,15 @@ const codeMirrorPlugin = realmPlugin({
   update(r, params) {
     r.pubIn({
       [codeBlockLanguages$]: params == null ? void 0 : params.codeBlockLanguages,
-      [codeMirrorExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) || [],
+      [codeMirrorExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) ?? [],
       [codeMirrorAutoLoadLanguageSupport$]: (params == null ? void 0 : params.autoLoadLanguageSupport) ?? true
     });
   },
   init(r, params) {
     r.pubIn({
       [codeBlockLanguages$]: params == null ? void 0 : params.codeBlockLanguages,
-      [codeMirrorExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) || [],
-      [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor((params == null ? void 0 : params.codeBlockLanguages) || {}),
+      [codeMirrorExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) ?? [],
+      [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor((params == null ? void 0 : params.codeBlockLanguages) ?? {}),
       [codeMirrorAutoLoadLanguageSupport$]: (params == null ? void 0 : params.autoLoadLanguageSupport) ?? true
     });
   }
@@ -46,7 +46,7 @@ const codeMirrorPlugin = realmPlugin({
 function buildCodeBlockDescriptor(codeBlockLanguages) {
   return {
     match(language, meta) {
-      return Boolean(codeBlockLanguages.hasOwnProperty(language || "")) && !Boolean(meta);
+      return Boolean(Object.hasOwn(codeBlockLanguages, language ?? "")) && !meta;
     },
     priority: 1,
     Editor: CodeMirrorEditor

package/dist/plugins/core/Icon.js

@@ -42,6 +42,9 @@ import SvgRichText from "../../icons/rich_text.svg.js";
 import SvgSettings from "../../icons/settings.svg.js";
 import SvgTable from "../../icons/table.svg.js";
 import SvgUndo from "../../icons/undo.svg.js";
+import SvgStrikethroughS from "../../icons/strikethrough_s.svg.js";
+import SvgSuperscript from "../../icons/superscript.svg.js";
+import SvgSubscript from "../../icons/subscript.svg.js";
 const IconMap = {
   add_column: SvgAddColumn,
   add_photo: SvgAddPhoto,
@@ -84,6 +87,9 @@ const IconMap = {
   redo: SvgRedo,
   rich_text: SvgRichText,
   settings: SvgSettings,
+  strikeThrough: SvgStrikethroughS,
+  subscript: SvgSubscript,
+  superscript: SvgSuperscript,
   table: SvgTable,
   undo: SvgUndo
 };

package/dist/plugins/core/LexicalTextVisitor.js

@@ -1,15 +1,16 @@
 import { $isTextNode } from "lexical";
-import { IS_CODE, IS_ITALIC, IS_BOLD, IS_UNDERLINE } from "../../FormatConstants.js";
+import { IS_ITALIC, IS_BOLD, IS_UNDERLINE, IS_STRIKETHROUGH, IS_SUPERSCRIPT, IS_SUBSCRIPT, IS_CODE } from "../../FormatConstants.js";
 function isMdastText(mdastNode) {
   return mdastNode.type === "text";
 }
-const JOINABLE_TAGS = ["u", "span"];
+const JOINABLE_TAGS = ["u", "span", "sub", "sup"];
 const LexicalTextVisitor = {
   shouldJoin: (prevNode, currentNode) => {
     if (["text", "emphasis", "strong"].includes(prevNode.type)) {
       return prevNode.type === currentNode.type;
     }
-    if (prevNode.type === "mdxJsxTextElement" && currentNode.type === "mdxJsxTextElement" && JOINABLE_TAGS.includes(currentNode.name)) {
+    if (prevNode.type === "mdxJsxTextElement" && // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    currentNode.type === "mdxJsxTextElement" && JOINABLE_TAGS.includes(currentNode.name)) {
       const currentMdxNode = currentNode;
       return prevNode.name === currentMdxNode.name && JSON.stringify(prevNode.attributes) === JSON.stringify(currentMdxNode.attributes);
     }
@@ -33,14 +34,8 @@ const LexicalTextVisitor = {
     const previousSibling = lexicalNode.getPreviousSibling();
     const prevFormat = $isTextNode(previousSibling) ? previousSibling.getFormat() : 0;
     const textContent = lexicalNode.getTextContent();
-    const format = lexicalNode.getFormat() ?? 0;
+    const format = lexicalNode.getFormat();
     const style = lexicalNode.getStyle();
-    if (format & IS_CODE) {
-      actions.addAndStepInto("inlineCode", {
-        value: textContent
-      });
-      return;
-    }
     let localParentNode = mdastParent;
     if (style) {
       localParentNode = actions.appendToParent(localParentNode, {
@@ -70,6 +65,28 @@ const LexicalTextVisitor = {
         attributes: []
       });
     }
+    if (prevFormat & format & IS_STRIKETHROUGH) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "delete",
+        children: []
+      });
+    }
+    if (prevFormat & format & IS_SUPERSCRIPT) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "sup",
+        children: [],
+        attributes: []
+      });
+    }
+    if (prevFormat & format & IS_SUBSCRIPT) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "sub",
+        children: [],
+        attributes: []
+      });
+    }
     if (format & IS_ITALIC && !(prevFormat & IS_ITALIC)) {
       localParentNode = actions.appendToParent(localParentNode, {
         type: "emphasis",
@@ -90,6 +107,35 @@ const LexicalTextVisitor = {
         attributes: []
       });
     }
+    if (format & IS_STRIKETHROUGH && !(prevFormat & IS_STRIKETHROUGH)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "delete",
+        children: []
+      });
+    }
+    if (format & IS_SUPERSCRIPT && !(prevFormat & IS_SUPERSCRIPT)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "sup",
+        children: [],
+        attributes: []
+      });
+    }
+    if (format & IS_SUBSCRIPT && !(prevFormat & IS_SUBSCRIPT)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "sub",
+        children: [],
+        attributes: []
+      });
+    }
+    if (format & IS_CODE) {
+      actions.appendToParent(localParentNode, {
+        type: "inlineCode",
+        value: textContent
+      });
+      return;
+    }
     actions.appendToParent(localParentNode, {
       type: "text",
       value: textContent

package/dist/plugins/core/MdastFormattingVisitor.js

@@ -1,36 +1,72 @@
-import { IS_UNDERLINE, IS_ITALIC, IS_BOLD } from "../../FormatConstants.js";
-function isOpeningUnderlineNode(node) {
-  return node.type === "html" && node.value === "<u>";
-}
-function isClosingUnderlineNode(node) {
-  return node.type === "html" && node.value === "</u>";
-}
-function isJsxUnderlineNode(node) {
-  return node.type === "mdxJsxTextElement" && node.name === "u";
-}
-const MdastFormattingVisitor = {
-  testNode(mdastNode) {
-    return mdastNode.type === "emphasis" || mdastNode.type === "strong" || isJsxUnderlineNode(mdastNode) || isOpeningUnderlineNode(mdastNode) || isClosingUnderlineNode(mdastNode);
-  },
-  visitNode({ mdastNode, lexicalParent, actions, mdastParent }) {
-    if (isOpeningUnderlineNode(mdastNode)) {
-      actions.removeFormatting(IS_UNDERLINE, mdastParent);
-      return;
-    }
-    if (isClosingUnderlineNode(mdastNode)) {
-      actions.removeFormatting(IS_UNDERLINE, mdastParent);
-      return;
-    }
-    if (mdastNode.type === "emphasis") {
-      actions.addFormatting(IS_ITALIC);
-    } else if (mdastNode.type === "strong") {
-      actions.addFormatting(IS_BOLD);
-    } else if (isJsxUnderlineNode(mdastNode)) {
-      actions.addFormatting(IS_UNDERLINE);
+import { IS_STRIKETHROUGH, IS_CODE, IS_ITALIC, IS_BOLD, IS_UNDERLINE, IS_SUPERSCRIPT, IS_SUBSCRIPT } from "../../FormatConstants.js";
+import { $createTextNode } from "lexical";
+function buildFormattingVisitors(tag, format) {
+  return [
+    {
+      testNode: (node) => node.type === "mdxJsxTextElement" && node.name === tag,
+      visitNode({ actions, mdastNode, lexicalParent }) {
+        actions.addFormatting(format);
+        actions.visitChildren(mdastNode, lexicalParent);
+      }
+    },
+    {
+      testNode: (node) => node.type === "html" && node.value === `<${tag}>`,
+      visitNode({ actions, mdastParent }) {
+        actions.addFormatting(format, mdastParent);
+      }
+    },
+    {
+      testNode: (node) => node.type === "html" && node.value === `</${tag}>`,
+      visitNode({ actions, mdastParent }) {
+        actions.removeFormatting(format, mdastParent);
+      }
     }
+  ];
+}
+const StrikeThroughVisitor = {
+  testNode: "delete",
+  visitNode({ mdastNode, actions, lexicalParent }) {
+    actions.addFormatting(IS_STRIKETHROUGH);
+    actions.visitChildren(mdastNode, lexicalParent);
+  }
+};
+const MdCodeVisitor = {
+  testNode: "inlineCode",
+  visitNode({ mdastNode, actions }) {
+    actions.addAndStepInto($createTextNode(mdastNode.value).setFormat(actions.getParentFormatting() | IS_CODE));
+  }
+};
+const MdEmphasisVisitor = {
+  testNode: "emphasis",
+  visitNode({ mdastNode, actions, lexicalParent }) {
+    actions.addFormatting(IS_ITALIC);
+    actions.visitChildren(mdastNode, lexicalParent);
+  }
+};
+const MdStrongVisitor = {
+  testNode: "strong",
+  visitNode({ mdastNode, actions, lexicalParent }) {
+    actions.addFormatting(IS_BOLD);
     actions.visitChildren(mdastNode, lexicalParent);
   }
 };
+const formattingVisitors = [
+  // emphasis
+  MdEmphasisVisitor,
+  // strong
+  MdStrongVisitor,
+  // underline
+  ...buildFormattingVisitors("u", IS_UNDERLINE),
+  // code
+  ...buildFormattingVisitors("code", IS_CODE),
+  MdCodeVisitor,
+  // strikethrough
+  StrikeThroughVisitor,
+  // superscript
+  ...buildFormattingVisitors("sup", IS_SUPERSCRIPT),
+  // subscript
+  ...buildFormattingVisitors("sub", IS_SUBSCRIPT)
+];
 export {
-  MdastFormattingVisitor
+  formattingVisitors
 };

package/dist/plugins/core/MdastHTMLNode.js

@@ -1,7 +1,6 @@
 const MDX_NODE_TYPES = ["mdxJsxTextElement", "mdxJsxFlowElement"];
 function isMdastHTMLNode(node) {
-  var _a;
-  return MDX_NODE_TYPES.includes(node.type) && htmlTags.includes(((_a = node.name) == null ? void 0 : _a.toLowerCase()) ?? "");
+  return MDX_NODE_TYPES.includes(node.type) && htmlTags.includes(node.name.toLowerCase());
 }
 const htmlTags = [
   "a",

package/dist/plugins/core/NestedLexicalEditor.js

@@ -84,7 +84,7 @@ const NestedLexicalEditor = function(props) {
     return editor2;
   });
   React__default.useEffect(() => {
-    focusEmitter == null ? void 0 : focusEmitter.subscribe(() => {
+    focusEmitter.subscribe(() => {
       editor.focus();
     });
   }, [editor, focusEmitter]);

package/dist/plugins/core/PropertyPopover.js

@@ -9,31 +9,41 @@ const PropertyPopover = ({ title, properties, onChange }) => {
   const [open, setOpen] = React__default.useState(false);
   const iconComponentFor = useCellValue(iconComponentFor$);
   const { register, handleSubmit, reset } = useForm({ defaultValues: properties });
-  return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, { open, onOpenChange: (v) => setOpen(v) }, /* @__PURE__ */ React__default.createElement(RadixPopover.Trigger, { className: styles.iconButton }, /* @__PURE__ */ React__default.createElement("div", null, iconComponentFor("settings"))), /* @__PURE__ */ React__default.createElement(PopoverPortal, null, /* @__PURE__ */ React__default.createElement(PopoverContent, null, /* @__PURE__ */ React__default.createElement(
-    "form",
+  return /* @__PURE__ */ React__default.createElement(
+    RadixPopover.Root,
     {
-      onSubmit: (e) => {
-        void handleSubmit(onChange)(e);
-        setOpen(false);
-        e.preventDefault();
-        e.stopPropagation();
+      open,
+      onOpenChange: (v) => {
+        setOpen(v);
       }
     },
-    /* @__PURE__ */ React__default.createElement("h3", { className: styles.propertyPanelTitle }, title, " Attributes"),
-    /* @__PURE__ */ React__default.createElement("table", { className: styles.propertyEditorTable }, /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", { className: styles.readOnlyColumnCell }, "Attribute"), /* @__PURE__ */ React__default.createElement("th", null, "Value"))), /* @__PURE__ */ React__default.createElement("tbody", null, Object.keys(properties).map((propName) => /* @__PURE__ */ React__default.createElement("tr", { key: propName }, /* @__PURE__ */ React__default.createElement("th", { className: styles.readOnlyColumnCell }, " ", propName, " "), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement("input", { ...register(propName), className: styles.propertyEditorInput }))))), /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", { colSpan: 2 }, /* @__PURE__ */ React__default.createElement("div", { className: styles.buttonsFooter }, /* @__PURE__ */ React__default.createElement("button", { type: "submit", className: styles.primaryButton }, "Save"), /* @__PURE__ */ React__default.createElement(
-      "button",
+    /* @__PURE__ */ React__default.createElement(RadixPopover.Trigger, { className: styles.iconButton }, /* @__PURE__ */ React__default.createElement("div", null, iconComponentFor("settings"))),
+    /* @__PURE__ */ React__default.createElement(PopoverPortal, null, /* @__PURE__ */ React__default.createElement(PopoverContent, null, /* @__PURE__ */ React__default.createElement(
+      "form",
       {
-        type: "reset",
-        className: styles.secondaryButton,
-        onClick: (e) => {
-          e.preventDefault();
-          reset(properties);
+        onSubmit: (e) => {
+          void handleSubmit(onChange)(e);
           setOpen(false);
+          e.preventDefault();
+          e.stopPropagation();
         }
       },
-      "Cancel"
-    ))))))
-  ))));
+      /* @__PURE__ */ React__default.createElement("h3", { className: styles.propertyPanelTitle }, title, " Attributes"),
+      /* @__PURE__ */ React__default.createElement("table", { className: styles.propertyEditorTable }, /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", { className: styles.readOnlyColumnCell }, "Attribute"), /* @__PURE__ */ React__default.createElement("th", null, "Value"))), /* @__PURE__ */ React__default.createElement("tbody", null, Object.keys(properties).map((propName) => /* @__PURE__ */ React__default.createElement("tr", { key: propName }, /* @__PURE__ */ React__default.createElement("th", { className: styles.readOnlyColumnCell }, " ", propName, " "), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement("input", { ...register(propName), className: styles.propertyEditorInput }))))), /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", { colSpan: 2 }, /* @__PURE__ */ React__default.createElement("div", { className: styles.buttonsFooter }, /* @__PURE__ */ React__default.createElement("button", { type: "submit", className: styles.primaryButton }, "Save"), /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          type: "reset",
+          className: styles.secondaryButton,
+          onClick: (e) => {
+            e.preventDefault();
+            reset(properties);
+            setOpen(false);
+          }
+        },
+        "Cancel"
+      ))))))
+    )))
+  );
 };
 export {
   PropertyPopover