@d4gger/design-system 3.0.1 → 4.0.0

package/dist/components/articleNodes/ArticleNodes.js

@@ -1,5 +1,7 @@
 import * as React from "react";
 import classNames from "classnames";
+import { Button } from "../button/Button.js";
+import { Tabs } from "../tabs/Tabs.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 const ArticleImage = ({ caption, className, alt = "", ...props }) => /* @__PURE__ */ jsxs("figure", { className: "dsx-article-image", children: [
   /* @__PURE__ */ jsx("img", { ...props, alt, className: classNames("dsx-article-image__media", className) }),
@@ -25,22 +27,61 @@ const BeforeAfterComparison = ({ beforeSrc, afterSrc, beforeAlt, afterAlt, befor
     /* @__PURE__ */ jsx("span", { children: afterLabel })
   ] })
 ] });
-const ArticlePoll = ({ pollId, question, options = [], state = "ready", onLoad, onVote, className, ...props }) => {
+const ArticleVideo = ({ caption, className, controls = true, ...props }) => /* @__PURE__ */ jsxs("figure", { className: "dsx-article-video", children: [
+  /* @__PURE__ */ jsx("video", { ...props, controls, className: classNames("dsx-article-video__media", className) }),
+  caption ? /* @__PURE__ */ jsx("figcaption", { children: caption }) : null
+] });
+const ArticleMaterialLink = ({ materialId, href, children, unavailableLabel = "Material unavailable", ...props }) => {
+  let allowed = false;
+  try {
+    allowed = ["http:", "https:"].includes(new URL(href ?? "", "https://example.invalid").protocol);
+  } catch {
+  }
+  return href && allowed ? /* @__PURE__ */ jsx("a", { ...props, href, "data-dsx-material-id": materialId, children }) : /* @__PURE__ */ jsx("span", { role: "status", "data-dsx-material-id": materialId, children: unavailableLabel });
+};
+const ArticlePlatformTabs = ({ tabs, value, onValueChange, className, dir, ...props }) => /* @__PURE__ */ jsxs(Tabs, { ...props, dir: dir === "rtl" || dir === "ltr" ? dir : void 0, className: classNames("dsx-article-platform-tabs", className), defaultValue: tabs[0]?.platform, value, onValueChange, children: [
+  /* @__PURE__ */ jsxs(Tabs.List, { "aria-label": "Platform instructions", children: [
+    tabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Trigger, { value: tab.platform, children: tab.label }, tab.platform)),
+    /* @__PURE__ */ jsx(Tabs.Indicator, {})
+  ] }),
+  tabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Content, { value: tab.platform, children: tab.content }, tab.platform))
+] });
+const ArticlePoll = ({ pollId, question, options = [], state = "ready", onLoad, onVote, selection, multiple = false, onSelectionChange, onSubmit, onRetract, totalVotes, className, ...props }) => {
   React.useEffect(() => {
     onLoad?.(pollId);
   }, [pollId, onLoad]);
+  const controlled = selection !== void 0;
+  const total = totalVotes ?? options.reduce((sum, option) => sum + (option.votes ?? 0), 0);
+  const inert = state === "closed" || state === "loading" || state === "error" || !controlled && state !== "ready";
   return /* @__PURE__ */ jsxs("div", { ...props, className: classNames("dsx-article-poll", className), "data-dsx-poll-id": pollId, "data-state": state, "aria-busy": state === "loading" || void 0, children: [
     question ? /* @__PURE__ */ jsx("strong", { children: question }) : null,
-    state === "error" ? /* @__PURE__ */ jsx("span", { role: "alert", children: "Poll unavailable" }) : options.map((option) => /* @__PURE__ */ jsxs("button", { type: "button", disabled: state !== "ready", onClick: () => onVote?.(pollId, option.id), children: [
-      option.label,
-      option.votes === void 0 ? null : ` (${option.votes})`
-    ] }, option.id))
+    state === "closed" ? /* @__PURE__ */ jsx("span", { role: "status", children: "Poll closed" }) : null,
+    state === "error" ? /* @__PURE__ */ jsx("span", { role: "alert", children: "Poll unavailable" }) : options.map((option) => /* @__PURE__ */ jsxs("div", { className: "dsx-article-poll__result", children: [
+      /* @__PURE__ */ jsxs(Button, { className: "dsx-article-poll__option", type: "button", size: "lg", variant: selection?.includes(option.id) ? "secondary" : "outline", "aria-pressed": controlled ? selection.includes(option.id) : void 0, disabled: inert, onClick: () => {
+        if (!controlled) {
+          onVote?.(pollId, option.id);
+          return;
+        }
+        onSelectionChange?.(multiple ? selection.includes(option.id) ? selection.filter((id) => id !== option.id) : [...selection, option.id] : [option.id]);
+      }, children: [
+        option.label,
+        option.votes === void 0 ? null : ` (${option.votes})`
+      ] }),
+      option.votes !== void 0 ? /* @__PURE__ */ jsx("progress", { "aria-label": `${String(option.label)} results`, value: option.votes, max: Math.max(total, 1) }) : null
+    ] }, option.id)),
+    controlled && !inert ? /* @__PURE__ */ jsxs("div", { className: "dsx-article-poll__actions", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "lg", disabled: !selection.length || !onSubmit, onClick: () => onSubmit?.(pollId, selection), children: state === "voted" ? "Change vote" : "Vote" }),
+      state === "voted" && onRetract ? /* @__PURE__ */ jsx(Button, { type: "button", size: "lg", variant: "outline", onClick: () => onRetract(pollId), children: "Retract vote" }) : null
+    ] }) : null
   ] });
 };
 export {
   ArticleEmbed,
   ArticleImage,
+  ArticleMaterialLink,
+  ArticlePlatformTabs,
   ArticlePoll,
+  ArticleVideo,
   BeforeAfterComparison
 };
 //# sourceMappingURL=ArticleNodes.js.map

package/dist/components/articleNodes/ArticleNodes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/articleNodes/ArticleNodes.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport type {\n  ArticleEmbedProps,\n  ArticleImageProps,\n  ArticlePollProps,\n  BeforeAfterComparisonProps,\n} from './articleNodes.props'\n\nconst ArticleImage = ({ caption, className, alt = '', ...props }: ArticleImageProps) => <figure className=\"dsx-article-image\"><img {...props} alt={alt} className={classNames('dsx-article-image__media', className)} />{caption ? <figcaption>{caption}</figcaption> : null}</figure>\n\nconst ArticleEmbed = ({ url, render, isAllowed, className, ...props }: ArticleEmbedProps) => {\n  let canonical: string | undefined\n  try { const parsed = new URL(url); if (parsed.protocol === 'https:' || parsed.protocol === 'http:') canonical = parsed.href } catch {}\n  const allowed = Boolean(canonical && (isAllowed?.(canonical) ?? true))\n  return <div {...props} className={classNames('dsx-article-embed', className)} data-dsx-url={allowed ? canonical : undefined}>{allowed && canonical ? (render?.(canonical) ?? <a href={canonical}>{canonical}</a>) : <span role=\"alert\">Embed unavailable</span>}</div>\n}\n\nconst BeforeAfterComparison = ({ beforeSrc, afterSrc, beforeAlt, afterAlt, beforeLabel = 'Before', afterLabel = 'After', className, ...props }: BeforeAfterComparisonProps) => <figure {...props} className={classNames('dsx-before-after', className)}><div><img src={beforeSrc} alt={beforeAlt}/><span>{beforeLabel}</span></div><div><img src={afterSrc} alt={afterAlt}/><span>{afterLabel}</span></div></figure>\n\nconst ArticlePoll = ({ pollId, question, options = [], state = 'ready', onLoad, onVote, className, ...props }: ArticlePollProps) => {\n  React.useEffect(() => { onLoad?.(pollId) }, [pollId, onLoad])\n  return <div {...props} className={classNames('dsx-article-poll', className)} data-dsx-poll-id={pollId} data-state={state} aria-busy={state === 'loading' || undefined}>{question ? <strong>{question}</strong> : null}{state === 'error' ? <span role=\"alert\">Poll unavailable</span> : options.map((option) => <button key={option.id} type=\"button\" disabled={state !== 'ready'} onClick={() => onVote?.(pollId, option.id)}>{option.label}{option.votes === undefined ? null : ` (${option.votes})`}</button>)}</div>\n}\n\nexport { ArticleEmbed, ArticleImage, ArticlePoll, BeforeAfterComparison }\nexport type {\n  ArticleEmbedProps,\n  ArticleImageProps,\n  ArticlePollProps,\n  BeforeAfterComparisonProps,\n  PollState,\n} from './articleNodes.props'\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AASiE,SAAsC,KAAtC;AAAxF,MAAM,eAAe,CAAC,EAAE,SAAS,WAAW,MAAM,IAAI,GAAG,MAAM,MAAyB,qBAAC,YAAO,WAAU,qBAAoB;AAAA,sBAAC,SAAK,GAAG,OAAO,KAAU,WAAW,WAAW,4BAA4B,SAAS,GAAG;AAAA,EAAG,UAAU,oBAAC,gBAAY,mBAAQ,IAAgB;AAAA,GAAK;AAE7Q,MAAM,eAAe,CAAC,EAAE,KAAK,QAAQ,WAAW,WAAW,GAAG,MAAM,MAAyB;AAC3F,MAAI;AACJ,MAAI;AAAE,UAAM,SAAS,IAAI,IAAI,GAAG;AAAG,QAAI,OAAO,aAAa,YAAY,OAAO,aAAa,QAAS,aAAY,OAAO;AAAA,EAAK,QAAQ;AAAA,EAAC;AACrI,QAAM,UAAU,QAAQ,cAAc,YAAY,SAAS,KAAK,KAAK;AACrE,SAAO,oBAAC,SAAK,GAAG,OAAO,WAAW,WAAW,qBAAqB,SAAS,GAAG,gBAAc,UAAU,YAAY,QAAY,qBAAW,YAAa,SAAS,SAAS,KAAK,oBAAC,OAAE,MAAM,WAAY,qBAAU,IAAQ,oBAAC,UAAK,MAAK,SAAQ,+BAAiB,GAAQ;AAClQ;AAEA,MAAM,wBAAwB,CAAC,EAAE,WAAW,UAAU,WAAW,UAAU,cAAc,UAAU,aAAa,SAAS,WAAW,GAAG,MAAM,MAAkC,qBAAC,YAAQ,GAAG,OAAO,WAAW,WAAW,oBAAoB,SAAS,GAAG;AAAA,uBAAC,SAAI;AAAA,wBAAC,SAAI,KAAK,WAAW,KAAK,WAAU;AAAA,IAAE,oBAAC,UAAM,uBAAY;AAAA,KAAO;AAAA,EAAM,qBAAC,SAAI;AAAA,wBAAC,SAAI,KAAK,UAAU,KAAK,UAAS;AAAA,IAAE,oBAAC,UAAM,sBAAW;AAAA,KAAO;AAAA,GAAM;AAE3Y,MAAM,cAAc,CAAC,EAAE,QAAQ,UAAU,UAAU,CAAC,GAAG,QAAQ,SAAS,QAAQ,QAAQ,WAAW,GAAG,MAAM,MAAwB;AAClI,QAAM,UAAU,MAAM;AAAE,aAAS,MAAM;AAAA,EAAE,GAAG,CAAC,QAAQ,MAAM,CAAC;AAC5D,SAAO,qBAAC,SAAK,GAAG,OAAO,WAAW,WAAW,oBAAoB,SAAS,GAAG,oBAAkB,QAAQ,cAAY,OAAO,aAAW,UAAU,aAAa,QAAY;AAAA,eAAW,oBAAC,YAAQ,oBAAS,IAAY;AAAA,IAAM,UAAU,UAAU,oBAAC,UAAK,MAAK,SAAQ,8BAAgB,IAAU,QAAQ,IAAI,CAAC,WAAW,qBAAC,YAAuB,MAAK,UAAS,UAAU,UAAU,SAAS,SAAS,MAAM,SAAS,QAAQ,OAAO,EAAE,GAAI;AAAA,aAAO;AAAA,MAAO,OAAO,UAAU,SAAY,OAAO,KAAK,OAAO,KAAK;AAAA,SAAtK,OAAO,EAAmK,CAAS;AAAA,KAAE;AACpf;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Button } from '../button/Button'\nimport { Tabs } from '../tabs/Tabs'\nimport type { ArticleVideoProps, ArticleMaterialLinkProps, ArticlePlatformTabsProps } from './articleNodes.props'\n\nimport type {\n  ArticleEmbedProps,\n  ArticleImageProps,\n  ArticlePollProps,\n  BeforeAfterComparisonProps,\n} from './articleNodes.props'\n\nconst ArticleImage = ({ caption, className, alt = '', ...props }: ArticleImageProps) => <figure className=\"dsx-article-image\"><img {...props} alt={alt} className={classNames('dsx-article-image__media', className)} />{caption ? <figcaption>{caption}</figcaption> : null}</figure>\n\nconst ArticleEmbed = ({ url, render, isAllowed, className, ...props }: ArticleEmbedProps) => {\n  let canonical: string | undefined\n  try { const parsed = new URL(url); if (parsed.protocol === 'https:' || parsed.protocol === 'http:') canonical = parsed.href } catch {}\n  const allowed = Boolean(canonical && (isAllowed?.(canonical) ?? true))\n  return <div {...props} className={classNames('dsx-article-embed', className)} data-dsx-url={allowed ? canonical : undefined}>{allowed && canonical ? (render?.(canonical) ?? <a href={canonical}>{canonical}</a>) : <span role=\"alert\">Embed unavailable</span>}</div>\n}\n\nconst BeforeAfterComparison = ({ beforeSrc, afterSrc, beforeAlt, afterAlt, beforeLabel = 'Before', afterLabel = 'After', className, ...props }: BeforeAfterComparisonProps) => <figure {...props} className={classNames('dsx-before-after', className)}><div><img src={beforeSrc} alt={beforeAlt}/><span>{beforeLabel}</span></div><div><img src={afterSrc} alt={afterAlt}/><span>{afterLabel}</span></div></figure>\n\nconst ArticleVideo = ({ caption, className, controls = true, ...props }: ArticleVideoProps) => <figure className=\"dsx-article-video\"><video {...props} controls={controls} className={classNames('dsx-article-video__media', className)} />{caption ? <figcaption>{caption}</figcaption> : null}</figure>\nconst ArticleMaterialLink = ({ materialId, href, children, unavailableLabel = 'Material unavailable', ...props }: ArticleMaterialLinkProps) => {\n  let allowed = false\n  try { allowed = ['http:', 'https:'].includes(new URL(href ?? '', 'https://example.invalid').protocol) } catch {}\n  return href && allowed ? <a {...props} href={href} data-dsx-material-id={materialId}>{children}</a> : <span role=\"status\" data-dsx-material-id={materialId}>{unavailableLabel}</span>\n}\nconst ArticlePlatformTabs = ({ tabs, value, onValueChange, className, dir, ...props }: ArticlePlatformTabsProps) => <Tabs {...props} dir={dir === 'rtl' || dir === 'ltr' ? dir : undefined} className={classNames('dsx-article-platform-tabs', className)} defaultValue={tabs[0]?.platform} value={value} onValueChange={onValueChange}>\n  <Tabs.List aria-label=\"Platform instructions\">{tabs.map(tab => <Tabs.Trigger key={tab.platform} value={tab.platform}>{tab.label}</Tabs.Trigger>)}<Tabs.Indicator /></Tabs.List>\n  {tabs.map(tab => <Tabs.Content key={tab.platform} value={tab.platform}>{tab.content}</Tabs.Content>)}\n</Tabs>\nconst ArticlePoll = ({ pollId, question, options = [], state = 'ready', onLoad, onVote, selection, multiple = false, onSelectionChange, onSubmit, onRetract, totalVotes, className, ...props }: ArticlePollProps) => {\n  React.useEffect(() => { onLoad?.(pollId) }, [pollId, onLoad])\n  const controlled = selection !== undefined\n  const total = totalVotes ?? options.reduce((sum, option) => sum + (option.votes ?? 0), 0)\n  const inert = state === 'closed' || state === 'loading' || state === 'error' || (!controlled && state !== 'ready')\n  return <div {...props} className={classNames('dsx-article-poll', className)} data-dsx-poll-id={pollId} data-state={state} aria-busy={state === 'loading' || undefined}>\n    {question ? <strong>{question}</strong> : null}\n    {state === 'closed' ? <span role=\"status\">Poll closed</span> : null}\n    {state === 'error' ? <span role=\"alert\">Poll unavailable</span> : options.map(option => <div className=\"dsx-article-poll__result\" key={option.id}>\n      <Button className=\"dsx-article-poll__option\" type=\"button\" size=\"lg\" variant={selection?.includes(option.id) ? 'secondary' : 'outline'} aria-pressed={controlled ? selection.includes(option.id) : undefined} disabled={inert} onClick={() => {\n        if (!controlled) { onVote?.(pollId, option.id); return }\n        onSelectionChange?.(multiple ? selection.includes(option.id) ? selection.filter(id => id !== option.id) : [...selection, option.id] : [option.id])\n      }}>{option.label}{option.votes === undefined ? null : ` (${option.votes})`}</Button>\n      {option.votes !== undefined ? <progress aria-label={`${String(option.label)} results`} value={option.votes} max={Math.max(total, 1)} /> : null}\n    </div>)}\n    {controlled && !inert ? <div className=\"dsx-article-poll__actions\"><Button type=\"button\" size=\"lg\" disabled={!selection.length || !onSubmit} onClick={() => onSubmit?.(pollId, selection)}>{state === 'voted' ? 'Change vote' : 'Vote'}</Button>{state === 'voted' && onRetract ? <Button type=\"button\" size=\"lg\" variant=\"outline\" onClick={() => onRetract(pollId)}>Retract vote</Button> : null}</div> : null}\n  </div>\n}\n\nexport { ArticleEmbed, ArticleImage, ArticlePoll, BeforeAfterComparison, ArticleVideo, ArticleMaterialLink, ArticlePlatformTabs }\nexport type {\n  ArticleEmbedProps,\n  ArticleImageProps,\n  ArticlePollProps,\n  BeforeAfterComparisonProps,\n  PollState, ArticleVideoProps, ArticleMaterialLinkProps, ArticlePlatformTabsProps,\n} from './articleNodes.props'\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/articleNodes/articleExtensions.cjs

@@ -32,7 +32,11 @@ __export(articleExtensions_exports, {
   CalloutExtension: () => CalloutExtension,
   ComparisonExtension: () => ComparisonExtension,
   EmbedExtension: () => EmbedExtension,
+  MaterialLinkExtension: () => MaterialLinkExtension,
+  PlatformTabExtension: () => PlatformTabExtension,
+  PlatformTabsExtension: () => PlatformTabsExtension,
   PollExtension: () => PollExtension,
+  VideoExtension: () => VideoExtension,
   createArticleExtensions: () => createArticleExtensions
 });
 module.exports = __toCommonJS(articleExtensions_exports);
@@ -41,6 +45,8 @@ var import_extension_image = __toESM(require("@tiptap/extension-image"), 1);
 var import_extension_table = require("@tiptap/extension-table");
 var import_extension_code_block_lowlight = __toESM(require("@tiptap/extension-code-block-lowlight"), 1);
 var import_lowlight = require("lowlight");
+var import_react = require("@tiptap/react");
+var import_articleNodeViews = require("./articleNodeViews");
 const lowlight = (0, import_lowlight.createLowlight)(import_lowlight.common);
 const dataAttributes = (attributes) => Object.fromEntries(Object.entries(attributes).filter(([, value]) => value != null));
 const attribute = (key, htmlName = key, defaultValue = null) => ({ default: defaultValue, parseHTML: (element) => element.getAttribute(`data-dsx-${htmlName}`), renderHTML: (attributes) => attributes[key] == null ? {} : { [`data-dsx-${htmlName}`]: attributes[key] } });
@@ -54,7 +60,7 @@ const canonicalUrl = (value) => {
 };
 const ArticleImageExtension = import_extension_image.default.extend({
   addAttributes() {
-    return { ...this.parent?.(), caption: { default: null, parseHTML: (element) => element.getAttribute("data-dsx-caption"), renderHTML: ({ caption }) => caption ? { "data-dsx-caption": caption } : {} } };
+    return { ...this.parent?.(), mediaId: attribute("mediaId", "media-id"), caption: { default: null, parseHTML: (element) => element.getAttribute("data-dsx-caption"), renderHTML: ({ caption }) => caption ? { "data-dsx-caption": caption } : {} } };
   }
 });
 const EmbedExtension = import_core.Node.create({ name: "dsxEmbed", group: "block", atom: true, addAttributes: () => ({ url: attribute("url") }), parseHTML: () => [{ tag: 'div[data-dsx-node="embed"]' }], renderHTML: ({ HTMLAttributes }) => {
@@ -63,8 +69,19 @@ const EmbedExtension = import_core.Node.create({ name: "dsxEmbed", group: "block
 } });
 const CalloutExtension = import_core.Node.create({ name: "dsxCallout", group: "block", content: "block+", defining: true, addAttributes: () => ({ tone: attribute("tone", "tone", "info"), title: attribute("title") }), parseHTML: () => [{ tag: 'aside[data-dsx-node="callout"]' }], renderHTML: ({ HTMLAttributes }) => ["aside", (0, import_core.mergeAttributes)({ "data-dsx-node": "callout" }, dataAttributes(HTMLAttributes)), 0] });
 const ComparisonExtension = import_core.Node.create({ name: "dsxComparison", group: "block", atom: true, addAttributes: () => ({ beforeSrc: attribute("beforeSrc", "before-src"), afterSrc: attribute("afterSrc", "after-src"), beforeAlt: attribute("beforeAlt", "before-alt", ""), afterAlt: attribute("afterAlt", "after-alt", ""), beforeLabel: attribute("beforeLabel", "before-label"), afterLabel: attribute("afterLabel", "after-label") }), parseHTML: () => [{ tag: 'figure[data-dsx-node="comparison"]' }], renderHTML: ({ HTMLAttributes }) => ["figure", (0, import_core.mergeAttributes)({ "data-dsx-node": "comparison" }, dataAttributes(HTMLAttributes))] });
-const PollExtension = import_core.Node.create({ name: "dsxPoll", group: "block", atom: true, addAttributes: () => ({ pollId: attribute("pollId", "poll-id"), question: attribute("question") }), parseHTML: () => [{ tag: 'div[data-dsx-node="poll"]' }], renderHTML: ({ HTMLAttributes }) => ["div", (0, import_core.mergeAttributes)({ "data-dsx-node": "poll" }, dataAttributes(HTMLAttributes))] });
-function createArticleExtensions() {
-  return [ArticleImageExtension, EmbedExtension, CalloutExtension, import_extension_code_block_lowlight.default.configure({ lowlight }), import_extension_table.Table.configure({ resizable: true }), import_extension_table.TableRow, import_extension_table.TableHeader, import_extension_table.TableCell, ComparisonExtension, PollExtension];
+const PollExtension = import_core.Node.create({ name: "dsxPoll", group: "block", atom: true, addAttributes: () => ({ pollId: attribute("pollId", "poll-id"), question: attribute("question"), multiple: { default: false, parseHTML: (element) => element.getAttribute("data-dsx-multiple") === "true", renderHTML: (attrs) => ({ "data-dsx-multiple": String(attrs.multiple) }) }, options: { default: [], parseHTML: (element) => {
+  try {
+    return JSON.parse(element.getAttribute("data-dsx-options") ?? "[]");
+  } catch {
+    return [];
+  }
+}, renderHTML: (attrs) => ({ "data-dsx-options": JSON.stringify(attrs.options) }) } }), parseHTML: () => [{ tag: 'div[data-dsx-node="poll"]' }], renderHTML: ({ HTMLAttributes }) => ["div", (0, import_core.mergeAttributes)({ "data-dsx-node": "poll" }, dataAttributes(HTMLAttributes))] });
+const VideoExtension = import_core.Node.create({ name: "dsxVideo", group: "block", atom: true, addAttributes: () => ({ src: attribute("src"), caption: attribute("caption"), mediaId: attribute("mediaId", "media-id") }), parseHTML: () => [{ tag: 'figure[data-dsx-node="video"]' }], renderHTML: ({ HTMLAttributes }) => ["figure", (0, import_core.mergeAttributes)({ "data-dsx-node": "video" }, dataAttributes(HTMLAttributes))] });
+const MaterialLinkExtension = import_core.Node.create({ name: "dsxMaterialLink", group: "block", atom: true, addAttributes: () => ({ materialId: attribute("materialId", "material-id"), label: attribute("label"), href: attribute("href") }), parseHTML: () => [{ tag: 'div[data-dsx-node="material-link"]' }], renderHTML: ({ HTMLAttributes }) => ["div", (0, import_core.mergeAttributes)({ "data-dsx-node": "material-link" }, dataAttributes(HTMLAttributes))] });
+const PlatformTabsExtension = import_core.Node.create({ name: "dsxTabs", group: "block", content: "dsxTab+", defining: true, parseHTML: () => [{ tag: 'div[data-dsx-node="tabs"]' }], renderHTML: () => ["div", { "data-dsx-node": "tabs" }, 0] });
+const PlatformTabExtension = import_core.Node.create({ name: "dsxTab", content: "block+", defining: true, addAttributes: () => ({ platform: attribute("platform"), label: attribute("label") }), parseHTML: () => [{ tag: 'section[data-dsx-node="tab"]' }], renderHTML: ({ HTMLAttributes }) => ["section", (0, import_core.mergeAttributes)({ "data-dsx-node": "tab" }, dataAttributes(HTMLAttributes)), 0] });
+function createArticleExtensions({ editable = true } = {}) {
+  const blocks = [ArticleImageExtension, EmbedExtension, CalloutExtension, ComparisonExtension, PollExtension, VideoExtension, MaterialLinkExtension, PlatformTabsExtension, PlatformTabExtension];
+  return [...blocks.map((extension) => editable ? extension.extend({ addNodeView: () => (0, import_react.ReactNodeViewRenderer)(import_articleNodeViews.ArticleBlockView) }) : extension), import_extension_code_block_lowlight.default.configure({ lowlight }), import_extension_table.Table.configure({ resizable: true }), import_extension_table.TableRow, import_extension_table.TableHeader, import_extension_table.TableCell];
 }
 //# sourceMappingURL=articleExtensions.cjs.map

package/dist/components/articleNodes/articleExtensions.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/articleNodes/articleExtensions.ts"],
-  "sourcesContent": ["import { Node, mergeAttributes, type Extensions } from '@tiptap/core'\nimport Image from '@tiptap/extension-image'\nimport { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table'\nimport CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'\nimport { common, createLowlight } from 'lowlight'\n\nconst lowlight = createLowlight(common)\nconst dataAttributes = (attributes: Record<string, unknown>) => Object.fromEntries(Object.entries(attributes).filter(([, value]) => value != null))\nconst attribute = (key: string, htmlName = key, defaultValue: unknown = null) => ({ default: defaultValue, parseHTML: (element: HTMLElement) => element.getAttribute(`data-dsx-${htmlName}`), renderHTML: (attributes: Record<string, unknown>) => attributes[key] == null ? {} : { [`data-dsx-${htmlName}`]: attributes[key] } })\nconst canonicalUrl = (value: unknown) => { try { const url = new URL(String(value)); return url.protocol === 'https:' || url.protocol === 'http:' ? url.href : null } catch { return null } }\n\nconst ArticleImageExtension = Image.extend({\n  addAttributes() { return { ...this.parent?.(), caption: { default: null, parseHTML: (element) => element.getAttribute('data-dsx-caption'), renderHTML: ({ caption }) => caption ? { 'data-dsx-caption': caption } : {} } } },\n})\nconst EmbedExtension = Node.create({ name: 'dsxEmbed', group: 'block', atom: true, addAttributes: () => ({ url: attribute('url') }), parseHTML: () => [{ tag: 'div[data-dsx-node=\"embed\"]' }], renderHTML: ({ HTMLAttributes }) => { const url = canonicalUrl(HTMLAttributes['data-dsx-url']); return ['div', { 'data-dsx-node': 'embed', ...(url ? { 'data-dsx-url': url } : { 'data-dsx-invalid': 'true' }) }] } })\nconst CalloutExtension = Node.create({ name: 'dsxCallout', group: 'block', content: 'block+', defining: true, addAttributes: () => ({ tone: attribute('tone', 'tone', 'info'), title: attribute('title') }), parseHTML: () => [{ tag: 'aside[data-dsx-node=\"callout\"]' }], renderHTML: ({ HTMLAttributes }) => ['aside', mergeAttributes({ 'data-dsx-node': 'callout' }, dataAttributes(HTMLAttributes)), 0] })\nconst ComparisonExtension = Node.create({ name: 'dsxComparison', group: 'block', atom: true, addAttributes: () => ({ beforeSrc: attribute('beforeSrc', 'before-src'), afterSrc: attribute('afterSrc', 'after-src'), beforeAlt: attribute('beforeAlt', 'before-alt', ''), afterAlt: attribute('afterAlt', 'after-alt', ''), beforeLabel: attribute('beforeLabel', 'before-label'), afterLabel: attribute('afterLabel', 'after-label') }), parseHTML: () => [{ tag: 'figure[data-dsx-node=\"comparison\"]' }], renderHTML: ({ HTMLAttributes }) => ['figure', mergeAttributes({ 'data-dsx-node': 'comparison' }, dataAttributes(HTMLAttributes))] })\nconst PollExtension = Node.create({ name: 'dsxPoll', group: 'block', atom: true, addAttributes: () => ({ pollId: attribute('pollId', 'poll-id'), question: attribute('question') }), parseHTML: () => [{ tag: 'div[data-dsx-node=\"poll\"]' }], renderHTML: ({ HTMLAttributes }) => ['div', mergeAttributes({ 'data-dsx-node': 'poll' }, dataAttributes(HTMLAttributes))] })\n\nfunction createArticleExtensions(): Extensions {\n  return [ArticleImageExtension, EmbedExtension, CalloutExtension, CodeBlockLowlight.configure({ lowlight }), Table.configure({ resizable: true }), TableRow, TableHeader, TableCell, ComparisonExtension, PollExtension]\n}\n\nexport { ArticleImageExtension, CalloutExtension, ComparisonExtension, EmbedExtension, PollExtension, createArticleExtensions }\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Node, mergeAttributes, type Extensions } from '@tiptap/core'\nimport Image from '@tiptap/extension-image'\nimport { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table'\nimport CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'\nimport { common, createLowlight } from 'lowlight'\nimport { ReactNodeViewRenderer } from '@tiptap/react'\nimport { ArticleBlockView } from './articleNodeViews'\n\nconst lowlight = createLowlight(common)\nconst dataAttributes = (attributes: Record<string, unknown>) => Object.fromEntries(Object.entries(attributes).filter(([, value]) => value != null))\nconst attribute = (key: string, htmlName = key, defaultValue: unknown = null) => ({ default: defaultValue, parseHTML: (element: HTMLElement) => element.getAttribute(`data-dsx-${htmlName}`), renderHTML: (attributes: Record<string, unknown>) => attributes[key] == null ? {} : { [`data-dsx-${htmlName}`]: attributes[key] } })\nconst canonicalUrl = (value: unknown) => { try { const url = new URL(String(value)); return url.protocol === 'https:' || url.protocol === 'http:' ? url.href : null } catch { return null } }\n\nconst ArticleImageExtension = Image.extend({\n  addAttributes() { return { ...this.parent?.(), mediaId: attribute('mediaId', 'media-id'), caption: { default: null, parseHTML: (element) => element.getAttribute('data-dsx-caption'), renderHTML: ({ caption }) => caption ? { 'data-dsx-caption': caption } : {} } } },\n})\nconst EmbedExtension = Node.create({ name: 'dsxEmbed', group: 'block', atom: true, addAttributes: () => ({ url: attribute('url') }), parseHTML: () => [{ tag: 'div[data-dsx-node=\"embed\"]' }], renderHTML: ({ HTMLAttributes }) => { const url = canonicalUrl(HTMLAttributes['data-dsx-url']); return ['div', { 'data-dsx-node': 'embed', ...(url ? { 'data-dsx-url': url } : { 'data-dsx-invalid': 'true' }) }] } })\nconst CalloutExtension = Node.create({ name: 'dsxCallout', group: 'block', content: 'block+', defining: true, addAttributes: () => ({ tone: attribute('tone', 'tone', 'info'), title: attribute('title') }), parseHTML: () => [{ tag: 'aside[data-dsx-node=\"callout\"]' }], renderHTML: ({ HTMLAttributes }) => ['aside', mergeAttributes({ 'data-dsx-node': 'callout' }, dataAttributes(HTMLAttributes)), 0] })\nconst ComparisonExtension = Node.create({ name: 'dsxComparison', group: 'block', atom: true, addAttributes: () => ({ beforeSrc: attribute('beforeSrc', 'before-src'), afterSrc: attribute('afterSrc', 'after-src'), beforeAlt: attribute('beforeAlt', 'before-alt', ''), afterAlt: attribute('afterAlt', 'after-alt', ''), beforeLabel: attribute('beforeLabel', 'before-label'), afterLabel: attribute('afterLabel', 'after-label') }), parseHTML: () => [{ tag: 'figure[data-dsx-node=\"comparison\"]' }], renderHTML: ({ HTMLAttributes }) => ['figure', mergeAttributes({ 'data-dsx-node': 'comparison' }, dataAttributes(HTMLAttributes))] })\nconst PollExtension = Node.create({ name: 'dsxPoll', group: 'block', atom: true, addAttributes: () => ({ pollId: attribute('pollId', 'poll-id'), question: attribute('question'), multiple: { default: false, parseHTML: element => element.getAttribute('data-dsx-multiple') === 'true', renderHTML: attrs => ({ 'data-dsx-multiple': String(attrs.multiple) }) }, options: { default: [], parseHTML: element => { try { return JSON.parse(element.getAttribute('data-dsx-options') ?? '[]') } catch { return [] } }, renderHTML: attrs => ({ 'data-dsx-options': JSON.stringify(attrs.options) }) } }), parseHTML: () => [{ tag: 'div[data-dsx-node=\"poll\"]' }], renderHTML: ({ HTMLAttributes }) => ['div', mergeAttributes({ 'data-dsx-node': 'poll' }, dataAttributes(HTMLAttributes))] })\n\nconst VideoExtension = Node.create({ name: 'dsxVideo', group: 'block', atom: true, addAttributes: () => ({ src: attribute('src'), caption: attribute('caption'), mediaId: attribute('mediaId', 'media-id') }), parseHTML: () => [{ tag: 'figure[data-dsx-node=\"video\"]' }], renderHTML: ({ HTMLAttributes }) => ['figure', mergeAttributes({ 'data-dsx-node': 'video' }, dataAttributes(HTMLAttributes))] })\nconst MaterialLinkExtension = Node.create({ name: 'dsxMaterialLink', group: 'block', atom: true, addAttributes: () => ({ materialId: attribute('materialId', 'material-id'), label: attribute('label'), href: attribute('href') }), parseHTML: () => [{ tag: 'div[data-dsx-node=\"material-link\"]' }], renderHTML: ({ HTMLAttributes }) => ['div', mergeAttributes({ 'data-dsx-node': 'material-link' }, dataAttributes(HTMLAttributes))] })\nconst PlatformTabsExtension = Node.create({ name: 'dsxTabs', group: 'block', content: 'dsxTab+', defining: true, parseHTML: () => [{ tag: 'div[data-dsx-node=\"tabs\"]' }], renderHTML: () => ['div', { 'data-dsx-node': 'tabs' }, 0] })\nconst PlatformTabExtension = Node.create({ name: 'dsxTab', content: 'block+', defining: true, addAttributes: () => ({ platform: attribute('platform'), label: attribute('label') }), parseHTML: () => [{ tag: 'section[data-dsx-node=\"tab\"]' }], renderHTML: ({ HTMLAttributes }) => ['section', mergeAttributes({ 'data-dsx-node': 'tab' }, dataAttributes(HTMLAttributes)), 0] })\n\nfunction createArticleExtensions({ editable = true }: { editable?: boolean } = {}): Extensions {\n  const blocks = [ArticleImageExtension, EmbedExtension, CalloutExtension, ComparisonExtension, PollExtension, VideoExtension, MaterialLinkExtension, PlatformTabsExtension, PlatformTabExtension]\n  return [...blocks.map(extension => editable ? extension.extend({ addNodeView: () => ReactNodeViewRenderer(ArticleBlockView) }) : extension), CodeBlockLowlight.configure({ lowlight }), Table.configure({ resizable: true }), TableRow, TableHeader, TableCell]\n}\n\nexport { ArticleImageExtension, CalloutExtension, ComparisonExtension, EmbedExtension, PollExtension, VideoExtension, MaterialLinkExtension, PlatformTabsExtension, PlatformTabExtension, createArticleExtensions }\n"],
+  "mappings": "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",
   "names": ["Image", "CodeBlockLowlight"]
 }

package/dist/components/articleNodes/articleExtensions.d.cts

@@ -4,6 +4,12 @@ declare const EmbedExtension: Node<any, any>;
 declare const CalloutExtension: Node<any, any>;
 declare const ComparisonExtension: Node<any, any>;
 declare const PollExtension: Node<any, any>;
-declare function createArticleExtensions(): Extensions;
-export { ArticleImageExtension, CalloutExtension, ComparisonExtension, EmbedExtension, PollExtension, createArticleExtensions };
+declare const VideoExtension: Node<any, any>;
+declare const MaterialLinkExtension: Node<any, any>;
+declare const PlatformTabsExtension: Node<any, any>;
+declare const PlatformTabExtension: Node<any, any>;
+declare function createArticleExtensions({ editable }?: {
+    editable?: boolean;
+}): Extensions;
+export { ArticleImageExtension, CalloutExtension, ComparisonExtension, EmbedExtension, PollExtension, VideoExtension, MaterialLinkExtension, PlatformTabsExtension, PlatformTabExtension, createArticleExtensions };
 //# sourceMappingURL=articleExtensions.d.cts.map

package/dist/components/articleNodes/articleExtensions.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"articleExtensions.d.cts","sourceRoot":"","sources":["../../../src/components/articleNodes/articleExtensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAWrE,QAAA,MAAM,qBAAqB,2DAEzB,CAAA;AACF,QAAA,MAAM,cAAc,gBAAiY,CAAA;AACrZ,QAAA,MAAM,gBAAgB,gBAAyX,CAAA;AAC/Y,QAAA,MAAM,mBAAmB,gBAAulB,CAAA;AAChnB,QAAA,MAAM,aAAa,gBAAuV,CAAA;AAE1W,iBAAS,uBAAuB,IAAI,UAAU,CAE7C;AAED,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,cAAc,EAAE,aAAa,EAAE,uBAAuB,EAAE,CAAA"}
+{"version":3,"file":"articleExtensions.d.cts","sourceRoot":"","sources":["../../../src/components/articleNodes/articleExtensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAarE,QAAA,MAAM,qBAAqB,2DAEzB,CAAA;AACF,QAAA,MAAM,cAAc,gBAAiY,CAAA;AACrZ,QAAA,MAAM,gBAAgB,gBAAyX,CAAA;AAC/Y,QAAA,MAAM,mBAAmB,gBAAulB,CAAA;AAChnB,QAAA,MAAM,aAAa,gBAA4uB,CAAA;AAE/vB,QAAA,MAAM,cAAc,gBAAwX,CAAA;AAC5Y,QAAA,MAAM,qBAAqB,gBAAgZ,CAAA;AAC3a,QAAA,MAAM,qBAAqB,gBAA2M,CAAA;AACtO,QAAA,MAAM,oBAAoB,gBAAyV,CAAA;AAEnX,iBAAS,uBAAuB,CAAC,EAAE,QAAe,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,UAAU,CAG7F;AAED,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/components/articleNodes/articleExtensions.d.mts

@@ -4,6 +4,12 @@ declare const EmbedExtension: Node<any, any>;
 declare const CalloutExtension: Node<any, any>;
 declare const ComparisonExtension: Node<any, any>;
 declare const PollExtension: Node<any, any>;
-declare function createArticleExtensions(): Extensions;
-export { ArticleImageExtension, CalloutExtension, ComparisonExtension, EmbedExtension, PollExtension, createArticleExtensions };
+declare const VideoExtension: Node<any, any>;
+declare const MaterialLinkExtension: Node<any, any>;
+declare const PlatformTabsExtension: Node<any, any>;
+declare const PlatformTabExtension: Node<any, any>;
+declare function createArticleExtensions({ editable }?: {
+    editable?: boolean;
+}): Extensions;
+export { ArticleImageExtension, CalloutExtension, ComparisonExtension, EmbedExtension, PollExtension, VideoExtension, MaterialLinkExtension, PlatformTabsExtension, PlatformTabExtension, createArticleExtensions };
 //# sourceMappingURL=articleExtensions.d.mts.map

package/dist/components/articleNodes/articleExtensions.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"articleExtensions.d.mts","sourceRoot":"","sources":["../../../src/components/articleNodes/articleExtensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAWrE,QAAA,MAAM,qBAAqB,2DAEzB,CAAA;AACF,QAAA,MAAM,cAAc,gBAAiY,CAAA;AACrZ,QAAA,MAAM,gBAAgB,gBAAyX,CAAA;AAC/Y,QAAA,MAAM,mBAAmB,gBAAulB,CAAA;AAChnB,QAAA,MAAM,aAAa,gBAAuV,CAAA;AAE1W,iBAAS,uBAAuB,IAAI,UAAU,CAE7C;AAED,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,cAAc,EAAE,aAAa,EAAE,uBAAuB,EAAE,CAAA"}
+{"version":3,"file":"articleExtensions.d.mts","sourceRoot":"","sources":["../../../src/components/articleNodes/articleExtensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAarE,QAAA,MAAM,qBAAqB,2DAEzB,CAAA;AACF,QAAA,MAAM,cAAc,gBAAiY,CAAA;AACrZ,QAAA,MAAM,gBAAgB,gBAAyX,CAAA;AAC/Y,QAAA,MAAM,mBAAmB,gBAAulB,CAAA;AAChnB,QAAA,MAAM,aAAa,gBAA4uB,CAAA;AAE/vB,QAAA,MAAM,cAAc,gBAAwX,CAAA;AAC5Y,QAAA,MAAM,qBAAqB,gBAAgZ,CAAA;AAC3a,QAAA,MAAM,qBAAqB,gBAA2M,CAAA;AACtO,QAAA,MAAM,oBAAoB,gBAAyV,CAAA;AAEnX,iBAAS,uBAAuB,CAAC,EAAE,QAAe,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,UAAU,CAG7F;AAED,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/components/articleNodes/articleExtensions.d.ts

@@ -4,6 +4,12 @@ declare const EmbedExtension: Node<any, any>;
 declare const CalloutExtension: Node<any, any>;
 declare const ComparisonExtension: Node<any, any>;
 declare const PollExtension: Node<any, any>;
-declare function createArticleExtensions(): Extensions;
-export { ArticleImageExtension, CalloutExtension, ComparisonExtension, EmbedExtension, PollExtension, createArticleExtensions };
+declare const VideoExtension: Node<any, any>;
+declare const MaterialLinkExtension: Node<any, any>;
+declare const PlatformTabsExtension: Node<any, any>;
+declare const PlatformTabExtension: Node<any, any>;
+declare function createArticleExtensions({ editable }?: {
+    editable?: boolean;
+}): Extensions;
+export { ArticleImageExtension, CalloutExtension, ComparisonExtension, EmbedExtension, PollExtension, VideoExtension, MaterialLinkExtension, PlatformTabsExtension, PlatformTabExtension, createArticleExtensions };
 //# sourceMappingURL=articleExtensions.d.ts.map

package/dist/components/articleNodes/articleExtensions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"articleExtensions.d.ts","sourceRoot":"","sources":["../../../src/components/articleNodes/articleExtensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAWrE,QAAA,MAAM,qBAAqB,2DAEzB,CAAA;AACF,QAAA,MAAM,cAAc,gBAAiY,CAAA;AACrZ,QAAA,MAAM,gBAAgB,gBAAyX,CAAA;AAC/Y,QAAA,MAAM,mBAAmB,gBAAulB,CAAA;AAChnB,QAAA,MAAM,aAAa,gBAAuV,CAAA;AAE1W,iBAAS,uBAAuB,IAAI,UAAU,CAE7C;AAED,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,cAAc,EAAE,aAAa,EAAE,uBAAuB,EAAE,CAAA"}
+{"version":3,"file":"articleExtensions.d.ts","sourceRoot":"","sources":["../../../src/components/articleNodes/articleExtensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAarE,QAAA,MAAM,qBAAqB,2DAEzB,CAAA;AACF,QAAA,MAAM,cAAc,gBAAiY,CAAA;AACrZ,QAAA,MAAM,gBAAgB,gBAAyX,CAAA;AAC/Y,QAAA,MAAM,mBAAmB,gBAAulB,CAAA;AAChnB,QAAA,MAAM,aAAa,gBAA4uB,CAAA;AAE/vB,QAAA,MAAM,cAAc,gBAAwX,CAAA;AAC5Y,QAAA,MAAM,qBAAqB,gBAAgZ,CAAA;AAC3a,QAAA,MAAM,qBAAqB,gBAA2M,CAAA;AACtO,QAAA,MAAM,oBAAoB,gBAAyV,CAAA;AAEnX,iBAAS,uBAAuB,CAAC,EAAE,QAAe,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,UAAU,CAG7F;AAED,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/components/articleNodes/articleExtensions.js

@@ -3,6 +3,8 @@ import Image from "@tiptap/extension-image";
 import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import { common, createLowlight } from "lowlight";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { ArticleBlockView } from "./articleNodeViews.js";
 const lowlight = createLowlight(common);
 const dataAttributes = (attributes) => Object.fromEntries(Object.entries(attributes).filter(([, value]) => value != null));
 const attribute = (key, htmlName = key, defaultValue = null) => ({ default: defaultValue, parseHTML: (element) => element.getAttribute(`data-dsx-${htmlName}`), renderHTML: (attributes) => attributes[key] == null ? {} : { [`data-dsx-${htmlName}`]: attributes[key] } });
@@ -16,7 +18,7 @@ const canonicalUrl = (value) => {
 };
 const ArticleImageExtension = Image.extend({
   addAttributes() {
-    return { ...this.parent?.(), caption: { default: null, parseHTML: (element) => element.getAttribute("data-dsx-caption"), renderHTML: ({ caption }) => caption ? { "data-dsx-caption": caption } : {} } };
+    return { ...this.parent?.(), mediaId: attribute("mediaId", "media-id"), caption: { default: null, parseHTML: (element) => element.getAttribute("data-dsx-caption"), renderHTML: ({ caption }) => caption ? { "data-dsx-caption": caption } : {} } };
   }
 });
 const EmbedExtension = Node.create({ name: "dsxEmbed", group: "block", atom: true, addAttributes: () => ({ url: attribute("url") }), parseHTML: () => [{ tag: 'div[data-dsx-node="embed"]' }], renderHTML: ({ HTMLAttributes }) => {
@@ -25,16 +27,31 @@ const EmbedExtension = Node.create({ name: "dsxEmbed", group: "block", atom: tru
 } });
 const CalloutExtension = Node.create({ name: "dsxCallout", group: "block", content: "block+", defining: true, addAttributes: () => ({ tone: attribute("tone", "tone", "info"), title: attribute("title") }), parseHTML: () => [{ tag: 'aside[data-dsx-node="callout"]' }], renderHTML: ({ HTMLAttributes }) => ["aside", mergeAttributes({ "data-dsx-node": "callout" }, dataAttributes(HTMLAttributes)), 0] });
 const ComparisonExtension = Node.create({ name: "dsxComparison", group: "block", atom: true, addAttributes: () => ({ beforeSrc: attribute("beforeSrc", "before-src"), afterSrc: attribute("afterSrc", "after-src"), beforeAlt: attribute("beforeAlt", "before-alt", ""), afterAlt: attribute("afterAlt", "after-alt", ""), beforeLabel: attribute("beforeLabel", "before-label"), afterLabel: attribute("afterLabel", "after-label") }), parseHTML: () => [{ tag: 'figure[data-dsx-node="comparison"]' }], renderHTML: ({ HTMLAttributes }) => ["figure", mergeAttributes({ "data-dsx-node": "comparison" }, dataAttributes(HTMLAttributes))] });
-const PollExtension = Node.create({ name: "dsxPoll", group: "block", atom: true, addAttributes: () => ({ pollId: attribute("pollId", "poll-id"), question: attribute("question") }), parseHTML: () => [{ tag: 'div[data-dsx-node="poll"]' }], renderHTML: ({ HTMLAttributes }) => ["div", mergeAttributes({ "data-dsx-node": "poll" }, dataAttributes(HTMLAttributes))] });
-function createArticleExtensions() {
-  return [ArticleImageExtension, EmbedExtension, CalloutExtension, CodeBlockLowlight.configure({ lowlight }), Table.configure({ resizable: true }), TableRow, TableHeader, TableCell, ComparisonExtension, PollExtension];
+const PollExtension = Node.create({ name: "dsxPoll", group: "block", atom: true, addAttributes: () => ({ pollId: attribute("pollId", "poll-id"), question: attribute("question"), multiple: { default: false, parseHTML: (element) => element.getAttribute("data-dsx-multiple") === "true", renderHTML: (attrs) => ({ "data-dsx-multiple": String(attrs.multiple) }) }, options: { default: [], parseHTML: (element) => {
+  try {
+    return JSON.parse(element.getAttribute("data-dsx-options") ?? "[]");
+  } catch {
+    return [];
+  }
+}, renderHTML: (attrs) => ({ "data-dsx-options": JSON.stringify(attrs.options) }) } }), parseHTML: () => [{ tag: 'div[data-dsx-node="poll"]' }], renderHTML: ({ HTMLAttributes }) => ["div", mergeAttributes({ "data-dsx-node": "poll" }, dataAttributes(HTMLAttributes))] });
+const VideoExtension = Node.create({ name: "dsxVideo", group: "block", atom: true, addAttributes: () => ({ src: attribute("src"), caption: attribute("caption"), mediaId: attribute("mediaId", "media-id") }), parseHTML: () => [{ tag: 'figure[data-dsx-node="video"]' }], renderHTML: ({ HTMLAttributes }) => ["figure", mergeAttributes({ "data-dsx-node": "video" }, dataAttributes(HTMLAttributes))] });
+const MaterialLinkExtension = Node.create({ name: "dsxMaterialLink", group: "block", atom: true, addAttributes: () => ({ materialId: attribute("materialId", "material-id"), label: attribute("label"), href: attribute("href") }), parseHTML: () => [{ tag: 'div[data-dsx-node="material-link"]' }], renderHTML: ({ HTMLAttributes }) => ["div", mergeAttributes({ "data-dsx-node": "material-link" }, dataAttributes(HTMLAttributes))] });
+const PlatformTabsExtension = Node.create({ name: "dsxTabs", group: "block", content: "dsxTab+", defining: true, parseHTML: () => [{ tag: 'div[data-dsx-node="tabs"]' }], renderHTML: () => ["div", { "data-dsx-node": "tabs" }, 0] });
+const PlatformTabExtension = Node.create({ name: "dsxTab", content: "block+", defining: true, addAttributes: () => ({ platform: attribute("platform"), label: attribute("label") }), parseHTML: () => [{ tag: 'section[data-dsx-node="tab"]' }], renderHTML: ({ HTMLAttributes }) => ["section", mergeAttributes({ "data-dsx-node": "tab" }, dataAttributes(HTMLAttributes)), 0] });
+function createArticleExtensions({ editable = true } = {}) {
+  const blocks = [ArticleImageExtension, EmbedExtension, CalloutExtension, ComparisonExtension, PollExtension, VideoExtension, MaterialLinkExtension, PlatformTabsExtension, PlatformTabExtension];
+  return [...blocks.map((extension) => editable ? extension.extend({ addNodeView: () => ReactNodeViewRenderer(ArticleBlockView) }) : extension), CodeBlockLowlight.configure({ lowlight }), Table.configure({ resizable: true }), TableRow, TableHeader, TableCell];
 }
 export {
   ArticleImageExtension,
   CalloutExtension,
   ComparisonExtension,
   EmbedExtension,
+  MaterialLinkExtension,
+  PlatformTabExtension,
+  PlatformTabsExtension,
   PollExtension,
+  VideoExtension,
   createArticleExtensions
 };
 //# sourceMappingURL=articleExtensions.js.map

package/dist/components/articleNodes/articleExtensions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/articleNodes/articleExtensions.ts"],
-  "sourcesContent": ["import { Node, mergeAttributes, type Extensions } from '@tiptap/core'\nimport Image from '@tiptap/extension-image'\nimport { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table'\nimport CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'\nimport { common, createLowlight } from 'lowlight'\n\nconst lowlight = createLowlight(common)\nconst dataAttributes = (attributes: Record<string, unknown>) => Object.fromEntries(Object.entries(attributes).filter(([, value]) => value != null))\nconst attribute = (key: string, htmlName = key, defaultValue: unknown = null) => ({ default: defaultValue, parseHTML: (element: HTMLElement) => element.getAttribute(`data-dsx-${htmlName}`), renderHTML: (attributes: Record<string, unknown>) => attributes[key] == null ? {} : { [`data-dsx-${htmlName}`]: attributes[key] } })\nconst canonicalUrl = (value: unknown) => { try { const url = new URL(String(value)); return url.protocol === 'https:' || url.protocol === 'http:' ? url.href : null } catch { return null } }\n\nconst ArticleImageExtension = Image.extend({\n  addAttributes() { return { ...this.parent?.(), caption: { default: null, parseHTML: (element) => element.getAttribute('data-dsx-caption'), renderHTML: ({ caption }) => caption ? { 'data-dsx-caption': caption } : {} } } },\n})\nconst EmbedExtension = Node.create({ name: 'dsxEmbed', group: 'block', atom: true, addAttributes: () => ({ url: attribute('url') }), parseHTML: () => [{ tag: 'div[data-dsx-node=\"embed\"]' }], renderHTML: ({ HTMLAttributes }) => { const url = canonicalUrl(HTMLAttributes['data-dsx-url']); return ['div', { 'data-dsx-node': 'embed', ...(url ? { 'data-dsx-url': url } : { 'data-dsx-invalid': 'true' }) }] } })\nconst CalloutExtension = Node.create({ name: 'dsxCallout', group: 'block', content: 'block+', defining: true, addAttributes: () => ({ tone: attribute('tone', 'tone', 'info'), title: attribute('title') }), parseHTML: () => [{ tag: 'aside[data-dsx-node=\"callout\"]' }], renderHTML: ({ HTMLAttributes }) => ['aside', mergeAttributes({ 'data-dsx-node': 'callout' }, dataAttributes(HTMLAttributes)), 0] })\nconst ComparisonExtension = Node.create({ name: 'dsxComparison', group: 'block', atom: true, addAttributes: () => ({ beforeSrc: attribute('beforeSrc', 'before-src'), afterSrc: attribute('afterSrc', 'after-src'), beforeAlt: attribute('beforeAlt', 'before-alt', ''), afterAlt: attribute('afterAlt', 'after-alt', ''), beforeLabel: attribute('beforeLabel', 'before-label'), afterLabel: attribute('afterLabel', 'after-label') }), parseHTML: () => [{ tag: 'figure[data-dsx-node=\"comparison\"]' }], renderHTML: ({ HTMLAttributes }) => ['figure', mergeAttributes({ 'data-dsx-node': 'comparison' }, dataAttributes(HTMLAttributes))] })\nconst PollExtension = Node.create({ name: 'dsxPoll', group: 'block', atom: true, addAttributes: () => ({ pollId: attribute('pollId', 'poll-id'), question: attribute('question') }), parseHTML: () => [{ tag: 'div[data-dsx-node=\"poll\"]' }], renderHTML: ({ HTMLAttributes }) => ['div', mergeAttributes({ 'data-dsx-node': 'poll' }, dataAttributes(HTMLAttributes))] })\n\nfunction createArticleExtensions(): Extensions {\n  return [ArticleImageExtension, EmbedExtension, CalloutExtension, CodeBlockLowlight.configure({ lowlight }), Table.configure({ resizable: true }), TableRow, TableHeader, TableCell, ComparisonExtension, PollExtension]\n}\n\nexport { ArticleImageExtension, CalloutExtension, ComparisonExtension, EmbedExtension, PollExtension, createArticleExtensions }\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Node, mergeAttributes, type Extensions } from '@tiptap/core'\nimport Image from '@tiptap/extension-image'\nimport { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table'\nimport CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'\nimport { common, createLowlight } from 'lowlight'\nimport { ReactNodeViewRenderer } from '@tiptap/react'\nimport { ArticleBlockView } from './articleNodeViews'\n\nconst lowlight = createLowlight(common)\nconst dataAttributes = (attributes: Record<string, unknown>) => Object.fromEntries(Object.entries(attributes).filter(([, value]) => value != null))\nconst attribute = (key: string, htmlName = key, defaultValue: unknown = null) => ({ default: defaultValue, parseHTML: (element: HTMLElement) => element.getAttribute(`data-dsx-${htmlName}`), renderHTML: (attributes: Record<string, unknown>) => attributes[key] == null ? {} : { [`data-dsx-${htmlName}`]: attributes[key] } })\nconst canonicalUrl = (value: unknown) => { try { const url = new URL(String(value)); return url.protocol === 'https:' || url.protocol === 'http:' ? url.href : null } catch { return null } }\n\nconst ArticleImageExtension = Image.extend({\n  addAttributes() { return { ...this.parent?.(), mediaId: attribute('mediaId', 'media-id'), caption: { default: null, parseHTML: (element) => element.getAttribute('data-dsx-caption'), renderHTML: ({ caption }) => caption ? { 'data-dsx-caption': caption } : {} } } },\n})\nconst EmbedExtension = Node.create({ name: 'dsxEmbed', group: 'block', atom: true, addAttributes: () => ({ url: attribute('url') }), parseHTML: () => [{ tag: 'div[data-dsx-node=\"embed\"]' }], renderHTML: ({ HTMLAttributes }) => { const url = canonicalUrl(HTMLAttributes['data-dsx-url']); return ['div', { 'data-dsx-node': 'embed', ...(url ? { 'data-dsx-url': url } : { 'data-dsx-invalid': 'true' }) }] } })\nconst CalloutExtension = Node.create({ name: 'dsxCallout', group: 'block', content: 'block+', defining: true, addAttributes: () => ({ tone: attribute('tone', 'tone', 'info'), title: attribute('title') }), parseHTML: () => [{ tag: 'aside[data-dsx-node=\"callout\"]' }], renderHTML: ({ HTMLAttributes }) => ['aside', mergeAttributes({ 'data-dsx-node': 'callout' }, dataAttributes(HTMLAttributes)), 0] })\nconst ComparisonExtension = Node.create({ name: 'dsxComparison', group: 'block', atom: true, addAttributes: () => ({ beforeSrc: attribute('beforeSrc', 'before-src'), afterSrc: attribute('afterSrc', 'after-src'), beforeAlt: attribute('beforeAlt', 'before-alt', ''), afterAlt: attribute('afterAlt', 'after-alt', ''), beforeLabel: attribute('beforeLabel', 'before-label'), afterLabel: attribute('afterLabel', 'after-label') }), parseHTML: () => [{ tag: 'figure[data-dsx-node=\"comparison\"]' }], renderHTML: ({ HTMLAttributes }) => ['figure', mergeAttributes({ 'data-dsx-node': 'comparison' }, dataAttributes(HTMLAttributes))] })\nconst PollExtension = Node.create({ name: 'dsxPoll', group: 'block', atom: true, addAttributes: () => ({ pollId: attribute('pollId', 'poll-id'), question: attribute('question'), multiple: { default: false, parseHTML: element => element.getAttribute('data-dsx-multiple') === 'true', renderHTML: attrs => ({ 'data-dsx-multiple': String(attrs.multiple) }) }, options: { default: [], parseHTML: element => { try { return JSON.parse(element.getAttribute('data-dsx-options') ?? '[]') } catch { return [] } }, renderHTML: attrs => ({ 'data-dsx-options': JSON.stringify(attrs.options) }) } }), parseHTML: () => [{ tag: 'div[data-dsx-node=\"poll\"]' }], renderHTML: ({ HTMLAttributes }) => ['div', mergeAttributes({ 'data-dsx-node': 'poll' }, dataAttributes(HTMLAttributes))] })\n\nconst VideoExtension = Node.create({ name: 'dsxVideo', group: 'block', atom: true, addAttributes: () => ({ src: attribute('src'), caption: attribute('caption'), mediaId: attribute('mediaId', 'media-id') }), parseHTML: () => [{ tag: 'figure[data-dsx-node=\"video\"]' }], renderHTML: ({ HTMLAttributes }) => ['figure', mergeAttributes({ 'data-dsx-node': 'video' }, dataAttributes(HTMLAttributes))] })\nconst MaterialLinkExtension = Node.create({ name: 'dsxMaterialLink', group: 'block', atom: true, addAttributes: () => ({ materialId: attribute('materialId', 'material-id'), label: attribute('label'), href: attribute('href') }), parseHTML: () => [{ tag: 'div[data-dsx-node=\"material-link\"]' }], renderHTML: ({ HTMLAttributes }) => ['div', mergeAttributes({ 'data-dsx-node': 'material-link' }, dataAttributes(HTMLAttributes))] })\nconst PlatformTabsExtension = Node.create({ name: 'dsxTabs', group: 'block', content: 'dsxTab+', defining: true, parseHTML: () => [{ tag: 'div[data-dsx-node=\"tabs\"]' }], renderHTML: () => ['div', { 'data-dsx-node': 'tabs' }, 0] })\nconst PlatformTabExtension = Node.create({ name: 'dsxTab', content: 'block+', defining: true, addAttributes: () => ({ platform: attribute('platform'), label: attribute('label') }), parseHTML: () => [{ tag: 'section[data-dsx-node=\"tab\"]' }], renderHTML: ({ HTMLAttributes }) => ['section', mergeAttributes({ 'data-dsx-node': 'tab' }, dataAttributes(HTMLAttributes)), 0] })\n\nfunction createArticleExtensions({ editable = true }: { editable?: boolean } = {}): Extensions {\n  const blocks = [ArticleImageExtension, EmbedExtension, CalloutExtension, ComparisonExtension, PollExtension, VideoExtension, MaterialLinkExtension, PlatformTabsExtension, PlatformTabExtension]\n  return [...blocks.map(extension => editable ? extension.extend({ addNodeView: () => ReactNodeViewRenderer(ArticleBlockView) }) : extension), CodeBlockLowlight.configure({ lowlight }), Table.configure({ resizable: true }), TableRow, TableHeader, TableCell]\n}\n\nexport { ArticleImageExtension, CalloutExtension, ComparisonExtension, EmbedExtension, PollExtension, VideoExtension, MaterialLinkExtension, PlatformTabsExtension, PlatformTabExtension, createArticleExtensions }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/articleNodes/articleNodeViews.cjs

@@ -0,0 +1,154 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var articleNodeViews_exports = {};
+__export(articleNodeViews_exports, {
+  ArticleBlockView: () => ArticleBlockView
+});
+module.exports = __toCommonJS(articleNodeViews_exports);
+var React = __toESM(require("react"), 1);
+var import_react = require("@tiptap/react");
+var import_Button = require("../button/Button");
+var import_TextField = require("../textField/TextField");
+var import_ArticleNodes = require("./ArticleNodes");
+var import_jsx_runtime = require("react/jsx-runtime");
+const fields = {
+  image: [["src", "Image URL"], ["alt", "Alternative text"], ["caption", "Caption"], ["mediaId", "Media ID"]],
+  dsxVideo: [["src", "Video URL"], ["caption", "Caption"], ["mediaId", "Media ID"]],
+  dsxEmbed: [["url", "Embed URL"]],
+  dsxComparison: [["beforeSrc", "Before image URL"], ["beforeAlt", "Before alternative text"], ["afterSrc", "After image URL"], ["afterAlt", "After alternative text"]],
+  dsxCallout: [["title", "Callout title"], ["tone", "Tone"]],
+  dsxPoll: [["pollId", "Poll ID"], ["question", "Question"]],
+  dsxMaterialLink: [["materialId", "Material ID"], ["label", "Link label"], ["href", "Resolved URL"]],
+  dsxTab: [["platform", "Platform key"], ["label", "Tab label"]]
+};
+const titles = { image: "Image", dsxVideo: "Video", dsxEmbed: "Embed", dsxComparison: "Comparison", dsxCallout: "Callout", dsxPoll: "Poll", dsxMaterialLink: "Material reference", dsxTabs: "Platform tabs", dsxTab: "Platform" };
+function ArticleBlockView({ node, editor, getPos, updateAttributes, deleteNode, selected }) {
+  const [editing, setEditing] = React.useState(false);
+  const [draft, setDraft] = React.useState(node.attrs);
+  const [error, setError] = React.useState("");
+  const fieldsId = React.useId();
+  const name = node.type.name;
+  const pos = getPos();
+  const $pos = typeof pos === "number" ? editor.state.doc.resolve(pos) : null;
+  const index = $pos?.index() ?? 0;
+  const parent = $pos?.parent;
+  const [editable, setEditable] = React.useState(editor.isEditable);
+  React.useEffect(() => {
+    const refresh = () => {
+      setEditable(editor.isEditable);
+      if (!editor.isEditable) setEditing(false);
+    };
+    editor.on("update", refresh);
+    editor.on("transaction", refresh);
+    refresh();
+    return () => {
+      editor.off("update", refresh);
+      editor.off("transaction", refresh);
+    };
+  }, [editor]);
+  const move = (direction) => {
+    if (!editor.isEditable || typeof pos !== "number" || !parent) return;
+    const neighbor = parent.maybeChild(index + direction);
+    if (!neighbor) return;
+    editor.commands.command(({ tr }) => {
+      tr.delete(pos, pos + node.nodeSize).insert(direction === -1 ? pos - neighbor.nodeSize : pos + neighbor.nodeSize, node);
+      return true;
+    });
+    editor.commands.focus();
+  };
+  const save = () => {
+    if (!editor.isEditable) return;
+    if (name === "dsxPoll") {
+      const options = draft.options;
+      if (!String(draft.pollId ?? "").trim() || !String(draft.question ?? "").trim() || options.length < 2 || options.some((option) => !option.id.trim() || !option.label.trim()) || new Set(options.map((option) => option.id)).size !== options.length) {
+        setError("Supply a poll ID, question and at least two options with unique IDs.");
+        return;
+      }
+    }
+    for (const key of ["src", "url", "href", "beforeSrc", "afterSrc"]) {
+      if (!draft[key]) continue;
+      try {
+        const url = new URL(String(draft[key]), window.location.href);
+        if (!["http:", "https:"].includes(url.protocol)) throw new Error();
+      } catch {
+        setError("Use an http or https media/link URL.");
+        return;
+      }
+    }
+    updateAttributes(draft);
+    setEditing(false);
+    editor.commands.focus();
+  };
+  const preview = name === "image" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ArticleNodes.ArticleImage, { src: node.attrs.src, alt: node.attrs.alt, caption: node.attrs.caption }) : name === "dsxVideo" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ArticleNodes.ArticleVideo, { src: node.attrs.src, caption: node.attrs.caption }) : name === "dsxEmbed" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ArticleNodes.ArticleEmbed, { url: node.attrs.url ?? "" }) : name === "dsxComparison" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ArticleNodes.BeforeAfterComparison, { ...node.attrs }) : name === "dsxPoll" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: node.attrs.question || "Untitled poll" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: node.attrs.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: option.label }, option.id)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("small", { children: [
+      node.attrs.multiple ? "Multiple choices" : "Single choice",
+      " \xB7 ",
+      node.attrs.pollId || "Missing poll ID"
+    ] })
+  ] }) : name === "dsxMaterialLink" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: node.attrs.label || node.attrs.materialId || "Material reference" }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.NodeViewWrapper, { className: "dsx-article-editor-block", "aria-label": `${titles[name] ?? name} block`, "aria-current": selected || void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { contentEditable: false, className: "dsx-article-editor-block__controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: name === "dsxTab" ? node.attrs.label || titles[name] : titles[name] }),
+      editable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-article-editor-block__actions", children: [
+        fields[name] ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "lg", variant: "ghost", onClick: () => {
+          setDraft({ ...node.attrs });
+          setError("");
+          setEditing((value) => !value);
+        }, children: editing ? "Cancel" : "Edit" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "lg", variant: "ghost", "aria-label": `Move ${titles[name]} up`, disabled: !parent?.maybeChild(index - 1), onClick: () => move(-1), children: "\u2191" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "lg", variant: "ghost", "aria-label": `Move ${titles[name]} down`, disabled: !parent?.maybeChild(index + 1), onClick: () => move(1), children: "\u2193" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "lg", variant: "ghost", "aria-label": `Remove ${titles[name]}`, onClick: () => {
+          if (editor.isEditable) {
+            deleteNode();
+            editor.commands.focus();
+          }
+        }, children: "Remove" })
+      ] }) : null
+    ] }),
+    editing ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { contentEditable: false, className: "dsx-article-editor-block__fields", children: [
+      fields[name]?.map(([key, label]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextField.TextField, { id: `${fieldsId}-${key}`, label, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextField.TextField.Input, { value: String(draft[key] ?? ""), onChange: (event) => setDraft((current) => ({ ...current, [key]: event.target.value })) }) }, key)),
+      name === "dsxPoll" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+          "Options \u2014 one stable ID | label per line",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { className: "dsx-article-editor-block__textarea", value: draft.options.map((option) => `${option.id}|${option.label}`).join("\n"), onChange: (event) => setDraft((current) => ({ ...current, options: event.target.value.split("\n").map((line) => {
+            const divider = line.indexOf("|");
+            return { id: divider < 0 ? "" : line.slice(0, divider), label: divider < 0 ? line : line.slice(divider + 1) };
+          }) })) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "lg", variant: "outline", "aria-pressed": Boolean(draft.multiple), onClick: () => setDraft((current) => ({ ...current, multiple: !current.multiple })), children: "Allow multiple choices" })
+      ] }) : null,
+      error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "alert", children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "lg", onClick: save, children: "Save block" })
+    ] }) : null,
+    !node.isAtom ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.NodeViewContent, { className: "dsx-article-editor-block__content" }) : !editing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { contentEditable: false, children: preview }) : null
+  ] });
+}
+//# sourceMappingURL=articleNodeViews.cjs.map