@valkyrianlabs/payload-markdown 1.3.1

package/dist/editor/MarkdownCodeMirror/Component.client.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { EditorState } from '@codemirror/state';
+import { placeholder as cmPlaceholder, EditorView, keymap } from '@codemirror/view';
+import React, { useEffect, useRef } from 'react';
+import { directiveCompletions } from '../directives/completions.js';
+import { directiveDiagnostics } from '../directives/diagnostics.js';
+import { payloadMarkdownTheme } from '../themes/payload.js';
+export const MarkdownCodeMirrorClient = ({ onChangeAction, placeholder = 'Write markdown...', value = '' })=>{
+    const containerRef = useRef(null);
+    const viewRef = useRef(null);
+    useEffect(()=>{
+        if (!containerRef.current || viewRef.current) return;
+        const state = EditorState.create({
+            doc: value,
+            extensions: [
+                history(),
+                keymap.of([
+                    ...defaultKeymap,
+                    ...historyKeymap
+                ]),
+                EditorView.lineWrapping,
+                cmPlaceholder(placeholder),
+                payloadMarkdownTheme,
+                directiveCompletions,
+                directiveDiagnostics,
+                EditorView.updateListener.of((update)=>{
+                    if (!update.docChanged) return;
+                    onChangeAction(update.state.doc.toString());
+                })
+            ]
+        });
+        viewRef.current = new EditorView({
+            parent: containerRef.current,
+            state
+        });
+        return ()=>{
+            viewRef.current?.destroy();
+            viewRef.current = null;
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        onChangeAction,
+        placeholder
+    ]);
+    useEffect(()=>{
+        const view = viewRef.current;
+        if (!view) return;
+        const current = view.state.doc.toString();
+        if (current === value) return;
+        view.dispatch({
+            changes: {
+                from: 0,
+                insert: value,
+                to: current.length
+            }
+        });
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        style: {
+            border: '1px solid rgba(120, 120, 120, .5)',
+            borderRadius: '5px',
+            maxHeight: '80vh',
+            minHeight: '125px',
+            overflowX: 'hidden',
+            overflowY: 'scroll',
+            padding: '6px 0'
+        },
+        children: /*#__PURE__*/ _jsx("div", {
+            ref: containerRef
+        })
+    });
+};
+
+//# sourceMappingURL=Component.client.js.map

package/dist/editor/MarkdownCodeMirror/Component.client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/editor/MarkdownCodeMirror/Component.client.tsx"],"sourcesContent":["'use client'\n\nimport { defaultKeymap, history, historyKeymap } from '@codemirror/commands'\nimport { EditorState } from '@codemirror/state'\nimport { placeholder as cmPlaceholder, EditorView, keymap } from '@codemirror/view'\nimport React, { useEffect, useRef } from 'react'\n\nimport { directiveCompletions } from '../directives/completions.js'\nimport { directiveDiagnostics } from '../directives/diagnostics.js'\nimport { payloadMarkdownTheme } from '../themes/payload.js'\n\ntype MarkdownCodeMirrorClientProps = {\n  onChangeAction: (value: string) => void\n  placeholder?: string\n  value?: string\n}\n\nexport const MarkdownCodeMirrorClient: React.FC<MarkdownCodeMirrorClientProps> = ({\n  onChangeAction,\n  placeholder = 'Write markdown...',\n  value = '',\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const viewRef = useRef<EditorView | null>(null)\n\n  useEffect(() => {\n    if (!containerRef.current || viewRef.current) return\n\n    const state = EditorState.create({\n      doc: value,\n      extensions: [\n        history(),\n        keymap.of([...defaultKeymap, ...historyKeymap]),\n        EditorView.lineWrapping,\n        cmPlaceholder(placeholder),\n        payloadMarkdownTheme,\n        directiveCompletions,\n        directiveDiagnostics,\n        EditorView.updateListener.of((update) => {\n          if (!update.docChanged) return\n          onChangeAction(update.state.doc.toString())\n        }),\n      ],\n    })\n\n    viewRef.current = new EditorView({\n      parent: containerRef.current,\n      state,\n    })\n\n    return () => {\n      viewRef.current?.destroy()\n      viewRef.current = null\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [onChangeAction, placeholder])\n\n  useEffect(() => {\n    const view = viewRef.current\n    if (!view) return\n\n    const current = view.state.doc.toString()\n    if (current === value) return\n\n    view.dispatch({\n      changes: {\n        from: 0,\n        insert: value,\n        to: current.length,\n      },\n    })\n  }, [value])\n\n  return (\n    <div\n      style={{\n        border: '1px solid rgba(120, 120, 120, .5)',\n        borderRadius: '5px',\n        maxHeight: '80vh',\n        minHeight: '125px',\n        overflowX: 'hidden',\n        overflowY: 'scroll',\n        padding: '6px 0',\n      }}\n    >\n      <div ref={containerRef} />\n    </div>\n  )\n}\n"],"names":["defaultKeymap","history","historyKeymap","EditorState","placeholder","cmPlaceholder","EditorView","keymap","React","useEffect","useRef","directiveCompletions","directiveDiagnostics","payloadMarkdownTheme","MarkdownCodeMirrorClient","onChangeAction","value","containerRef","viewRef","current","state","create","doc","extensions","of","lineWrapping","updateListener","update","docChanged","toString","parent","destroy","view","dispatch","changes","from","insert","to","length","div","style","border","borderRadius","maxHeight","minHeight","overflowX","overflowY","padding","ref"],"mappings":"AAAA;;AAEA,SAASA,aAAa,EAAEC,OAAO,EAAEC,aAAa,QAAQ,uBAAsB;AAC5E,SAASC,WAAW,QAAQ,oBAAmB;AAC/C,SAASC,eAAeC,aAAa,EAAEC,UAAU,EAAEC,MAAM,QAAQ,mBAAkB;AACnF,OAAOC,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAEhD,SAASC,oBAAoB,QAAQ,+BAA8B;AACnE,SAASC,oBAAoB,QAAQ,+BAA8B;AACnE,SAASC,oBAAoB,QAAQ,uBAAsB;AAQ3D,OAAO,MAAMC,2BAAoE,CAAC,EAChFC,cAAc,EACdX,cAAc,mBAAmB,EACjCY,QAAQ,EAAE,EACX;IACC,MAAMC,eAAeP,OAA8B;IACnD,MAAMQ,UAAUR,OAA0B;IAE1CD,UAAU;QACR,IAAI,CAACQ,aAAaE,OAAO,IAAID,QAAQC,OAAO,EAAE;QAE9C,MAAMC,QAAQjB,YAAYkB,MAAM,CAAC;YAC/BC,KAAKN;YACLO,YAAY;gBACVtB;gBACAM,OAAOiB,EAAE,CAAC;uBAAIxB;uBAAkBE;iBAAc;gBAC9CI,WAAWmB,YAAY;gBACvBpB,cAAcD;gBACdS;gBACAF;gBACAC;gBACAN,WAAWoB,cAAc,CAACF,EAAE,CAAC,CAACG;oBAC5B,IAAI,CAACA,OAAOC,UAAU,EAAE;oBACxBb,eAAeY,OAAOP,KAAK,CAACE,GAAG,CAACO,QAAQ;gBAC1C;aACD;QACH;QAEAX,QAAQC,OAAO,GAAG,IAAIb,WAAW;YAC/BwB,QAAQb,aAAaE,OAAO;YAC5BC;QACF;QAEA,OAAO;YACLF,QAAQC,OAAO,EAAEY;YACjBb,QAAQC,OAAO,GAAG;QACpB;IACA,uDAAuD;IACzD,GAAG;QAACJ;QAAgBX;KAAY;IAEhCK,UAAU;QACR,MAAMuB,OAAOd,QAAQC,OAAO;QAC5B,IAAI,CAACa,MAAM;QAEX,MAAMb,UAAUa,KAAKZ,KAAK,CAACE,GAAG,CAACO,QAAQ;QACvC,IAAIV,YAAYH,OAAO;QAEvBgB,KAAKC,QAAQ,CAAC;YACZC,SAAS;gBACPC,MAAM;gBACNC,QAAQpB;gBACRqB,IAAIlB,QAAQmB,MAAM;YACpB;QACF;IACF,GAAG;QAACtB;KAAM;IAEV,qBACE,KAACuB;QACCC,OAAO;YACLC,QAAQ;YACRC,cAAc;YACdC,WAAW;YACXC,WAAW;YACXC,WAAW;YACXC,WAAW;YACXC,SAAS;QACX;kBAEA,cAAA,KAACR;YAAIS,KAAK/B;;;AAGhB,EAAC"}

package/dist/editor/MarkdownCodeMirror/Component.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type MarkdownCodeMirrorProps = {
+    className?: string;
+    onChangeAction: (value: string) => void;
+    placeholder?: string;
+    value?: string;
+};
+export declare const MarkdownCodeMirror: React.FC<MarkdownCodeMirrorProps>;
+export {};

package/dist/editor/MarkdownCodeMirror/Component.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { MarkdownCodeMirrorClient } from './Component.client.js';
+export const MarkdownCodeMirror = (props)=>{
+    return /*#__PURE__*/ _jsx(MarkdownCodeMirrorClient, {
+        ...props
+    });
+};
+
+//# sourceMappingURL=Component.js.map

package/dist/editor/MarkdownCodeMirror/Component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/editor/MarkdownCodeMirror/Component.tsx"],"sourcesContent":["import React from 'react'\n\nimport { MarkdownCodeMirrorClient } from './Component.client.js'\n\ntype MarkdownCodeMirrorProps = {\n  className?: string\n  onChangeAction: (value: string) => void\n  placeholder?: string\n  value?: string\n}\n\nexport const MarkdownCodeMirror: React.FC<MarkdownCodeMirrorProps> = (props) => {\n  return <MarkdownCodeMirrorClient {...props} />\n}\n"],"names":["React","MarkdownCodeMirrorClient","MarkdownCodeMirror","props"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,SAASC,wBAAwB,QAAQ,wBAAuB;AAShE,OAAO,MAAMC,qBAAwD,CAACC;IACpE,qBAAO,KAACF;QAA0B,GAAGE,KAAK;;AAC5C,EAAC"}

package/dist/editor/MarkdownCodeMirror.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type MarkdownCodeMirrorProps = {
+    onChangeAction: (value: string) => void;
+    placeholder?: string;
+    value?: string;
+};
+export declare const MarkdownCodeMirror: React.FC<MarkdownCodeMirrorProps>;
+export {};

package/dist/editor/MarkdownCodeMirror.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { EditorState } from '@codemirror/state';
+import { placeholder as cmPlaceholder, EditorView, keymap } from '@codemirror/view';
+import React, { useEffect, useRef } from 'react';
+import { payloadMarkdownTheme } from './themes/payload.js';
+export const MarkdownCodeMirror = ({ onChangeAction, placeholder = 'Write markdown...', value = '' })=>{
+    const containerRef = useRef(null);
+    const viewRef = useRef(null);
+    const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    useEffect(()=>{
+        if (!containerRef.current || viewRef.current) return;
+        const state = EditorState.create({
+            doc: value,
+            extensions: [
+                history(),
+                keymap.of([
+                    ...defaultKeymap,
+                    ...historyKeymap
+                ]),
+                EditorView.lineWrapping,
+                cmPlaceholder(placeholder),
+                payloadMarkdownTheme,
+                EditorView.updateListener.of((update)=>{
+                    if (!update.docChanged) return;
+                    onChangeAction(update.state.doc.toString());
+                })
+            ]
+        });
+        viewRef.current = new EditorView({
+            parent: containerRef.current,
+            state
+        });
+        return ()=>{
+            viewRef.current?.destroy();
+            viewRef.current = null;
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        onChangeAction,
+        placeholder
+    ]);
+    useEffect(()=>{
+        const view = viewRef.current;
+        if (!view) return;
+        const current = view.state.doc.toString();
+        if (current === value) return;
+        view.dispatch({
+            changes: {
+                from: 0,
+                insert: value,
+                to: current.length
+            }
+        });
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        style: {
+            border: isDarkMode ? '1px solid rgba(120, 120, 120, .4)' : '1px solid rgba(120, 120, 120, .8)',
+            borderRadius: '5px',
+            maxHeight: '80vh',
+            minHeight: '125px',
+            overflowX: 'hidden',
+            overflowY: 'scroll'
+        },
+        children: /*#__PURE__*/ _jsx("div", {
+            ref: containerRef
+        })
+    });
+};
+
+//# sourceMappingURL=MarkdownCodeMirror.js.map

package/dist/editor/MarkdownCodeMirror.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/editor/MarkdownCodeMirror.tsx"],"sourcesContent":["'use client'\n\nimport { defaultKeymap, history, historyKeymap } from '@codemirror/commands'\nimport { EditorState } from '@codemirror/state'\nimport { placeholder as cmPlaceholder, EditorView, keymap } from '@codemirror/view'\nimport React, { useEffect, useRef } from 'react'\n\nimport { payloadMarkdownTheme } from './themes/payload.js'\n\ntype MarkdownCodeMirrorProps = {\n  onChangeAction: (value: string) => void\n  placeholder?: string\n  value?: string\n}\n\nexport const MarkdownCodeMirror: React.FC<MarkdownCodeMirrorProps> = ({\n  onChangeAction,\n  placeholder = 'Write markdown...',\n  value = '',\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const viewRef = useRef<EditorView | null>(null)\n  const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches\n\n  useEffect(() => {\n    if (!containerRef.current || viewRef.current) return\n\n    const state = EditorState.create({\n      doc: value,\n      extensions: [\n        history(),\n        keymap.of([...defaultKeymap, ...historyKeymap]),\n        EditorView.lineWrapping,\n        cmPlaceholder(placeholder),\n        payloadMarkdownTheme,\n        EditorView.updateListener.of((update) => {\n          if (!update.docChanged) return\n          onChangeAction(update.state.doc.toString())\n        }),\n      ],\n    })\n\n    viewRef.current = new EditorView({\n      parent: containerRef.current,\n      state,\n    })\n\n    return () => {\n      viewRef.current?.destroy()\n      viewRef.current = null\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [onChangeAction, placeholder])\n\n  useEffect(() => {\n    const view = viewRef.current\n    if (!view) return\n\n    const current = view.state.doc.toString()\n    if (current === value) return\n\n    view.dispatch({\n      changes: {\n        from: 0,\n        insert: value,\n        to: current.length,\n      },\n    })\n  }, [value])\n\n  return (\n    <div\n      style={{\n        border: isDarkMode ? '1px solid rgba(120, 120, 120, .4)' : '1px solid rgba(120, 120, 120, .8)',\n        borderRadius: '5px',\n        maxHeight: '80vh',\n        minHeight: '125px',\n        overflowX: 'hidden',\n        overflowY: 'scroll',\n      }}>\n      <div ref={containerRef} />\n    </div>\n  )\n}\n"],"names":["defaultKeymap","history","historyKeymap","EditorState","placeholder","cmPlaceholder","EditorView","keymap","React","useEffect","useRef","payloadMarkdownTheme","MarkdownCodeMirror","onChangeAction","value","containerRef","viewRef","isDarkMode","window","matchMedia","matches","current","state","create","doc","extensions","of","lineWrapping","updateListener","update","docChanged","toString","parent","destroy","view","dispatch","changes","from","insert","to","length","div","style","border","borderRadius","maxHeight","minHeight","overflowX","overflowY","ref"],"mappings":"AAAA;;AAEA,SAASA,aAAa,EAAEC,OAAO,EAAEC,aAAa,QAAQ,uBAAsB;AAC5E,SAASC,WAAW,QAAQ,oBAAmB;AAC/C,SAASC,eAAeC,aAAa,EAAEC,UAAU,EAAEC,MAAM,QAAQ,mBAAkB;AACnF,OAAOC,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAEhD,SAASC,oBAAoB,QAAQ,sBAAqB;AAQ1D,OAAO,MAAMC,qBAAwD,CAAC,EACpEC,cAAc,EACdT,cAAc,mBAAmB,EACjCU,QAAQ,EAAE,EACX;IACC,MAAMC,eAAeL,OAA8B;IACnD,MAAMM,UAAUN,OAA0B;IAC1C,MAAMO,aAAaC,OAAOC,UAAU,IAAID,OAAOC,UAAU,CAAC,gCAAgCC,OAAO;IAEjGX,UAAU;QACR,IAAI,CAACM,aAAaM,OAAO,IAAIL,QAAQK,OAAO,EAAE;QAE9C,MAAMC,QAAQnB,YAAYoB,MAAM,CAAC;YAC/BC,KAAKV;YACLW,YAAY;gBACVxB;gBACAM,OAAOmB,EAAE,CAAC;uBAAI1B;uBAAkBE;iBAAc;gBAC9CI,WAAWqB,YAAY;gBACvBtB,cAAcD;gBACdO;gBACAL,WAAWsB,cAAc,CAACF,EAAE,CAAC,CAACG;oBAC5B,IAAI,CAACA,OAAOC,UAAU,EAAE;oBACxBjB,eAAegB,OAAOP,KAAK,CAACE,GAAG,CAACO,QAAQ;gBAC1C;aACD;QACH;QAEAf,QAAQK,OAAO,GAAG,IAAIf,WAAW;YAC/B0B,QAAQjB,aAAaM,OAAO;YAC5BC;QACF;QAEA,OAAO;YACLN,QAAQK,OAAO,EAAEY;YACjBjB,QAAQK,OAAO,GAAG;QACpB;IACA,uDAAuD;IACzD,GAAG;QAACR;QAAgBT;KAAY;IAEhCK,UAAU;QACR,MAAMyB,OAAOlB,QAAQK,OAAO;QAC5B,IAAI,CAACa,MAAM;QAEX,MAAMb,UAAUa,KAAKZ,KAAK,CAACE,GAAG,CAACO,QAAQ;QACvC,IAAIV,YAAYP,OAAO;QAEvBoB,KAAKC,QAAQ,CAAC;YACZC,SAAS;gBACPC,MAAM;gBACNC,QAAQxB;gBACRyB,IAAIlB,QAAQmB,MAAM;YACpB;QACF;IACF,GAAG;QAAC1B;KAAM;IAEV,qBACE,KAAC2B;QACCC,OAAO;YACLC,QAAQ1B,aAAa,sCAAsC;YAC3D2B,cAAc;YACdC,WAAW;YACXC,WAAW;YACXC,WAAW;YACXC,WAAW;QACb;kBACA,cAAA,KAACP;YAAIQ,KAAKlC;;;AAGhB,EAAC"}

package/dist/editor/MarkdownEditor.d.ts

@@ -0,0 +1,10 @@
+import type { StaticLabel } from 'payload';
+import React from 'react';
+type MarkdownEditorProps = {
+    label?: StaticLabel;
+    onChangeAction: (value: string) => void;
+    placeholder?: string;
+    value?: string;
+};
+export declare const MarkdownEditor: React.FC<MarkdownEditorProps>;
+export {};

package/dist/editor/MarkdownEditor.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { MarkdownCodeMirror } from './MarkdownCodeMirror/Component.js';
+export const MarkdownEditor = ({ label = 'Markdown', onChangeAction, placeholder = 'Write markdown...', value = '' })=>{
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    margin: '1rem 0'
+                },
+                children: String(label)
+            }),
+            /*#__PURE__*/ _jsx(MarkdownCodeMirror, {
+                onChangeAction: onChangeAction,
+                placeholder: placeholder,
+                value: value
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=MarkdownEditor.js.map

package/dist/editor/MarkdownEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/editor/MarkdownEditor.tsx"],"sourcesContent":["import type { StaticLabel } from 'payload'\n\nimport React from 'react'\n\nimport { MarkdownCodeMirror } from './MarkdownCodeMirror/Component.js'\n\ntype MarkdownEditorProps = {\n  label?: StaticLabel\n  onChangeAction: (value: string) => void\n  placeholder?: string\n  value?: string\n}\n\nexport const MarkdownEditor: React.FC<MarkdownEditorProps> = ({\n  label = 'Markdown',\n  onChangeAction,\n  placeholder = 'Write markdown...',\n  value = '',\n}) => {\n  return (\n    <>\n      {/* eslint-disable-next-line @typescript-eslint/no-base-to-string */}\n      <div style={{ margin: '1rem 0' }}>{String(label)}</div>\n      <MarkdownCodeMirror onChangeAction={onChangeAction} placeholder={placeholder} value={value} />\n    </>\n  )\n}\n"],"names":["React","MarkdownCodeMirror","MarkdownEditor","label","onChangeAction","placeholder","value","div","style","margin","String"],"mappings":";AAEA,OAAOA,WAAW,QAAO;AAEzB,SAASC,kBAAkB,QAAQ,oCAAmC;AAStE,OAAO,MAAMC,iBAAgD,CAAC,EAC5DC,QAAQ,UAAU,EAClBC,cAAc,EACdC,cAAc,mBAAmB,EACjCC,QAAQ,EAAE,EACX;IACC,qBACE;;0BAEE,KAACC;gBAAIC,OAAO;oBAAEC,QAAQ;gBAAS;0BAAIC,OAAOP;;0BAC1C,KAACF;gBAAmBG,gBAAgBA;gBAAgBC,aAAaA;gBAAaC,OAAOA;;;;AAG3F,EAAC"}

package/dist/editor/directives/completions.d.ts

@@ -0,0 +1,5 @@
+import type { Completion } from '@codemirror/autocomplete';
+export declare function getDirectiveCompletionOptions(): Completion[];
+export declare function getDirectiveAttributeCompletionOptions(name: string): Completion[];
+export declare function getDirectiveThemeValueCompletionOptions(name: string, attribute: string): Completion[];
+export declare const directiveCompletions: import("@codemirror/state").Extension;

package/dist/editor/directives/completions.js

@@ -0,0 +1,93 @@
+import { autocompletion, snippetCompletion } from '@codemirror/autocomplete';
+import { layoutDirectiveRegistry } from '../../directives/registry.js';
+import { getDirectiveThemeNames } from '../../directives/themes.js';
+export function getDirectiveCompletionOptions() {
+    return layoutDirectiveRegistry.getPublicDefinitions().flatMap((definition)=>{
+        const snippets = [
+            {
+                detail: definition.editor.detail,
+                label: `:::${definition.name}`,
+                snippet: definition.editor.snippet
+            },
+            ...(definition.editor.snippets ?? []).map((snippet)=>({
+                    detail: snippet.detail ?? definition.editor.detail,
+                    label: snippet.label,
+                    snippet: snippet.snippet
+                }))
+        ];
+        return snippets.map((snippet)=>snippetCompletion(snippet.snippet, {
+                type: 'keyword',
+                detail: snippet.detail,
+                info: definition.description,
+                label: snippet.label
+            }));
+    });
+}
+export function getDirectiveAttributeCompletionOptions(name) {
+    const definition = layoutDirectiveRegistry.get(name);
+    const attributes = definition?.allowedAttributes ?? [];
+    return attributes.map((attribute)=>snippetCompletion(`${attribute}="\${${attribute}}"`, {
+            type: 'property',
+            detail: `:::${name} attribute`,
+            label: attribute
+        }));
+}
+export function getDirectiveThemeValueCompletionOptions(name, attribute) {
+    const definition = layoutDirectiveRegistry.get(name);
+    const groupName = definition?.themeAttributes?.[attribute];
+    if (!groupName) return (definition?.attributeValues?.[attribute] ?? []).map((value)=>({
+            type: 'constant',
+            detail: `:::${name} ${attribute}`,
+            label: value
+        }));
+    return getDirectiveThemeNames(groupName).map((themeName)=>({
+            type: 'constant',
+            detail: `${groupName} theme`,
+            label: themeName
+        }));
+}
+function attributeCompletionSource(context) {
+    const line = context.state.doc.lineAt(context.pos);
+    const beforeCursor = line.text.slice(0, context.pos - line.from);
+    const directiveMatch = beforeCursor.match(/^\s*:::(\w+)\s+\{([^}]*)$/);
+    if (!directiveMatch) return null;
+    const [, name, attributesBeforeCursor] = directiveMatch;
+    const valueMatch = attributesBeforeCursor.match(/(?:^|\s)(theme|cardTheme|cellTheme|stepTheme|tabTheme)="([^"]*)$/);
+    if (valueMatch) {
+        const [, attribute, typedValue] = valueMatch;
+        const options = getDirectiveThemeValueCompletionOptions(name, attribute);
+        if (options.length === 0) return null;
+        return {
+            from: context.pos - typedValue.length,
+            options
+        };
+    }
+    const attributeMatch = attributesBeforeCursor.match(/(?:^|\s)([\w-]*)$/);
+    const typedAttribute = attributeMatch?.[1] ?? '';
+    const options = getDirectiveAttributeCompletionOptions(name);
+    if (options.length === 0) return null;
+    if (!context.explicit && typedAttribute.length === 0) return null;
+    return {
+        from: context.pos - typedAttribute.length,
+        options
+    };
+}
+function directiveCompletionSource(context) {
+    const attributeResult = attributeCompletionSource(context);
+    if (attributeResult) return attributeResult;
+    const match = context.matchBefore(/:::[\w-]*/);
+    if (!match) return null;
+    if (match.from === match.to && !context.explicit) return null;
+    return {
+        from: match.from,
+        options: getDirectiveCompletionOptions()
+    };
+}
+export const directiveCompletions = autocompletion({
+    activateOnTyping: true,
+    override: [
+        directiveCompletionSource
+    ]
+});
+
+//# sourceMappingURL=completions.js.map

package/dist/editor/directives/completions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/editor/directives/completions.ts"],"sourcesContent":["import type { Completion, CompletionContext } from '@codemirror/autocomplete'\n\nimport { autocompletion, snippetCompletion } from '@codemirror/autocomplete'\n\nimport { layoutDirectiveRegistry } from '../../directives/registry.js'\nimport { getDirectiveThemeNames } from '../../directives/themes.js'\n\nexport function getDirectiveCompletionOptions() {\n  return layoutDirectiveRegistry.getPublicDefinitions().flatMap((definition) => {\n    const snippets = [\n      {\n        detail: definition.editor.detail,\n        label: `:::${definition.name}`,\n        snippet: definition.editor.snippet,\n      },\n      ...(definition.editor.snippets ?? []).map((snippet) => ({\n        detail: snippet.detail ?? definition.editor.detail,\n        label: snippet.label,\n        snippet: snippet.snippet,\n      })),\n    ]\n\n    return snippets.map((snippet) =>\n      snippetCompletion(snippet.snippet, {\n        type: 'keyword',\n        detail: snippet.detail,\n        info: definition.description,\n        label: snippet.label,\n      }),\n    )\n  })\n}\n\nexport function getDirectiveAttributeCompletionOptions(name: string): Completion[] {\n  const definition = layoutDirectiveRegistry.get(name)\n  const attributes = definition?.allowedAttributes ?? []\n\n  return attributes.map((attribute) =>\n    snippetCompletion(`${attribute}=\"\\${${attribute}}\"`, {\n      type: 'property',\n      detail: `:::${name} attribute`,\n      label: attribute,\n    }),\n  )\n}\n\nexport function getDirectiveThemeValueCompletionOptions(\n  name: string,\n  attribute: string,\n): Completion[] {\n  const definition = layoutDirectiveRegistry.get(name)\n  const groupName = definition?.themeAttributes?.[attribute]\n\n  if (!groupName)\n    return (definition?.attributeValues?.[attribute] ?? []).map((value) => ({\n      type: 'constant',\n      detail: `:::${name} ${attribute}`,\n      label: value,\n    }))\n\n  return getDirectiveThemeNames(groupName).map((themeName) => ({\n    type: 'constant',\n    detail: `${groupName} theme`,\n    label: themeName,\n  }))\n}\n\nfunction attributeCompletionSource(context: CompletionContext) {\n  const line = context.state.doc.lineAt(context.pos)\n  const beforeCursor = line.text.slice(0, context.pos - line.from)\n  const directiveMatch = beforeCursor.match(/^\\s*:::(\\w+)\\s+\\{([^}]*)$/)\n\n  if (!directiveMatch) return null\n\n  const [, name, attributesBeforeCursor] = directiveMatch\n  const valueMatch = attributesBeforeCursor.match(\n    /(?:^|\\s)(theme|cardTheme|cellTheme|stepTheme|tabTheme)=\"([^\"]*)$/,\n  )\n\n  if (valueMatch) {\n    const [, attribute, typedValue] = valueMatch\n    const options = getDirectiveThemeValueCompletionOptions(name, attribute)\n\n    if (options.length === 0) return null\n\n    return {\n      from: context.pos - typedValue.length,\n      options,\n    }\n  }\n\n  const attributeMatch = attributesBeforeCursor.match(/(?:^|\\s)([\\w-]*)$/)\n  const typedAttribute = attributeMatch?.[1] ?? ''\n  const options = getDirectiveAttributeCompletionOptions(name)\n\n  if (options.length === 0) return null\n  if (!context.explicit && typedAttribute.length === 0) return null\n\n  return {\n    from: context.pos - typedAttribute.length,\n    options,\n  }\n}\n\nfunction directiveCompletionSource(context: CompletionContext) {\n  const attributeResult = attributeCompletionSource(context)\n  if (attributeResult) return attributeResult\n\n  const match = context.matchBefore(/:::[\\w-]*/)\n\n  if (!match) return null\n  if (match.from === match.to && !context.explicit) return null\n\n  return {\n    from: match.from,\n    options: getDirectiveCompletionOptions(),\n  }\n}\n\nexport const directiveCompletions = autocompletion({\n  activateOnTyping: true,\n  override: [directiveCompletionSource],\n})\n"],"names":["autocompletion","snippetCompletion","layoutDirectiveRegistry","getDirectiveThemeNames","getDirectiveCompletionOptions","getPublicDefinitions","flatMap","definition","snippets","detail","editor","label","name","snippet","map","type","info","description","getDirectiveAttributeCompletionOptions","get","attributes","allowedAttributes","attribute","getDirectiveThemeValueCompletionOptions","groupName","themeAttributes","attributeValues","value","themeName","attributeCompletionSource","context","line","state","doc","lineAt","pos","beforeCursor","text","slice","from","directiveMatch","match","attributesBeforeCursor","valueMatch","typedValue","options","length","attributeMatch","typedAttribute","explicit","directiveCompletionSource","attributeResult","matchBefore","to","directiveCompletions","activateOnTyping","override"],"mappings":"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"}

package/dist/editor/directives/diagnostics.d.ts

@@ -0,0 +1 @@
+export declare const directiveDiagnostics: import("@codemirror/state").Extension;

package/dist/editor/directives/diagnostics.js

@@ -0,0 +1,12 @@
+import { linter } from '@codemirror/lint';
+import { lintMarkdownDirectives } from '../../directives/diagnostics.js';
+export const directiveDiagnostics = linter((view)=>{
+    return lintMarkdownDirectives(view.state.doc.toString()).map((diagnostic)=>({
+            from: diagnostic.from,
+            message: diagnostic.message,
+            severity: diagnostic.severity,
+            to: diagnostic.to
+        }));
+});
+
+//# sourceMappingURL=diagnostics.js.map

package/dist/editor/directives/diagnostics.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/editor/directives/diagnostics.ts"],"sourcesContent":["import type { Diagnostic } from '@codemirror/lint'\n\nimport { linter } from '@codemirror/lint'\n\nimport { lintMarkdownDirectives } from '../../directives/diagnostics.js'\n\nexport const directiveDiagnostics = linter((view): Diagnostic[] => {\n  return lintMarkdownDirectives(view.state.doc.toString()).map((diagnostic) => ({\n    from: diagnostic.from,\n    message: diagnostic.message,\n    severity: diagnostic.severity,\n    to: diagnostic.to,\n  }))\n})\n"],"names":["linter","lintMarkdownDirectives","directiveDiagnostics","view","state","doc","toString","map","diagnostic","from","message","severity","to"],"mappings":"AAEA,SAASA,MAAM,QAAQ,mBAAkB;AAEzC,SAASC,sBAAsB,QAAQ,kCAAiC;AAExE,OAAO,MAAMC,uBAAuBF,OAAO,CAACG;IAC1C,OAAOF,uBAAuBE,KAAKC,KAAK,CAACC,GAAG,CAACC,QAAQ,IAAIC,GAAG,CAAC,CAACC,aAAgB,CAAA;YAC5EC,MAAMD,WAAWC,IAAI;YACrBC,SAASF,WAAWE,OAAO;YAC3BC,UAAUH,WAAWG,QAAQ;YAC7BC,IAAIJ,WAAWI,EAAE;QACnB,CAAA;AACF,GAAE"}

package/dist/editor/themes/payload.d.ts

@@ -0,0 +1,27 @@
+import type { Extension } from '@codemirror/state';
+import { HighlightStyle } from '@codemirror/language';
+export declare const color: {
+    activeLine: string;
+    bracketMatch: string;
+    chalky: string;
+    coral: string;
+    cursor: string;
+    cyan: string;
+    highlightBackground: string;
+    invalid: string;
+    ivory: string;
+    malibu: string;
+    sage: string;
+    searchMatch: string;
+    searchMatchOutline: string;
+    selection: string;
+    selectionBackground: string;
+    selectionMatch: string;
+    stone: string;
+    tooltipBackground: string;
+    violet: string;
+    whiskey: string;
+};
+export declare const payloadTheme: Extension;
+export declare const payloadHighlightStyle: HighlightStyle;
+export declare const payloadMarkdownTheme: Extension;